web-dev-qa-db-ja.com

サービスワーカーが常にアクティブ化を待機しているのはなぜですか？

この非常に基本的な質問があります

私はService Workerのライフサイクルを理解するよう努めています。実際には、状態を初期化および変更するものを理解しています。

私は今2つの質問を得ました：

1-chrome://inspect/#service-workers常に2行または3行あり、すべて同じPIDで実行されているService Workerを示しています。どうして？なぜ1つだけではないのですか？

2-更新時にサービスワーカーを検査すると、次のようになりました。

  • ＃566がアクティブで実行中 [停止]
  • ＃570アクティブ化待ち [skipWaiting]

どういう意味ですか？ 566と570は何ですか？彼らはswのインスタンスだと思いますが、なぜ2つあるのでしょうか。そして、なぜ570はまだ待っているのですか？それが登録、インストール、アクティブ化されることを確認するにはどうすればよいですか？

3-一般的な質問

  • 通常のライフサイクルでinstallイベントを終了させるものは何ですか？
  • 通常のライフサイクルでactivateイベントを発生させるものは何ですか？

index.html

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register('./sw.js')
      .then(function(registration) {
        // successful
        console.log('Success: ', registration);
      }).catch(function(err) {
        // registration failed
        console.log('Error: ', err);
      });
    });
  }
  </script>

sw.js

var cache_name = 'v1';

var cache_files = [
  './',
  './index.html',
  './style.css'
]

self.addEventListener('install', function(e){
  console.log('SW install:', e);
  e.waitUntil(
    caches.open(cache_name)
    .then(function(cache){
      console.log('cache', cache);
      return cache.addAll(cache_files);
    })
    .then(function(cache){
      console.log('Cache completed');
    })
  )
});

self.addEventListener('activate', function(event) {
  console.log('SW activate:', event);
});

self.addEventListener('fetch', function(e){
  console.log('SW fetch:', e.request.url)

  e.respondWith(
    caches.match(e.request)
    .then(function(cache_response){
      if(cache_response) return cache_response;

      return fetch(e.request);
    })
    .catch(function(err){
      console.log('Cache error', err)
    })
  );
});

ありがとう！

javascriptservice-workerservice-worker-events
11
Victor Ferreira

Chrome Devtoolsで示されているIDは内部用です。指摘しておくだけです。つまり、すべてのService WorkerにIDで名前を付けています。それだけです。

「同時」に2つのSWが存在する理由は、1つがあり、次にページをリロードし、離れてナビゲートして戻ってきた、またはそれらの行に沿って何かを取得して、別のSWを取得したためです。ただし、この時点では、「もう1つ取得した」ときは、まだアクティブ化されておらず、以前のSWがページを制御しています。別の場所からサイトに戻ると、新しいSWが以前のSWを制御します。ページを更新するだけでは不十分です。基本的に、これはページのすべてのタブとウィンドウを閉じてから再度ロードすることを意味し、新しいSWが引き継ぎます。

新しいSWが引き継がない時間は、インストールとアクティベーションの間に発生する待機状態と呼ばれます。 SWのインストールハンドラー内からself.skipWaiting（）を呼び出すことでスキップできます。

このフローの背後にある基本的な考え方は、ページが読み込まれたときにページを制御しなかったSWによってページが制御されるべきではないということです–このため、SWを登録するサイトへの最初のアクセスはそのSWによって制御されません、SWが2回目にアクティブ化されるときのみなど。

[〜＃〜]本当に[〜＃〜]この素晴らしい記事を読む必要があります：- サービスワーカーのライフサイクル

18
pate