サービスワーカーのフェッチイベントは発生しません

Question

質問タイトルはすべてです。

if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('/react-redux/sw.js').then(() => { 
     console.log('registered'); 
    }, err => console.log(err)); 
} 

---

EDIT

私は

navigator.serviceWorker.register('swRoot.js').then(() => { 

を持つように私は、SWのコードを移動した場合、問題の根はパス

navigator.serviceWorker.register('/react-redux/sw.js') 

であるように見えます

すべて正常に動作します。私は'./'の{scope:、'/'、'/react-redux'を追加するには、/反応-Reduxの中で先頭のスラッシュを落とすから、ちょうど私が上記の考えることができるすべてについて試みたが、どれも（いくつかの原因となるエラーで）働きました。

は、誰もがコンフィグ魔法はドメインのルート以外の場所からサービスワーカーを読み込むことができるように必要なものを知っていますか？

---

、その後、私の全体のsw.js

self.addEventListener('install', function(event) { 
    console.log('hello'); 
    try { 
     console.log('typeof System in install', typeof System); 
    } catch(e){} 

    console.log('caching'); 
    event.waitUntil(
     caches.open('v1').then(function(cache) { 
      console.log('caching - getting'); 
      return cache.addAll([ 
       '/react-redux/a.js' 
      ]); 
     }).catch(function(error){ console.log('error', error) }) 
    ); 
}); 

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

私は決してconsole.log('fetching ->', event.request);メッセージが表示されます。私はこの愚かさを加えて問題を強制しようとしました。

setTimeout(() => fetch('/react-redux/foo.css').then(r => console.log(r)), 1000); 
setInterval(() => fetch('/react-redux/foo.css').then(r => console.log(r)), 5000); 

フェッチイベントが実行されていますが、サービスワーカーはこれらのイベントハンドラには当てはまりません。

さらに、SWが登録されていることが通知され、sw.jsを閉じて再オープンすると、すべてが正しくインストールされていることを示すすべてのロギングステートメントが表示されます。

Answer 1

は傍受作業が登録 サービスワーカーはHTMLでツリーのレベル以上であることを必要としているようだ

self.addEventListener('install', function(event) { 
    console.log("install"); 
    try { 
    console.log('typeof System in install', typeof System); 
    } catch (e) {} 

    console.log('caching'); 
    event.waitUntil(
    caches.open('v1').then(function(cache) { 
     console.log('caching - getting'); 
     return cache.addAll([ 
     'a.js' 
     ]); 
    }).catch(function(error) { 
     console.log('error', error) 
    }) 
); 

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

plnkr https://plnkr.co/edit/WuJCZSD0V4idG1Ra7VMb?p=preview

Answer 2

をフェッチはじめinstallイベントハンドラ内fetchイベントリスナーをアタッチファイル を登録してください。以下は失敗する。

Chromeでは、「アプリケーション」の下の「サービスワーカー」を確認してください。 を有効にして実行しているサービスワーカーに以下の結果を登録しても、その場所がHTMLページ以上になると にも「クライアント」の下にエントリが表示されます。これが存在すると、フェッチがインターセプトされるときと正確に一致するようになると思われます（ ）。

Answer 3

あなたは正しい軌道に乗っていますが、それはスコープの問題のようです。登録時にサービスワーカーのスコープを変更する

、それはこのように、実行する必要があります。

navigator.serviceWorker.register('scripts/sw.js', { scope: '/' }) 

次にサーバがこのスコープの変更を確認するに応じて、次のヘッダーを返す必要があります。

Service-Worker-Allowed:/

See this answer