Add service worker for offline compatibility

.github/workflows/build.yml

@@ -26,9 +26,9 @@ jobs:
     steps:
       # Note: This workflow will not run on forks without modification; we're open to making steps
       #       that rely on our deployment infrastructure conditional. Please open an issue.
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Configure node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20.x
           cache: "npm"

Makefile

@@ -8,7 +8,7 @@ build:
 
 dist: build
 	mkdir -p $(BUILD)/build
-	cp -r $(SRC)/*.html $(SRC)/term.js src/examples $(BUILD)
+	cp -r $(SRC)/*.html $(SRC)/term.js src/examples $(SRC)/build/sw.js $(BUILD)
 	cp $(SRC)/build/firmware.js $(SRC)/build/simulator.js $(SRC)/build/firmware.wasm  $(BUILD)/build/
 
 watch: dist

src/Makefile

@@ -147,6 +147,7 @@ $(BUILD)/micropython.js: $(OBJ) jshal.js simulator-js
 
 simulator-js:
 	npx esbuild ./simulator.ts --bundle --outfile=$(BUILD)/simulator.js --loader:.svg=text
+	npx esbuild --define:process.env.version=$$(cat ../package.json | jq .version) ./sw.ts --bundle --outfile=$(BUILD)/sw.js
 
 include $(TOP)/py/mkrules.mk
 

src/simulator.ts

@@ -15,6 +15,40 @@ declare global {
   }
 }
 
+function initServiceWorker() {
+  window.addEventListener("load", () => {
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker.register("sw.js").then(
+        (registration) => {
+          console.log("Simulator service worker registration successful");
+          // Reload the page when a new service worker is installed.
+          registration.onupdatefound = function () {
+            const installingWorker = registration.installing;
+            if (installingWorker) {
+              installingWorker.onstatechange = function () {
+                if (
+                  installingWorker.state === "installed" &&
+                  navigator.serviceWorker.controller
+                ) {
+                  window.location.reload();
+                }
+              };
+            }
+          };
+        },
+        (error) => {
+          console.error(
+            `Simulator service worker registration failed: ${error}`
+          );
+        }
+      );
+    } else {
+      console.error("Service workers are not supported.");
+    }
+  });
+}
+
+initServiceWorker();
 const fs = new FileSystem();
 const board = createBoard(new Notifications(window.parent), fs);
 window.addEventListener("message", createMessageListener(board));

src/sw.ts

@@ -0,0 +1,51 @@
+/// <reference lib="WebWorker" />
+// Empty export required due to --isolatedModules flag in tsconfig.json
+export type {};
+declare const self: ServiceWorkerGlobalScope;
+declare const clients: Clients;
+
+const assets = ["simulator.html", "build/simulator.js", "build/firmware.js"];
+const cacheName = `simulator-${process.env.version}`;
+
+self.addEventListener("install", (event) => {
+  console.log("Installing simulator service worker...");
+  self.skipWaiting();
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(cacheName);
+      await cache.addAll(assets);
+    })()
+  );
+});
+
+self.addEventListener("activate", (event) => {
+  console.log("Activating simulator service worker...");
+  event.waitUntil(
+    (async () => {
+      const names = await caches.keys();
+      await Promise.all(
+        names.map((name) => {
+          if (name !== cacheName) {
+            return caches.delete(name);
+          }
+        })
+      );
+      await clients.claim();
+    })()
+  );
+});
+
+self.addEventListener("fetch", (event) => {
+  event.respondWith(
+    (async () => {
+      const cachedResponse = await caches.match(event.request);
+      if (cachedResponse) {
+        return cachedResponse;
+      }
+      const response = await fetch(event.request);
+      const cache = await caches.open(cacheName);
+      cache.put(event.request, response.clone());
+      return response;
+    })()
+  );
+});

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es2019",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["dom", "dom.iterable", "esnext", "WebWorker"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,