web-dev-qa-db-ja.com

`self.Clients.claim（）`の用途は何ですか

サービスワーカーを登録するには、電話することができます

_navigator.serviceWorker.register('/worker.js')
_

ページが読み込まれるたびに、更新されたバージョンの_worker.js_がチェックされます。更新が見つかった場合、ページのすべてのタブを閉じてから再度開くまで、新しいワーカーは使用されません。私が読んだ解決策は次のとおりです。

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

SkipWaitingの部分は理解できますが、clients.claim()は正確に何をしますか？私はいくつかの簡単なテストを行いましたが、それがなくても期待どおりに機能するようです。

javascriptfrontendofflineservice-workeroffline-caching
15
BonsaiOak

サービスワーカーのライフサイクルガイド から以下を抜粋しています。

clients.claim

サービスワーカーがアクティブ化されたら、サービスワーカー内でclients.claim()を呼び出すことにより、制御されていないクライアントを制御できます。

Here's 上記のデモのバリエーションで、アクティブ化イベントでclients.claim()を呼び出します。初めて猫に会うはずです。これはタイミングに敏感なので、私は「すべき」と言います。猫が表示されるのは、サービスワーカーがアクティブになり、画像の読み込みが試行される前にclients.claim()が有効になった場合のみです。

Service Workerを使用して、ネットワーク経由でロードするのとは異なる方法でページをロードする場合、clients.claim()は、Service Workerなしでロードされた一部のクライアントを制御することになるため、面倒な場合があります。

注：clients.claim（）を含む多くの人々を定型文として見ていますが、私自身がそうすることはめったにありません。それは最初のロードでのみ本当に重要であり、プログレッシブエンハンスメントにより、ページは通常、サービスワーカーがいなくても問題なく動作しています。

11
Jeff Posnick

Service Workerは、登録後に_next page-reload_から制御を取得します。 self.skipWaiting()およびself.clients.claim()を使用することにより、クライアントに_first load_自体のServiceWorkerを制御するように要求できます。

例えば

ファイルを_hello.txt_でキャッシュするとします。また、_hello.txt_を呼び出すと、キャッシュにリソースがある場合でもサーバーが呼び出されます。これは、self.clients.claim()を使用しない場合のシナリオです。ただし、次のページのリロードで_hello.txt_のサーバー呼び出しを行うと、キャッシュからリソースが提供されます。

この問題に取り組むには、self.skipWaiting()とself.clients.claim()の組み合わせを使用して、ServiceWorkerがコンテンツのアクティブ化と同時にコンテンツの提供を開始するようにする必要があります。

追伸：

_next page-reload_はページの再訪問を意味します。

_first load_は、ページに初めてアクセスした瞬間を示します。

5
Imamudin Naseem