私のブラウザはサービスワーカーを登録し、URLをキャッシュしますが、オフラインでは機能しません。

Question

これはオンラインで完璧にうまく登録して動作します。しかし、サーバーの電源を切っても、ページがリフレッシュされると、登録されたサービス担当者はコンソールには表示されなくなり、キャッシュストレージにキャッシュは表示されなくなります。あなたが適切にキャッシュにファイルを追加しているが、あなたはリクエストに応じて、あなたのキャッシュされたファイルを返す不足している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()); 
}); 

Answer 1

で

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も、コードを次のようしておく必要があります

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からです。

Moroverでは、普通は/index.htmlの代わりに/をキャッシュして、index.htmlファイルを直接キャッシュしないでください。

activateコードがないため、サービスワーカーはオフラインのときにconsole.logを表示しません。 This article - offline cookbookは詳細を理解するのに非常に便利です。