Add service worker for offline PWA support

theonlytechnohead · theonlytechnohead · commit 17f5704b17bd · 2025-11-26T20:42:00.000+13:00
diff --git a/index.html b/index.html
@@ -19,6 +19,7 @@
 		<link rel="stylesheet" href="css/hex.css" />
 		<link rel="stylesheet" href="css/print.css" media="print" />
 		<script type="module" src="js/play.js"></script>
+		<script src="js/register.js"></script>
 	</head>
 
 	<body>
@@ -35,7 +36,7 @@ <h1><span>⬣</span> Hexchess</h1>
 		<footer>
 			<p>© Craig Anderson</p>
 			<p>
-				v1.2.1 (<a href="https://github.com/theonlytechnohead/Hexchess">source</a>) (<a
+				v1.3 (<a href="https://github.com/theonlytechnohead/Hexchess">source</a>) (<a
 					href="https://anderserver.ddns.net/blog/2023/8"
 					>story</a
 				>) (<a href="https://discord.gg/zaRuA8n4tm">discord</a>)
diff --git a/js/register.js b/js/register.js
@@ -0,0 +1,20 @@
+const registerServiceWorker = async () => {
+	if ("serviceWorker" in navigator) {
+		try {
+			const registration = await navigator.serviceWorker.register("/worker.js", {
+				scope: "/",
+			});
+			if (registration.installing) {
+				console.log("Service worker installing");
+			} else if (registration.waiting) {
+				console.log("Service worker installed");
+			} else if (registration.active) {
+				console.log("Service worker active");
+			}
+		} catch (error) {
+			console.error(`Registration failed with ${error}`);
+		}
+	}
+};
+
+registerServiceWorker();
diff --git a/worker.js b/worker.js
@@ -0,0 +1,70 @@
+const version = "v1.3";
+
+const addResourcesToCache = async (resources) => {
+	const cache = await caches.open(version);
+	console.log("Adding resources to cache:", resources.join(", "));
+	await cache.addAll(resources);
+};
+
+const putInCache = async (request, response) => {
+	const cache = await caches.open(version);
+	await cache.put(request, response);
+};
+
+const networkFirst = async ({ request, fallbackUrl }) => {
+	// First, try to get the resource from the network.
+	try {
+		const responseFromNetwork = await fetch(request);
+		// If the network request succeeded, clone the response:
+		// - put one copy in the cache, for the next time
+		// - return the original to the app
+		// Cloning is needed because a response can only be consumed once.
+		putInCache(request, responseFromNetwork.clone());
+		return responseFromNetwork;
+	} catch (error) {
+		const responseFromCache = await caches.match(request);
+		if (responseFromCache) {
+			return responseFromCache;
+		}
+
+		const fallbackResponse = await caches.match(fallbackUrl);
+		if (fallbackResponse) {
+			return fallbackResponse;
+		}
+		// When even the fallback response is not available,
+		// there is nothing we can do, but we must always
+		// return a Response object.
+		return new Response("Network error happened", {
+			status: 408,
+			headers: { "Content-Type": "text/plain" },
+		});
+	}
+};
+
+self.addEventListener("fetch", (event) => {
+	event.respondWith(
+		networkFirst({
+			request: event.request,
+			fallbackUrl: "/fallback.html",
+		}),
+	);
+});
+
+self.addEventListener("install", (event) => {
+	event.waitUntil(
+		addResourcesToCache([
+			"/",
+			"/index.html",
+			"/index.css",
+			"/css/webfonts_Chess",
+			"/css/hex.css",
+			"/css/print.css",
+			"/js/black.js",
+			"/js/board.js",
+			"/js/constants.js",
+			"/js/play.js",
+			"/js/register.js",
+			"/js/white.js",
+		]),
+	);
+});
