サービスワーカーを登録するには `self.Clients.claim（）`

Question

の使用は何ですが、私はたびにそれがworker.jsの更新バージョンをチェックするページのロードを

navigator.serviceWorker.register('/worker.js') 

を呼び出すことができます。更新が見つかった場合、新しいワーカーは、すべてのページのタブが閉じられてから再度開くまで使用されません。私は読んで解決策だった：

self.addEventListener('install', function(event) { 
    event.waitUntil(self.skipWaiting()); 
}); 
self.addEventListener('activate', function(event) { 
    event.waitUntil(self.clients.claim()); 
}); 

私はskipWaiting部分を理解することができますが、clients.claim()は正確に何をするのでしょうか？私はいくつかの簡単なテストを行っており、それがなくても期待どおりに動作するようです。私はguide to the service worker lifecycleから以下を抜粋しています

Answer 1

：

clients.claim

あなたは、それが有効だ後、あなたのサービスワーカー内 clients.claim()を呼び出すことによって制御されていないクライアントの制御を取ることができます。

Here's を で呼び出す上記のデモのバリエーションは、そのactivateイベントです。あなたは初めて猫を見るべきです。私は と言っていますが、これはタイミングに敏感なので「should」です。 サービスワーカーがアクティブになり、clients.claim()が有効になると、 イメージがロードされようとすると、猫のみが表示されます。あなたは、彼らがネットワーク経由で 負荷をいただきたいとは異なるページをロードするために、あなたのサービスの労働者を使用する場合は、あなたの サービスワーカーが せずにそれをロードし、いくつかのクライアントを制御して終わるよう

は、clients.claim()は、面倒なことができます。

ノート：私はclients.claim（）を定型文として含めて多くの人が見ていますが、私はめったにそれをしません。最初の ロードでのみ重要です。プログレッシブエンハンスのため、このページは通常、とにかく幸いにサービスワーカーなしで で動作します。

Answer 2

サービスワーカーは、登録後にnext page-reloadからコントロールを受け取ります。 self.skipWaiting()とself.clients.claim()を使用すると、first load自体のサービスワーカーを制御するようクライアントに依頼することができます。

例えば

のは、私はファイルhello.txtをキャッシュ、と私はhello.txtために電話をかける場合は、再び、それは私が私のキャッシュ内のリソースを持っているにもかかわらず、メイクサーバ呼び出しを持つことになりますとしましょう。これは、self.clients.claim()を使用しない場合のシナリオです。しかし、次のページでサーバ番号hello.txtをリロードすると、キャッシュからリソースが提供されます。

この問題に取り組むには、self.skipWaiting()とself.clients.claim()の組み合わせを使用する必要があります。サービスワーカーは、アクティブになるとすぐにコンテンツの配信を開始します。

P.S：

next page-reloadは、ページの再訪を意味しています。

first loadは、ページが初めて訪問されたときを示します。