サービスワーカーを使用して、最初からフェッチイベントを処理する方法は？

私は、私のウェブサイトから送信されたすべてのAJAX要求を処理するための基本的なサービスワーカーを構築しようとしています。サービスワーカーを使用して、最初からフェッチイベントを処理する方法は？

サービスワーカーがfetchイベントを購読しています。送信された要求はすべて処理できますが、サービスワーカーが初めてインストールされたときは機能しません。

サービスワーカーがインストールされると、Webページを更新すると、フェッチイベントハンドラが機能します。

サービスワーカーがすべての要求を最初から取得したいと思っています。出来ますか？

ここで私が持っているコードです：

index.htmlを

<!DOCTYPE html> 
<html> 
<body> 
<h2>Service Worker Demo Page</h2> 
<script type="text/javascript"> 

    if (navigator.serviceWorker) { 

    navigator.serviceWorker.register('./sw.js') 
     .then(function (registration) { 
     console.debug('Registration within scope %s. More details %O', registration.scope, registration); 
     return fetch('https://www.google.com'); 
     }) 
     .then(console.info) 
     .catch(console.warn); 

    } 

</script> 

</body>

sw.js

self.addEventListener('fetch', function (e) { 
    console.info('%s request to %s. More details: %o' 
    , e.request.method 
    , e.request.url 
    , e 
); 
});

出典

2016-12-19 noodle71

のデフォルトの動作は、Webページを前にリフレッシュしなければならないということですが、サービスワーカーがアクティブになります。だから、あなた（そのユーザー）にとっての「非常に始まった」ことは、サービスワーカーの「始まりの始まり」と同じではありません。

ただし、clients.claim()を使用してこの既定の動作を上書きできます。それon MDNについての記事を読む：

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

注意ご使用のケースのためにあなたがSWは、任意のイベントを取得発射前に登録し、活性化されていることを確認する必要があること。

______

"Service Worker Lifecycle"のブログ記事で、サービス労働者のライフサイクルについては、こちらをご覧ください。ここではいくつかの関連する箇条書きが

...あるサービスワーカーは、それが正常にインストールが完了し、「アクティブ」になるまでフェッチとプッシュのようなイベントを受信しません。

デフォルトでは、ページ要求自体がサービスワーカーを経由しない限り、ページのフェッチはサービスワーカーを経由しません。サービスワーカーの影響を確認するには、ページを更新する必要があります。 clients.claim（）はこのデフォルトをオーバーライドし、制御されていないページを制御できます。

出典

2016-12-19 14:37:28 sdgluck

はい、可能です。

サービスワーカーは、最初の要求をキャッチするために、アクティブにされた直後にこれらの要求を呼び出す初期ページを制御する必要があります。残念ながら、これはデフォルトでは有効になっていません。この予想される動作を達成するためには、依然としてclients.claimに電話する必要があります。

self.onactivate = function(event){ 
    event.waitUntil(self.clients.claim()); 
};

出典

2016-12-19 14:47:48 Lewis

最後に、これがコードです。

私はそれが最良の解決策だとは思わないが、うまくいきます。サービス担当者は、Webページを更新しても、最初からすべての要求を処理します。

HTML：

<!--index.html--> 
<!DOCTYPE html> 
<html> 
<body> 
<h2>Service Worker Demo Page</h2> 
<script type="text/javascript"> 

    function init() { 
    fetch('https://www.google.com'); 
    } 

    function subscribeToSWMessages() { 
    navigator.serviceWorker.onmessage = function (event) { 
     console.info("Broadcasted message received: %s", event.data.message); 

     if (event.data.command == "swActive") { 
     init(); 
     } 
    }; 
    } 

    if (navigator.serviceWorker) { 

    subscribeToSWMessages(); 

    navigator.serviceWorker.register('./sw.js') 
     .then(function (registration) { 
     console.debug('Registration within scope %s. More details %O', registration.scope, registration); 
     navigator.serviceWorker.controller.postMessage({ 
      "command": "swRegistrationOk", 
      "message": "Service Worker registration ok" 
     }); 
     }) 
     .catch(console.warn); 
    } 

</script> 

</body> 
</html>

サービスワーカー：

// index.js 
self.addEventListener('activate', function (event) { 
    event.waitUntil(self.clients.claim().then(sendActiveSignalToClients)); 
}); 

self.addEventListener('fetch', function (e) { 
    console.info('%s request to %s. More details: %o' 
    , e.request.method 
    , e.request.url 
    , e 
); 
}); 

self.addEventListener('message', function (event) { 
    console.info("Broadcasted message received: %s", event.data.message); 

    if (event.data.command == "swRegistrationOk") { 
    event.waitUntil(sendActiveSignalToClients()); 
    } 
}); 

function sendActiveSignalToClients() { 

    self.clients.matchAll().then(function (clients) { 
    clients.forEach(function (client) { 
     client.postMessage({ 
     "command": "swActive", 
     "message": "Service Worker is active" 
     }); 
    }) 
    }) 

}

出典

2016-12-19 17:05:06 noodle71

サービスワーカーを使用して、最初からフェッチイベントを処理する方法は？

答えて

関連する問題