add service worker stale cache management, gapp versions

app.js

@@ -55,7 +55,8 @@ function init(mod) {
     dir = mod.dir;
     log = mod.log;
 
-    dversion = debug ? `_${version}` : version;
+    // dversion = debug ? `_${version}` : version;
+    dversion = debug ? Date.now().toString(36) : version;
     cacheDir = mod.util.datadir("cache");
 
     const approot = "main/gapp";
@@ -419,9 +420,11 @@ const script = {
         "&mesh/pool"
     ],
     cache : [
+        "moto/license",
         "main/service",
     ],
     service : [
+        "moto/license",
         "moto/service"
     ]
 };

src/main/service.js

@@ -1,21 +1,27 @@
 async function start_service_worker() {
+    const version = 53;
+    function debug() {
+        console.log(`[${version}]`, ...arguments);
+    }
+
     // install service worker
-    console.log('registering service worker');
+    debug('service worker registration', { gapp: self.gapp.version });
 
     try {
         // const reg = await navigator.serviceWorker.register("/src/moto/service.js?013", { scope: "/" });
-        const reg = await navigator.serviceWorker.register("/code/service.js?021", { scope: "/" });
+        const reg = await navigator.serviceWorker.register("/code/service.js?"+version, { scope: "/" });
         if (reg.installing) {
-            console.log('service worker installing');
+            debug('service worker installing');
         } else if (reg.waiting) {
-            console.log('service worker waiting');
+            debug('service worker waiting');
         } else if (reg.active) {
-            console.log('service worker active');
+            debug('service worker active');
         } else {
-            console.log({ service_worker: reg });
+            debug({ service_worker: reg });
         }
+        navigator.serviceWorker.controller.postMessage('ctrl message');
     } catch (err) {
-        console.log('service worker registration failed');
+        debug('service worker registration failed');
     }
 }
 if (navigator.serviceWorker) start_service_worker();

src/moto/service.js

@@ -1,14 +1,19 @@
-console.log('service worker running 021');
+const version = 53;
+function debug() {
+    console.log(`[${version}]`, ...arguments);
+}
+
+debug('sw entry point', { gapp: self.gapp.version });
 
 const addResourcesToCache = async (resources) => {
-    console.log('cache resources', resources);
-    const cache = await caches.open('v4');
+    debug('cache resources', resources);
+    const cache = await caches.open('v'+version);
     await cache.addAll(resources);
 };
 
 const putInCache = async (request, response) => {
-    const cache = await caches.open('v4');
-    console.log('cache', request.request.url);
+    const cache = await caches.open('v'+version);
+    // debug('cache', request.url);
     await cache.put(request, response);
 };
 
@@ -18,23 +23,26 @@ const cacheFirst = async ({
     fallbackUrl
 }) => {
     // First try to get the resource from the cache
-    const responseFromCache = await caches.match(request);
+    const cache = await caches.open('v'+version);
+    const responseFromCache = await cache.match(request);
     if (responseFromCache) {
-        console.log('sw cached', request.url);
+        // debug('cached', request.url);
         return responseFromCache;
+    } else {
+        // debug('miss', request.url);
     }
 
     // Next try to use the preloaded response, if it's there
-    // const preloadResponse = await preloadResponsePromise;
-    // if (preloadResponse) {
-    //     console.info('using preload response', preloadResponse);
-    //     putInCache(request, preloadResponse.clone());
-    //     return preloadResponse;
-    // }
+    const preloadResponse = await preloadResponsePromise;
+    if (preloadResponse) {
+        debug('using preload response', preloadResponse);
+        putInCache(request, preloadResponse.clone());
+        return preloadResponse;
+    }
 
     // Next try to get the resource from the network
     try {
-        console.log('fetch', request.request.url);
+        // debug('fetch', request.url);
         const responseFromNetwork = await fetch(request);
         // response may be used only once
         // we need to save clone to put one copy in cache
@@ -42,7 +50,9 @@ const cacheFirst = async ({
         putInCache(request, responseFromNetwork.clone());
         return responseFromNetwork;
     } catch (error) {
-        const fallbackResponse = await caches.match(fallbackUrl);
+        debug({fallback_error: error});
+        const cache = await caches.open('v'+version);
+        const fallbackResponse = await cache.match(fallbackUrl);
         if (fallbackResponse) {
             return fallbackResponse;
         }
@@ -51,9 +61,7 @@ const cacheFirst = async ({
         // return a Response object
         return new Response('Network error happened', {
             status: 408,
-            headers: {
-                'Content-Type': 'text/plain'
-            },
+            headers: { 'Content-Type': 'text/plain' },
         });
     }
 };
@@ -61,34 +69,42 @@ const cacheFirst = async ({
 const enableNavigationPreload = async () => {
     if (self.registration.navigationPreload) {
         // Enable navigation preloads!
-        console.log('sw preload');
+        // debug('sw preload');
         try {
             await self.registration.navigationPreload.enable();
         } catch (e) {
-            console.log('sw preload fail', e);
+            debug('sw preload fail', e);
         }
 
     }
 };
 
 self.addEventListener('activate', (event) => {
-    console.log('sw activate preload');
-    // event.waitUntil(enableNavigationPreload());
-    // console.log('sw clients claim');
-    // event.waitUntil(clients.claim());
+    const vkey = 'v'+version;
+    // debug('sw activate');
+    event.waitUntil(enableNavigationPreload());
+    // cleanup old caches
+    event.waitUntil(
+        caches.keys()
+            .then( keylist => keylist
+                .filter(key => key != vkey)
+                .map(key => { debug({delete_cache: key}); return caches.delete(key); }) )
+            .then( deletes => Promise.all(deletes) )
+    );
+    event.waitUntil(new Promise((resolve, reject) => {
+        setTimeout(resolve, 5000);
+    }));
+    debug('sw activated');
 });
 
 self.addEventListener('install', (event) => {
-    console.log('sw install');
-    event.waitUntil(
-        addResourcesToCache([
-            // '/',
-        ])
-    );
+    // debug('sw install');
+    // event.waitUntil( addResourcesToCache([ ]) );
+    self.skipWaiting();
+    debug('sw installed');
 });
 
 self.addEventListener('fetch', (event) => {
-    // console.log('sw fetch', event.request.url);
     event.respondWith(
         cacheFirst({
             request: event.request,
@@ -97,3 +113,7 @@ self.addEventListener('fetch', (event) => {
         })
     );
 });
+
+self.addEventListener('message', (event) => {
+    // debug({ onmessage: event, clients });
+});

web/kiri/index.html

@@ -19,7 +19,7 @@
     <link rel="apple-touch-icon" href="/kiri/favicon-mobile.png">
     <link rel="stylesheet" type="text/css" href="/kiri/index.css?{{version}}">
     <link href="/font/css/all.min.css" rel="stylesheet">
-    <script src="/code/cache.js?{{version}}" defer></script>
+    <script src="/code/cache.js?53" defer></script>
     <script src="/font/js/all.min.js" crossorigin="anonymous" defer></script>
     <script src="/code/kiri.js?{{version}}"></script>
 </head>