我的瀏覽器註冊服務工作者並緩存url，但它不能脫機工作？

這個註冊和工作完美罰款在線。但是，當關閉服務器並刷新頁面時，註冊的服務工程師不再顯示在控制檯中，也不會在緩存存儲中顯示緩存。我的瀏覽器註冊服務工作者並緩存url，但它不能脫機工作？

if ("serviceWorker" in navigator){ 
navigator.serviceWorker.register("/sw.js").then(function(registration){ 
    console.log("service worker reg", registration.scope) 
}).catch(function(error){ 
     console.log("Error:", error); 
    }) 
}

在sw.js

var CACHE_NAME = 'cache-v1'; 
var urlsToCache = [ 
    '/index.html' 
]; 


self.addEventListener('install', function(event) { 
    event.waitUntil(
    caches.open(CACHE_NAME).then(function(cache) { 
     return cache.addAll(urlsToCache); 
    }) 
); 
//event.waitUntil(self.skipWaiting()); 
});

來源

2016-08-08 Deke

您正確地添加了文件高速緩存，但是你錯過了要求退貨的緩存文件。

你sw.js也應該有下面的代碼：

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

     return fetch(event.request); 
     } 
    ) 
); 
});

這是一個從Introduction to service workers。你應該寧願緩存/而不是/index.html，因爲通常情況下，你不會直接點擊index.html文件。

由於您沒有任何activate代碼，因此您的服務人員在脫機時不顯示任何console.log。 This article - offline cookbook對了解細節非常有用。

來源

2016-08-08 07:50:06

你說得對。我注意到我錯過了提取代碼。儘管我的Chrome瀏覽器是最新版本，但此緩存在canary上離線運行，而不是在chrome上運行。 – Deke

這很奇怪。 Chrome在46版中提供了緩存API - https://developers.google.com/web/updates/2015/09/updates-to-cache-api。你有哪個版本？ CacheStorage對象是否存在於test.log中的console.log中 - https://jakearchibald.github.io/isserviceworkerready/demos/globalapis/？ –

chrome 51.我使用節點作爲服務器，並且它不適用於Chrome瀏覽器。 – Deke

我的瀏覽器註冊服務工作者並緩存url，但它不能脫機工作？

回答

相關問題