サービスワーカーの更新が遅れる

Question

キャッシュされたファイルをすべてチェックし、ユーザーが正しいバージョンのアプリケーションを使用していることを確認するために働いているサービスワーカーに依存しているWebアプリケーションがあります。

私たちのクライアントは現在、特定の時点（アプリケーションを再オープンするときなど）で更新を確認したいと考えています。現在、アプリを開くと、デバイスが古いバージョンでその機能を実現するまでに最大5分かかる場合があります。

私はアプリが私のためにチェックするのを待つのではなく、新しい変更があるのをサービスワーカーに確認させることができますか？

ありがとうございます！

Answer 1

あなたのSWの瞬時の更新のために改良すべき2つのポイントがあります。

はまもなく

1. は、アプリのインデックスページより頻繁に訪問したページからごsw.jsもを呼び出します。
2. skipWaiting()メソッドを使用して、すぐにSWをアクティブにします。あなたはSWの新しいverisonのみnavigator.serviceWorker.register()呼び出しによってチェックされることに注意してください

詳細に

1）navigator.serviceWorker.registerメソッド呼び出し

。

通常、register()のメソッドは、あなたのページのいずれかでのみ呼び出されます。そのような場合は、そのコマンドをすべてのページに追加する必要があります。ユーザーがPWAを閉じずに別のアプリを開いてから2時間後にアプリに戻ると、register()と思われるアプリのインデックスページは表示されなくなります。

私の提案は、すべてではないにしても、多くのページに貼り付けることです。欠点はクライアントがsw.jsにもっと多くの呼び出しをすることです。クライアントは時間を失うことなくSWの最終バージョンを取得します。

2）SWはもはやアクティブclientsを持っていると、サービス労働者activateイベントが呼び出されません

サービスワーカーをアクティブに。したがって、新しいバージョンは、アプリケーションのすべてのインスタンスの後でのみ有効になりますが、1つは閉じられ、残りのタブはリフレッシュされるか、1つのタブが再度開きます。その問題については、quote from MDNを参照してください。

..新しいバージョンがバックグラウンドでインストールされていますが、まだアクティブ化されていません。 これは、古いサービスワーカーをまだ使用しているページがロードされなくなったときにのみアクティブになります。 そのようなページがまだロードされていない場合は、新しいサービスワーカーがアクティブになります。これと

、溶液MDNから採取されたもののClients.claim()

使用例と併せてskipWaiting()方法を使用することになります。 Click to see more about it on that page:

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