feat: improve offline support with service worker and related tests

Author: stefanhuber

package-lock.json

@@ -5,7 +5,9 @@
     "build": "stencil build",
     "start": "stencil build --dev --watch --serve",
     "test": "npm run build && wdio run wdio.conf.ts",
-    "test:dev": "wdio run wdio.conf.ts --baseUrl=http://localhost:3333"
+    "test:dev": "wdio run wdio.conf.ts --baseUrl=http://localhost:3333",
+    "build:offline": "OFFLINE_SUPPORT=true stencil build",
+    "test:offline": "npm run build:offline && TEST_OFFLINE=true wdio run wdio.conf.ts"
   },
   "devDependencies": {
     "@ionic/core": "^8.6.0",
@@ -21,6 +23,7 @@
     "@wdio/mocha-framework": "^9.24.0",
     "@wdio/spec-reporter": "^9.24.0",
     "@wdio/static-server-service": "^9.24.0",
+    "puppeteer-core": "^24.40.0",
     "swiper": "^11.2.10",
     "typescript": "^5.9.3",
     "workbox-build": "^7.3.0"

package.json

@@ -1,42 +1,69 @@
 import { Env } from '@stencil/core';
-import { ServiceFacade } from "@smartcompanion/services";
+import { ServiceFacade } from '@smartcompanion/services';
 
-const isServiceWorkerActive = () => new Promise<void>(resolve => {
-  navigator.serviceWorker.getRegistration().then(registration => {
-    if (registration && registration.active) {
+const isServiceWorkerReady = () =>
+  new Promise<void>((resolve) => {
+    if (!('serviceWorker' in navigator)) {
       resolve();
-    } else if (!registration) {
-      console.warn("No service worker registration found.");
-      resolve();
-    } else {
-      setTimeout(() => {        
-        isServiceWorkerActive().then(resolve);
-      }, 500);
+      return;
     }
+
+    navigator.serviceWorker.getRegistration().then((registration) => {
+      if (!registration) {
+        console.warn('No service worker registration found.');
+        resolve();
+        return;
+      }
+
+      if (navigator.serviceWorker.controller) {
+        resolve();
+        return;
+      }
+
+      // Wait for the SW to take control (fires after activate + clients.claim())
+      navigator.serviceWorker.addEventListener('controllerchange', () => resolve(), { once: true });
+
+      // Fallback timeout to avoid hanging indefinitely
+      setTimeout(() => {
+        console.warn('Service worker controller timed out, proceeding anyway.');
+        resolve();
+      }, 10000);
+    });
   });
-});
 
 const serviceFacade = new ServiceFacade();
 
 serviceFacade.registerDefaultServices();
 serviceFacade.registerCollectibleAudioPlayerService(Env.TITLE);
 
-
-if (Env.OFFLINE_SUPPORT === "enabled") {
+if (Env.OFFLINE_SUPPORT === 'enabled') {
   serviceFacade.registerOfflineLoadService(
-    () => fetch(Env.DATA_URL, {
-      cache: "no-store",
-    }).then(response => response.json()),
-    (url: string) => isServiceWorkerActive().then(() => fetch(url).then(response => response.text())),
+    () =>
+      fetch(Env.DATA_URL)
+        .then((response) => {
+          if (!response.ok) throw new Error(`Data fetch failed: ${response.status}`);
+          return response.json();
+        })
+        .catch((error) => {
+          console.error('Failed to load data:', error);
+          throw error;
+        }),
+    (url: string) =>
+      isServiceWorkerReady().then(() =>
+        fetch(url).then((response) => {
+          if (!response.ok) throw new Error(`Asset fetch failed: ${response.status}`);
+          return response.text();
+        }),
+      ),
     (_: string) => Promise.resolve(),
     (_1: string, _2: string) => Promise.resolve(),
     () => Promise.resolve([]),
-  )
+  );
 } else {
-  serviceFacade.registerOnlineLoadService(() => 
+  serviceFacade.registerOnlineLoadService(() =>
     fetch(Env.DATA_URL, {
-      cache: "no-store",
-    }).then(response => response.json())
+      cache: 'no-store',
+    }).then((response) => response.json()),
   );
 }
 

src/services/index.ts

@@ -1,13 +1,31 @@
-importScripts('workbox-v7.3.0/workbox-sw.js');
+importScripts('workbox-v7.4.0/workbox-sw.js');
 
-workbox.routing.registerRoute(
-  // it is assumed that cachable assets are in the 'assets' directory
+const { precaching, routing, strategies } = workbox;
+
+// Clean up old precache versions on update
+precaching.cleanupOutdatedCaches();
+
+// Precache and route the app shell (JS, CSS, HTML, etc.)
+precaching.precacheAndRoute(self.__WB_MANIFEST);
+
+// Cache the external data JSON with NetworkFirst strategy
+// Fresh data when online, falls back to cache when offline
+routing.registerRoute(
+  ({ url }) => url.pathname.endsWith('/data.json'),
+  new strategies.NetworkFirst({
+    cacheName: 'data-cache',
+  })
+);
+
+// Cache assets directory with CacheFirst
+routing.registerRoute(
   ({ request }) => request.url.match(/assets\/.+\..{2,}/),
-  new workbox.strategies.CacheFirst()
+  new strategies.CacheFirst({
+    cacheName: 'assets-cache',
+  })
 );
 
+// On activate, immediately claim all clients
 self.addEventListener('activate', event => {
   event.waitUntil(self.clients.claim());
 });
-
-self.workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

src/sw.js

@@ -3,7 +3,7 @@ import { sass } from '@stencil/sass';
 
 const TITLE = "Animals";
 const DATA_URL = "https://smartcompanion-app.github.io/data-format/animals/data.json";
-const OFFLINE_SUPPORT = false; 
+const OFFLINE_SUPPORT = process.env.OFFLINE_SUPPORT === 'true' || false;
 
 export const config: Config = {
   globalStyle: 'src/global/app.scss',
@@ -35,7 +35,7 @@ export const config: Config = {
           '**/send-outline.svg',
         ]
       } : null,
-      baseUrl: 'https://myapp.local/',
+      baseUrl: '/',
     },
   ],
   plugins: [    

stencil.config.ts

@@ -0,0 +1,100 @@
+class ServiceWorkerComponent {
+  async waitForServiceWorkerActive(timeout = 15000): Promise<void> {
+    await browser.waitUntil(
+      async () => {
+        const swState: string = await browser.execute(() => {
+          return new Promise<string>((resolve) => {
+            if (!('serviceWorker' in navigator)) {
+              resolve('unsupported');
+              return;
+            }
+            navigator.serviceWorker.getRegistration().then((reg) => {
+              if (reg && reg.active) {
+                resolve('activated');
+              } else if (reg && reg.installing) {
+                resolve('installing');
+              } else if (reg && reg.waiting) {
+                resolve('waiting');
+              } else {
+                resolve('none');
+              }
+            });
+          });
+        });
+        return swState === 'activated';
+      },
+      { timeout, timeoutMsg: 'Service worker did not activate in time' },
+    );
+  }
+
+  async isControllingPage(): Promise<boolean> {
+    return browser.execute(() => {
+      return navigator.serviceWorker?.controller !== null;
+    });
+  }
+
+  async goOffline(): Promise<void> {
+    await browser.call(async () => {
+      const puppeteer = await browser.getPuppeteer();
+      const pages = await puppeteer.pages();
+      const cdpSession = await pages[0].createCDPSession();
+      await cdpSession.send('Network.emulateNetworkConditions', {
+        offline: true,
+        latency: 0,
+        downloadThroughput: 0,
+        uploadThroughput: 0,
+      });
+    });
+  }
+
+  async goOnline(): Promise<void> {
+    await browser.call(async () => {
+      const puppeteer = await browser.getPuppeteer();
+      const pages = await puppeteer.pages();
+      const cdpSession = await pages[0].createCDPSession();
+      await cdpSession.send('Network.emulateNetworkConditions', {
+        offline: false,
+        latency: 0,
+        downloadThroughput: -1,
+        uploadThroughput: -1,
+      });
+    });
+  }
+
+  async getCacheNames(): Promise<string[]> {
+    return browser.execute(async () => {
+      const names = await caches.keys();
+      return names;
+    });
+  }
+
+  async freshReload(): Promise<void> {
+    await browser.execute(() => {
+      localStorage.clear();
+      sessionStorage.clear();
+      window.location.hash = '/';
+    });
+    await browser.pause(500);
+    await browser.execute(() => {
+      window.location.reload();
+    });
+  }
+
+  async isCached(urlPattern: string): Promise<boolean> {
+    return browser.execute(async (pattern: string) => {
+      const names = await caches.keys();
+      for (const name of names) {
+        const cache = await caches.open(name);
+        const keys = await cache.keys();
+        for (const request of keys) {
+          if (request.url.includes(pattern)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    }, urlPattern);
+  }
+}
+
+export default new ServiceWorkerComponent();