fix

app/web/src/base/page/editor.tsx

@@ -136,6 +136,11 @@ export default page({
     const Editor = local.Editor;
     if (local.loading || !Editor) return <Loading note="base-page" />;
 
+    navigator.serviceWorker.controller?.postMessage({
+      type: "add-cache",
+      url: location.href,
+    });
+
     return (
       <Editor session={local.session} site_id={site_id} page_id={page_id} />
     );

app/web/src/base/page/live.tsx

@@ -11,6 +11,11 @@ export default page({
       params.page_id = params._;
     }
 
+    navigator.serviceWorker.controller?.postMessage({
+      type: "add-cache",
+      url: location.href,
+    });
+
     return (
       <Live
         mode={"dev"}

app/web/src/index.tsx

@@ -25,7 +25,7 @@ const registerServiceWorker = async () => {
   if ("serviceWorker" in navigator) {
     try {
       await navigator.serviceWorker.register(
-        new URL("./sworker.js", import.meta.url),
+        new URL("./sworker.ts", import.meta.url),
         {
           type: "module",
           scope: "/",

app/web/src/sworker.js

@@ -1,13 +0,0 @@
-import { manifest, version } from "@parcel/service-worker";
-
-async function install() {
-  const cache = await caches.open(version);
-  await cache.addAll(manifest);
-}
-addEventListener("install", (e) => e.waitUntil(install()));
-
-async function activate() {
-  const keys = await caches.keys();
-  await Promise.all(keys.map((key) => key !== version && caches.delete(key)));
-}
-addEventListener("activate", (e) => e.waitUntil(activate()));

app/web/src/sworker.ts

@@ -0,0 +1,40 @@
+import { manifest, version } from "@parcel/service-worker";
+
+async function install() {
+  const cache = await caches.open(version);
+  await cache.addAll(manifest);
+}
+addEventListener("install", (e) => (e as ExtendableEvent).waitUntil(install()));
+
+async function activate() {
+  const keys = await caches.keys();
+  await Promise.all(keys.map((key) => key !== version && caches.delete(key)));
+}
+addEventListener("activate", (e) =>
+  (e as ExtendableEvent).waitUntil(activate())
+);
+
+addEventListener("fetch", async (evt) => {
+  const e = evt as FetchEvent;
+  e.respondWith(
+    (async () => {
+      const r = await caches.match(e.request);
+      if (r) {
+        return r;
+      }
+      return await fetch(e.request);
+    })()
+  );
+});
+addEventListener("message", async (e) => {
+  const type = e.data.type;
+  const cache = await caches.open(version);
+
+  switch (type) {
+    case "add-cache":
+      if (!(await cache.match(e.data.url))) {
+        await cache.add(e.data.url);
+      }
+      break;
+  }
+});