Web site with service worker, hosted https://121eddie.github.io/ and run in Chrome 66.0.3359.181
/index.html correctly traces the following registration on every load
<script type="text/javascript">
window.addEventListener('load', async function(){
if ( 'serviceWorker' in navigator ) {
try{
var registration=await navigator.serviceWorker.register('serviceWorker.js');
console.log('ServiceWorker enregistré avec le scope: ', registration.scope);
document.getElementById('worker').innerHTML='serviceWorker.js actif';
document.getElementById('cache').innerHTML='Cache actif';
}catch (err){
console.log(err);
}
}else{window.alert('Votre navigateur ne supporte pas les Service Workers. Ce site ne fonctionnera pas en mode offline');};
});
On first run, /serviceWorker.js goes throught the 'activate' event, correctly fetches the cache name and caches the files
var cache;
self.addEventListener('install', event => {//lors du chargement de index.html
self.skipWaiting();//il supplante tout de suite l'ancien
console.log("ServiceWorker installé");
});
self.addEventListener('activate', async function(event){
self.clients.claim();//le nouveau service worker prend le contrôle de toutes les pages ouvertes de l'appli web progressive
console.log("ServiceWorker activé");
if (navigator.onLine){
var oReq = new Request('version.txt?date='+new Date().getTime(), {method:'get'});
var response=await fetch(oReq);
var result=await response.text();
console.log('Nouvelle version du cache: '+result);//a distance: [object promise]
cache= await caches.open(result);
console.log('cache:'+cache);
for (var i=0;i<caches.length;i++){
if (caches[i]!=cache){
caches[i].delete();
}
}
try{await cache.addAll(['index.html','styles.css','traitement.js']);//en localhost: TypeError: Request failed
}catch (err){
console.log(err);
}//tout sauf version.txt //pas de résultat
}
});
//ServiceListener standard qui met en cache tout ce qui passe
//prévoit un chargement online avec mise en cache si quelquechose manque
self.addEventListener('fetch', async function(event){
console.log('Traitement du fetch '+event.request.url);
if(event.request.url.includes('version.txt')){
console.log('On laisse passer '+event.request.url);
return fetch(event.request);
}else{
// Try to get the response from a cache.
try{var cachedResponse = await cache.match(event.request);
}catch(err){console.log(event.request+'not cached')}
// Return it if we found one.
if (cachedResponse){
console.log('on sert '+event.request.url+' depuis le cache');
return cachedResponse;
}
// If we didn't find a match in the cache, we don't use the network (return fetch(event.request);)
}
});
On second run, 'activate' is not triggered (no log trace, no fetch).
On third run, even the 'fetch' is not triggered any more. This means offline requests aren't answered. What's going wrong?
I would like the cache version to be fetched every time index.html is loaded. I verify navigator.online to avoid useless and faulty requests.
I found out: it was a scope issue. I had to remove the slashes before the page names
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With