Add ServiceWorker

package.json

@@ -9,6 +9,7 @@
   "author": "",
   "license": "GPL-3.0-or-later",
   "devDependencies": {
+    "@parcel/service-worker": "^2.12.0",
     "nitro-fs": "^1.1.0",
     "parcel": "^2.12.0"
   }

src/App.ts

@@ -1,3 +1,4 @@
+import * as ServiceWorkerComms from "./ServiceWorkerComms";
 import * as AudioWorkerComms from "./AudioWorkerComms";
 import * as ControlPanel from "./ControlPanel";
 import * as AudioPlayer from "./AudioPlayer";
@@ -57,6 +58,7 @@ function stop() {
 	StateManager.discardStates(Infinity);
 }
 
+ServiceWorkerComms.init();
 AudioWorkerComms.init();
 Renderer.init();
 ControlPanel.init(load, start, stop);

src/ServiceWorker.ts

@@ -0,0 +1,47 @@
+import { version, manifest } from "@parcel/service-worker";
+
+declare const self: ServiceWorkerGlobalScope;
+
+async function install() {
+	const cache = await caches.open(version);
+	await cache.addAll(manifest);
+	await cache.add("/");
+}
+
+self.addEventListener("install", (e: ExtendableEvent) => {
+	e.waitUntil(install());
+	self.skipWaiting();
+});
+
+async function activate() {
+	const keys = await caches.keys();
+	await Promise.all(
+		keys.map(key => key !== version && caches.delete(key))
+	);
+}
+
+self.addEventListener("activate", (e: ExtendableEvent) => {
+	e.waitUntil(activate());
+	e.waitUntil(self.clients.claim());
+});
+
+self.addEventListener("fetch", (e: FetchEvent) => {
+	if (e.request.method !== "GET") return;
+
+	async function getResponse() {
+		const cache = await caches.open(version);
+
+		// Parcel adds stupid timestamps to the end of the URLs (at least for debug builds)
+		// and I can't figure out how to disable them,
+		// so I'm just going to strip them off here
+		const realUrl = e.request.url.replace(/\?.*$/, "");
+		const cachedResponse = await cache.match(realUrl);
+		if (cachedResponse) {
+			return cachedResponse;
+		}
+
+		return fetch(e.request);
+	}
+
+	e.respondWith(getResponse());
+});

src/ServiceWorkerComms.ts

@@ -0,0 +1,17 @@
+export async function init() {
+	if (!("serviceWorker" in navigator)) {
+		console.error("Service workers are not supported in this browser.");
+	}
+
+	try {
+		await navigator.serviceWorker.register(
+			new URL("ServiceWorker.ts", import.meta.url),
+			{
+				scope: "/",
+				type: "module"
+			}
+		);
+	} catch (e) {
+		console.error("Service worker registration failed:", e);
+	}
+}

tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"compilerOptions": {
+		"lib": ["ES2015", "WebWorker"],
+	},
+	"include": [
+		"src/AudioWorker.ts",
+		"src/ServiceWorker.ts",
+	]
+}