ServiceWorkerは、チュートリアルの次私が初めてサービスワーカーをインストールしていますリクエスト

Question

をフェッチ受け、そしてません：https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

マイサービスワーカーがインストールおよび更新すると、期待どおりに動作しますが、期待通りにフェッチ要求がトリガされていません。

var CACHE_NAME = 'test-cache-v1' 
var urlsToCache = [ 
    '/', 
    '/public/scripts/app.js' 
] 

self.addEventListener('install', function (event) { 
    console.log('Installing new service worker', event) 
    // Perform install steps 
    event.waitUntil(
    caches.open(CACHE_NAME) 
     .then(function (cache) { 
     return cache.addAll(urlsToCache) 
     }) 
     .catch(err => console.log('Error Caching', err)) 
) 
}) 

self.addEventListener('fetch', function (event) { 
    console.log('Fetch req', event) 
    event.respondWith(
    caches.match(event.request) 
     .then(function (response) { 
     console.log('Cache hit', response) 
     // Cache hit - return response 
     if (response) { 
      return response 
     } 
     return fetch(event.request) 
     .catch(e => console.log('Error matching cache', e)) 
     } 
    ) 
) 
}) 

「新しいサービスワーカーのインストール」は期待通りにコンソールに出力されていますが、「Fetch req」では表示されません。私はChrome Devtoolsを使用しており、[アプリケーション]タブのServiceWorkerの横にある[Inspect]オプションにアクセスしました。

Answer 1

動的Webサイトでは注意してください。

サービスワーカーがスコープを持っている場合：example.com/weather/ それはスコープがありません。特に、デフォルトでこの場合はスラッシュ

末尾削除firebaseにexample.com/weather

を、サービスワーカーはファイルをインストールし、アクティブ化し、キャッシュしますが、 'フェッチ'イベントは受信しません！デバッグが非常に難しい。

「trailingSlash」を「hosting」のfirebase.jsonに追加します。これで問題は解決します。

{ 
    "source": "/weather", "function": "weather" 
    } 

：

firebase

{ 
    "source": "/weather/", "function": "weather" 
    } 

としてだけでなく、manifest.jsonを

Answer 2

activateイベントをリッスンし、そのイベント内のclients.claim()へのコールを追加すると、新しくアクティブなサービスワーカーは、それを登録したページを含め、スコープ内の既存のWebページを制御します。サービスワーカーのライフサイクルについては、this articleに詳しい情報があります。次のコードは十分です：あなたはclients.claim()を呼び出さない場合は、サービスワーカーがアクティブが、現在開いているページのいずれかを制御しません

self.addEventListener('activate',() => self.clients.claim()); 

。サービスワーカーが管理するスコープの下にある次のページ（または現在のページをリロード）に移動し、そのfetchハンドラを介してネットワーク要求を傍受するまでは、このページは表示されません。