feat(kanban): restore commands offline

req: local/001\nreq: local/002\nreq: local/003\nreq: local/004

examples/kanban/static/command-log.js

@@ -41,6 +41,16 @@ function clientReady(root) {
   });
 }
 
+async function prepareOfflineShell(root) {
+  if (!("serviceWorker" in navigator)) throw new Error("service workers are unavailable");
+  await navigator.serviceWorker.register("/offline.js", { scope: "/" });
+  await navigator.serviceWorker.ready;
+  if (!navigator.serviceWorker.controller) {
+    await new Promise((resolve) => navigator.serviceWorker.addEventListener("controllerchange", resolve, { once: true }));
+  }
+  root.setAttribute("data-kanban-offline-ready", "");
+}
+
 function stableSession() {
   const key = "hemx-kanban-session-v1";
   let session = sessionStorage.getItem(key);
@@ -120,6 +130,7 @@ async function start() {
   const root = document.querySelector(ROOT);
   if (!root) return;
   const databasePromise = openCommandLog();
+  const offlineReady = prepareOfflineShell(root).catch((error) => report(root, "offline", error));
   await clientReady(root);
   let wasmHandler;
   const durableHandler = async (...wire) => {
@@ -157,6 +168,7 @@ async function start() {
     for (const command of commands) window.hemx.applyBatch(await project(root, wasmHandler, command), root);
     root.setAttribute("data-kanban-command-count", String(commands.length));
     root.setAttribute("data-kanban-command-ready", "");
+    await offlineReady;
   } catch (error) {
     report(root, "restore", error);
     throw error;

examples/kanban/static/offline.js

@@ -0,0 +1,30 @@
+const CACHE = "hemx-kanban-shell-v1";
+const SHELL = [
+  "/",
+  "/hemx.js",
+  "/hemx.client.js",
+  "/kanban_client.js",
+  "/kanban_client_bg.wasm",
+  "/app.js",
+];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(caches.open(CACHE).then((cache) => cache.addAll(SHELL)).then(() => self.skipWaiting()));
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys()
+      .then((names) => Promise.all(names.filter((name) => name.startsWith("hemx-kanban-shell-") && name !== CACHE).map((name) => caches.delete(name))))
+      .then(() => self.clients.claim()),
+  );
+});
+
+self.addEventListener("fetch", (event) => {
+  if (event.request.method !== "GET") return;
+  const url = new URL(event.request.url);
+  if (url.origin !== self.location.origin || !SHELL.includes(url.pathname)) return;
+  event.respondWith(
+    caches.match(event.request, { ignoreSearch: true }).then((cached) => cached || fetch(event.request)),
+  );
+});