add service worker stale cache management, gapp versions
This commit is contained in:
parent
0b9d1bf7fb
commit
7262a6d313
4 changed files with 69 additions and 40 deletions
5
app.js
5
app.js
|
|
@ -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"
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
|
|
|
||||||
|
|
@ -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 });
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue