网站使用服务工作者,在Chrome 66.0.3359.181中托管,并通过https://121eddie.github.io/运行。
每次加载,/index.html都会正确地跟踪以下注册信息。
<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');};
在第一次运行时,/serviceWorker.js 通过 'activate' 事件,正确获取缓存名称并缓存文件。
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);)
}
});
在第二次运行时,“激活”不会触发(没有日志追踪,也没有抓取)。
在第三次运行时,甚至“抓取”也不再被触发。这意味着离线请求没有得到响应。出了什么问题?
我希望每次加载index.html时都能获取缓存版本。我验证navigator.online以避免无用和错误的请求。