2017-06-05 7 views
3

ServiceWorkerの開始ドキュメントdoc https://developers.google.com/web/fundamentals/getting-started/primers/service-workersを読んでいます。ServiceWorkerの登録について

まず、ServiceWorkerをスコープに登録します。だから私は、私はindex.htmlファイルを最初にアクセスしたとき

<!DOCTYPE html> 
<html> 
<head> 
    <title>Getting started with Service Worker</title> 
</head> 
<body> 

<script type="text/javascript"> 

if ('serviceWorker' in navigator) { 
    window.addEventListener('load', function() { 
    navigator.serviceWorker.register('/sw.js').then(function(registration) { 
     // Registration was successful 
     console.log('ServiceWorker registration successful with scope: ', registration.scope); 
    }, function(err) { 
     // registration failed :(
     console.log('ServiceWorker registration failed: ', err); 
    }); 
    }); 
}  

</script> 

</body> 
</html> 

以下のようにしてsw.jsファイルを作成し、内部にconsole.logを書いたが、そう

console.log("This is sw.js") 

をsw.jsことをやりましたそのconsole.logが実行され、ServiceWorker登録成功メッセージが出力されます。しかし、ページを2度目に更新すると、ServiceWorkerの登録に成功したというメッセージしか表示されません。では、なぜsw.js内のconsole.logを2度目に実行しなかったのですか?私はそのconsole.logを2回目に実行することを期待していました。私はここでポイントを逃していますか?

+0

だけFWIWを、時には人々は(https://www.w3.org/ [サービス労働者]を取得TR/service-workers-1 /)と汎用[ウェブワーカー](https://www.w3.org/TR/workers/)が混乱しています。あなたは、あなたがやっていることのためにサービスワーカーを欲しいですか?サービスワーカーは、ページリソース(オフラインアプリなど)を管理するために使用される特別な種類のウェブワーカーです。 –

答えて

2

サービスワーカーは基本的に一度(バックグラウンドで)登録されたときに実行されるスクリプトです。あなたには、いくつかの再発のコードを実行する必要がある場合は、service worker APIを使用する必要があります。

サービスワーカーが起源とパスに対して登録されたイベント駆動型の労働者です。

あなたがnavigator.serviceWorker.register('/sw.js')を呼び出した後、インストールイベントが非同期と呼ばれています。そのため、callback関数(内容がconsole.log('ServiceWorker registration successful ...');のもの)を渡したPromiseを返します。

+0

そのインストールイベントが実際に発生したとき、私はページや他のリソースを捕まえていることを理解していますが、いつこのイベントが実際に発生したのですか? –

+0

サービスワーカーが正式に登録されると、インストールイベントは1回だけ発生します。 @ウィキット –

+0

MDNリンクが私の質問に答えるhttps://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API –

1

サービスワーカーは、Webサイトとネットワークの間に座るように設計されています。したがって、最初にページをロードしている間は、スクリプトを一度実行し、インストールを待機するイベントを追加した場合はサービスワーカーをインストールします。

これが完了したら、ページ内のすべてのリクエストを取得するために、「フェッチ」イベントにリスナーを追加する必要があります。 だから、基本的には要求が行われるたびにCONSOLE.LOGしたい場合は、次の操作を行うことができます。

self.addEventListener('fetch', event => { 
    console.log(event); 
}) 
関連する問題