服务人员离线时未注册

Question

所以我在浏览器联机时创建并成功注册了服务人员。我可以看到使用DevTools正确缓存了资源。问题是，当我切换到离线模式时，服务工作人员似乎取消了自己的注册，因此除了显示谷歌浏览器离线页面外，没有任何内容。

代码。

'use strict'; 
var CACHE_NAME = 'v1'; 
var urlsToCache = [ 
    '/' 
]; 

self.addEventListener('install', function(event) { 
    // Perform install steps 
    event.waitUntil(
    caches.open(CACHE_NAME) 
     .then(function(cache) { 
     console.log('Opened cache'); 
     return cache.addAll(urlsToCache); 
     }) 
); 
}); 

self.addEventListener('fetch', function(event) { 
    event.respondWith(
    caches.match(event.request) 
     .then(function(response) { 
     // Cache hit - return response 
     if (response) { 
      return response; 
     } 

     // IMPORTANT: Clone the request. A request is a stream and 
     // can only be consumed once. Since we are consuming this 
     // once by cache and once by the browser for fetch, we need 
     // to clone the response. 
     var fetchRequest = event.request.clone(); 

     return fetch(fetchRequest).then(
      function(response) { 
      // Check if we received a valid response 
      if(!response || response.status !== 200 || response.type !== 'basic') { 
       return response; 
      } 

      // IMPORTANT: Clone the response. A response is a stream 
      // and because we want the browser to consume the response 
      // as well as the cache consuming the response, we need 
      // to clone it so we have two streams. 
      var responseToCache = response.clone(); 

      caches.open(CACHE_NAME) 
       .then(function(cache) { 
       cache.put(event.request, responseToCache); 
       }); 

      return response; 
      } 
     ); 
     }) 
    ); 
}); 

和测试脚本，如果有帮助。

'use strict'; 
if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('/sw.js').then(function(registration) { 
    // Registration was successful 
    console.log('ServiceWorker registration successful with scope: ', registration.scope); 

    var serviceWorker; 
    if (registration.installing) { 
     serviceWorker = registration.installing; 
    } else if (registration.waiting) { 
     serviceWorker = registration.waiting; 
    } else if (registration.active) { 
     serviceWorker = registration.active; 
    } 

    if (serviceWorker) { 
     console.log('ServiceWorker phase:', serviceWorker.state); 

     serviceWorker.addEventListener('statechange', function (e) { 
     console.log('ServiceWorker phase:', e.target.state); 
     }); 
    } 
    }).catch(function(err) { 
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err); 
    }); 
} 

编辑：检查控制台我发现这个错误。 sw.js:1 An unknown error occurred when fetching the script.

Aslo，根据建议，我已经添加了此代码，但问题仍然存在。

this.addEventListener('activate', function(event) { 
    var cacheWhitelist = ['v2']; 

    event.waitUntil(
    caches.keys().then(function(keyList) { 
     return Promise.all(keyList.map(function(key) { 
     if (cacheWhitelist.indexOf(key) === -1) { 
      return caches.delete(key); 
     } 
     })); 
    }) 
); 
}); 

Answer 1

这个问题似乎已经解决了。对于谷歌的任何人，请尝试重新启动浏览器。

Answer 2

看来你还没有添加任何激活事件，这意味着在可用时渲染缓存的元素。希望代码能够帮助你。

self.addEventListener('activate', function(e) { 
    /*service worker activated */ 
    e.waitUntil(
     caches.key().then(function(keyList) { 
     return Promise.all(keyList.map(function(key) { 
     if(key){ 
      //remove old cache stuffs 
      return caches.delete(key); 
     } 
     })); 
     }) 
    ); 
});