フェッチがサービスワーカーで働いていません

Question

サービスワーカー でフェッチイベントを使用しようとしましたが、彼は私の仕事をしませんでした。

self.addEventListener('activate', function(event) { 
    console.log('Activated', event); 
    fetch('/embed_testing/notification/main.js').then(response => 
      function() { 
       console.log(response) 
      }); 
}); 

self.addEventListener('fetch', function(event) { 
    console.log("heyyyo"); 
    if (event.request.url === new URL('/', location).href) { 
    event.respondWith(
     new Response("<h1>Hello!</h1>", { 
     headers: {'Content-Type': 'text/html'} 
     }) 
    ) 
    } 
}); 

なぜ機能しないのですか？

Answer 1

fetch()サービスワーカー内部からの要求は、同じサービスワーカーのfetchイベントハンドラをトリガーしません。 （そうだった場合、再帰的なループに入ったシナリオを簡単に想像することができます）

fetchイベントハンドラが動作していることを迅速にテストする必要がある場合は、この場合DevToolsでJavaScriptコンソールを開き、手動でfetch('/path/to/whatever')を実行するのが最も簡単な方法です。 JavaScriptコンソールの内部から作成されたfetch()は、サービスワーカーのfetchイベントハンドラを起動します。

単なるテストではなく、ハンドラの外側で実行されるコードを持つfetchイベントハンドラ内で実装されているロジックを共有することに興味がある場合は、コードをリファクタリングしてスタンドアロンの関数を呼び出すと、その関数をfetchイベントハンドラ内とそのサービスワーカー内のそれ以外の場所から呼び出すことができます。

Answer 2

あなたはクロームでアプリケーションをテストしている場合は、「アプリケーション」タブのdevのツールにフラグ「ネットワークのためのバイパス」をオフにしようとは（左側の「サービス労働者」を選択します）