add service worker stale cache management, gapp versions

This commit is contained in:
Stewart Allen 2022-08-31 21:41:51 -04:00
commit 7262a6d313
4 changed files with 69 additions and 40 deletions

5
app.js
View file

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

View file

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

View file

@ -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) => { const addResourcesToCache = async (resources) => {
console.log('cache resources', resources); debug('cache resources', resources);
const cache = await caches.open('v4'); const cache = await caches.open('v'+version);
await cache.addAll(resources); await cache.addAll(resources);
}; };
const putInCache = async (request, response) => { const putInCache = async (request, response) => {
const cache = await caches.open('v4'); const cache = await caches.open('v'+version);
console.log('cache', request.request.url); // debug('cache', request.url);
await cache.put(request, response); await cache.put(request, response);
}; };
@ -18,23 +23,26 @@ const cacheFirst = async ({
fallbackUrl fallbackUrl
}) => { }) => {
// First try to get the resource from the cache // 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) { if (responseFromCache) {
console.log('sw cached', request.url); // debug('cached', request.url);
return responseFromCache; return responseFromCache;
} else {
// debug('miss', request.url);
} }
// Next try to use the preloaded response, if it's there // Next try to use the preloaded response, if it's there
// const preloadResponse = await preloadResponsePromise; const preloadResponse = await preloadResponsePromise;
// if (preloadResponse) { if (preloadResponse) {
// console.info('using preload response', preloadResponse); debug('using preload response', preloadResponse);
// putInCache(request, preloadResponse.clone()); putInCache(request, preloadResponse.clone());
// return preloadResponse; return preloadResponse;
// } }
// Next try to get the resource from the network // Next try to get the resource from the network
try { try {
console.log('fetch', request.request.url); // debug('fetch', request.url);
const responseFromNetwork = await fetch(request); const responseFromNetwork = await fetch(request);
// response may be used only once // response may be used only once
// we need to save clone to put one copy in cache // we need to save clone to put one copy in cache
@ -42,7 +50,9 @@ const cacheFirst = async ({
putInCache(request, responseFromNetwork.clone()); putInCache(request, responseFromNetwork.clone());
return responseFromNetwork; return responseFromNetwork;
} catch (error) { } 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) { if (fallbackResponse) {
return fallbackResponse; return fallbackResponse;
} }
@ -51,9 +61,7 @@ const cacheFirst = async ({
// return a Response object // return a Response object
return new Response('Network error happened', { return new Response('Network error happened', {
status: 408, status: 408,
headers: { headers: { 'Content-Type': 'text/plain' },
'Content-Type': 'text/plain'
},
}); });
} }
}; };
@ -61,34 +69,42 @@ const cacheFirst = async ({
const enableNavigationPreload = async () => { const enableNavigationPreload = async () => {
if (self.registration.navigationPreload) { if (self.registration.navigationPreload) {
// Enable navigation preloads! // Enable navigation preloads!
console.log('sw preload'); // debug('sw preload');
try { try {
await self.registration.navigationPreload.enable(); await self.registration.navigationPreload.enable();
} catch (e) { } catch (e) {
console.log('sw preload fail', e); debug('sw preload fail', e);
} }
} }
}; };
self.addEventListener('activate', (event) => { self.addEventListener('activate', (event) => {
console.log('sw activate preload'); const vkey = 'v'+version;
// event.waitUntil(enableNavigationPreload()); // debug('sw activate');
// console.log('sw clients claim'); event.waitUntil(enableNavigationPreload());
// event.waitUntil(clients.claim()); // 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) => { self.addEventListener('install', (event) => {
console.log('sw install'); // debug('sw install');
event.waitUntil( // event.waitUntil( addResourcesToCache([ ]) );
addResourcesToCache([ self.skipWaiting();
// '/', debug('sw installed');
])
);
}); });
self.addEventListener('fetch', (event) => { self.addEventListener('fetch', (event) => {
// console.log('sw fetch', event.request.url);
event.respondWith( event.respondWith(
cacheFirst({ cacheFirst({
request: event.request, request: event.request,
@ -97,3 +113,7 @@ self.addEventListener('fetch', (event) => {
}) })
); );
}); });
self.addEventListener('message', (event) => {
// debug({ onmessage: event, clients });
});

View file

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