这是一个简单的概念验证待办事项列表。页面加载后，无需与服务器进行额外通信。一切都在客户端本地进行。
工作原理
Service Worker 充当网页和更广泛的互联网之间的代理。它拦截网络请求并允许您对其进行操作。您可以修改请求、缓存响应以供离线使用，甚至可以凭空创建新的响应，而无需将请求发送到浏览器之外。
当 htmx 发出网络请求时，服务工作线程会拦截该请求。然后，服务工作线程运行业务逻辑并生成新的 HTML，然后 htmx 会将其交换到 DOM 中。
与使用 React 等构建的传统单页应用相比，它还具有一些优势。服务工作者必须使用IndexedDB进行存储，该存储会在页面加载之间保持状态。
HTML 代码
<!DOCTYPE html>
<html>
<head>
<title>htmx spa</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="./style.css" />
<script src="./htmx.js"></script>
<script type="module">
async function load() {
try {
const registration = await navigator.serviceWorker.register("./sw.js");
if (registration.active) return;
const worker = registration.installing || registration.waiting;
if (!worker) throw new Error("No worker found");
worker.addEventListener("statechange", () => {
if (registration.active) location.reload();
});
} catch (err) {
console.error(<code>Registration failed with ${err}</code>);
}
}
if ("serviceWorker" in navigator) load();
</script>
<meta name="htmx-config" content='{"scrollIntoViewOnBoost": false}' />
</head>
<body hx-boost="true" hx-push-url="false" hx-get="./ui" hx-target="body" hx-trigger="load"></body>
</html>
|
如果您曾经构建过单页应用，那么这应该看起来很熟悉：HTML 文档的空壳，等待 JavaScript 填充。那个长内联
