サービスワーカー：フェッチイベントリスナーはページリロード後にのみ動作します

Question

下記のコードでサービスワーカーをページに追加しました。ページがリロードされ、ワー​​カーが既にインストールされているとうまく動作します。しかし、'SW INSTALL'ログを見た後、ページがリロードされる前にフェッチイベントをキャッチするようには見えません。

app.js

navigator.serviceWorker.register('/worker.js').then((registration) => 
{ 
    console.log('ServiceWorker registration successful with scope: ', 
registration.scope); 
}, (err) => 
{ 
    console.log('ServiceWorker registration failed: ', err); 
}); 

worker.js

self.addEventListener('install', function (event) 
{ 
    console.log("SW INSTALL"); 
}); 

self.addEventListener('fetch', function (event) 
{ 
    console.log("FETCHING", event); 
    event.respondWith(
      caches.match(event.request) 
        .then(function (response, err) 
          { 
           // Cache hit - return response 
           if (response) 
           { 
            console.log("FOUND", response, err); 
            return response; 
           } 
           console.log("MISSED", event.request.mode); 
           return fetch(event.request) 
          } 
        ) 
    ); 
}); 

Answer 1

対処：はworker.jsに次を追加します。

self.addEventListener('activate', function (event) 
{ 
    event.waitUntil(self.clients.claim()); 
});