fix: Service Worker static assets not loading on first page load

Author: joshunrau

packages/runtime-internal/src/interactive/bootstrap.js

@@ -50,11 +50,26 @@ if (!bundle) {
     await navigator.serviceWorker.register('./worker.js', {
       scope: './'
     });
-    await navigator.serviceWorker.ready.then((registration) => {
-      registration.active?.postMessage({
-        staticAssets: instrument.content.staticAssets,
-        type: 'STATIC_ASSETS'
+    const registration = await navigator.serviceWorker.ready;
+    if (!navigator.serviceWorker.controller) {
+      await new Promise((resolve) => {
+        navigator.serviceWorker.addEventListener('controllerchange', resolve, { once: true });
       });
+    }
+    const { port1, port2 } = new MessageChannel();
+    await new Promise((resolve) => {
+      port1.onmessage = (event) => {
+        if (event.data?.type === 'STATIC_ASSETS_READY') {
+          resolve(undefined);
+        }
+      };
+      registration.active?.postMessage(
+        {
+          staticAssets: instrument.content.staticAssets,
+          type: 'STATIC_ASSETS'
+        },
+        [port2]
+      );
     });
   }
 

packages/runtime-internal/src/interactive/worker.js

@@ -1,8 +1,18 @@
 /// <reference lib="webworker" />
 
+const worker = /** @type {ServiceWorkerGlobalScope} */ (/** @type {unknown} */ (self));
+
 /** @type {Map<string, string>} */
 const staticAssets = new Map();
 
+worker.addEventListener('install', () => {
+  worker.skipWaiting();
+});
+
+worker.addEventListener('activate', (event) => {
+  event.waitUntil(worker.clients.claim());
+});
+
 /**
  * Converts a data URL (base64 or plain) into a Fetch API Response object.
  *
@@ -49,9 +59,10 @@ addEventListener('message', (event) => {
   Object.entries(data.staticAssets).forEach(([key, value]) => {
     staticAssets.set(key, value);
   });
+  event.ports[0]?.postMessage({ type: 'STATIC_ASSETS_READY' });
 });
 
-self.addEventListener('fetch', (_event) => {
+worker.addEventListener('fetch', (_event) => {
   if (!staticAssets) {
     console.error('staticAssets is not defined');
     return;