WIP of messaging to sw

index.html

@@ -29,14 +29,32 @@
                 }
             });
 		</script>
-        <script id="service-worker" type="disabled">
+        <script id="service-worker" type="module">
+
+            function workerMessage(worker, type) {
+                const body = {type, id: Math.floor(Math.random() * Number.MAX_SAFE_INTEGER)};
+                let resolve;
+                const promise = new Promise(r => resolve = r);
+                const onMessage = function(event) {
+                    if (event.data.replyTo === body.id) {
+                        worker.removeEventListener("message", onMessage);
+                        resolve(event.data.content);
+                    }
+                }
+                worker.addEventListener("message", onMessage);
+                worker.postMessage(body);
+                return promise;
+            }
+
             if('serviceWorker' in navigator) {
                 navigator.serviceWorker.register('sw.js').then(function(registration) {
                     console.log("Service Worker registered");
-                    function tryActivateUpdate() {
+                    async function tryActivateUpdate() {
                         if (registration.waiting && registration.active) {
-                            registration.unregister();
+                            const version = await workerMessage(registration.waiting, "version");
-                            console.log("Service Worker unregistered");
+                            if (confirm(`Version ${version.version} (${version.buildHash}) is ready to install. Apply now?`)) {
+                                registration.waiting.postMessage({type: "skipWaiting"}); // will trigger controllerchange event
+                            }
                         }
                     }
                     tryActivateUpdate();
@@ -47,6 +65,9 @@
                         }
                     };
                 });
+                navigator.serviceWorker.addEventListener("controllerchange", function() {
+                    document.location.reload();
+                });
             }
         </script>
 	</body>

scripts/build.mjs

@@ -87,7 +87,7 @@ async function build({modernOnly}) {
     
     const globalHash = assets.hashForAll();
 
-    await buildServiceWorker(swSource, globalHash, assets);
+    await buildServiceWorker(swSource, version, globalHash, assets);
     await buildHtml(doc, version, globalHash, modernOnly, assets);
     console.log(`built hydrogen ${version} (${globalHash}) successfully with ${assets.size} files`);
 }
@@ -246,7 +246,7 @@ async function buildManifest(assets) {
     await assets.write("manifest.json", JSON.stringify(webManifest));
 }
 
-async function buildServiceWorker(swSource, globalHash, assets) {
+async function buildServiceWorker(swSource, version, globalHash, assets) {
     const unhashedPreCachedAssets = ["index.html"];
     const hashedPreCachedAssets = [];
     const hashedCachedOnRequestAssets = [];
@@ -261,6 +261,7 @@ async function buildServiceWorker(swSource, globalHash, assets) {
         }
     }
     // write service worker
+    swSource = swSource.replace(`"%%VERSION%%"`, `"${version}"`);
     swSource = swSource.replace(`"%%GLOBAL_HASH%%"`, `"${globalHash}"`);
     swSource = swSource.replace(`"%%UNHASHED_PRECACHED_ASSETS%%"`, JSON.stringify(unhashedPreCachedAssets));
     swSource = swSource.replace(`"%%HASHED_PRECACHED_ASSETS%%"`, JSON.stringify(hashedPreCachedAssets));

src/main.js

@@ -148,6 +148,6 @@ export async function main(container, paths, legacyExtras) {
         const view = new RootView(vm);
         container.appendChild(view.mount());
     } catch(err) {
-        console.error(`${err.message}:\n${err.stack}`);
+        console.error(`${err.message}:\n${err.stack}sdfdf`);
     }
 }

src/service-worker.template.js

@@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+const VERSION = "%%VERSION%%";
 const GLOBAL_HASH = "%%GLOBAL_HASH%%";
 const UNHASHED_PRECACHED_ASSETS = "%%UNHASHED_PRECACHED_ASSETS%%";
 const HASHED_PRECACHED_ASSETS = "%%HASHED_PRECACHED_ASSETS%%";
@@ -67,6 +68,18 @@ self.addEventListener('fetch', (event) => {
     event.respondWith(handleRequest(event.request));
 });
 
+self.addEventListener('message', (event) => {
+    const reply = content => event.source.postMessage({replyTo: event.data?.id, content});
+    switch (event.data?.type) {
+        case "version":
+            reply({version: VERSION, buildHash: GLOBAL_HASH});
+            break;
+        case "skipWaiting":
+            self.skipWaiting();
+            break;
+    }
+});
+
 async function handleRequest(request) {
     const baseURL = self.registration.scope;
     if (request.url === baseURL) {