Generate a service worker

Fixes curiousdannii#6
dfabulich · Nov 27, 2021 · a5a974e · a5a974e
1 parent c8eaa6e
commit a5a974e
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,8 @@ dist/inform7/Parchment
 dist/lectrote
 node_modules
 
+serviceworker.js
+
 package-lock.json
 
 /*.js

diff --git a/index.html b/index.html
@@ -7,6 +7,20 @@
     <script src="dist/web/jquery.min.js"></script>
     <script src="dist/web/ie.js" nomodule></script>
     <script src="dist/web/main.js" type="module"></script>
+    <script>
+        var useServiceWorker = (location.protocol === 'https:' && 'serviceWorker' in navigator);
+        if (useServiceWorker) {
+            navigator.serviceWorker.register('serviceworker.js').then(function (registration) {
+                console.log('ServiceWorker registration successful');
+                navigator.serviceWorker.addEventListener('controllerchange', function() {
+                    console.log('controllerchanged');
+                    location.reload();
+                })
+            }).catch(function (err) {
+                console.error('ServiceWorker registration failed: ', err);
+            });
+        }
+    </script>
     <link rel="stylesheet" href="dist/web/web.css">
 </head>
 <body>

diff --git a/tools/generate-service-worker.mjs b/tools/generate-service-worker.mjs
@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+
+import {readdir, writeFile} from 'fs/promises';
+
+const cacheKey = Date.now();
+const files = await readdir('dist/web');
+
+const code = `
+const CACHE_NAME="${cacheKey}";
+const urls = [".", ${files.map(file => `"dist/web/${file}"`).join(',')}];
+
+self.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(function(cache) {
+        return cache.addAll(urls);
+      }).then(() => console.log("[ServiceWorker] installed, possibly waiting"))
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith((async () => {
+    if (event.request.mode === "navigate" &&
+      event.request.method === "GET" &&
+      registration.waiting &&
+      (await clients.matchAll()).length < 2
+    ) {
+      registration.waiting.postMessage('skipWaiting');
+      console.log("[ServiceWorker] refreshing and skipping waiting");
+      return new Response("", {headers: {"Refresh": "0"}});
+    }
+    return await caches.match(event.request) ||
+      fetch(event.request);
+  })());
+});
+
+self.addEventListener('activate', function(e) {
+  console.log('[ServiceWorker] Activate');
+  e.waitUntil(
+    caches.keys().then(keyList => Promise.all(keyList.map(key => {
+      if (key !== CACHE_NAME) {
+        console.log("[ServiceWorker] deleting", key);
+        return caches.delete(key);
+      }
+    })))
+  );
+});
+
+self.addEventListener('message', event => {
+  if (event.data === 'skipWaiting') {
+    console.log("[ServiceWorker]", CACHE_NAME, 'skipWaiting');
+    skipWaiting();
+  }
+});
+`;
+
+await writeFile('serviceworker.js', code, 'utf8');