サービスワーカーが更新すると、ページの制御権が正しく取得されません。アクティブになるのを待って「待機中」の状態になります。更新時に更新されたサービスワーカーを有効にします。
驚いたことに、更新されたサービスワーカーは、ページを更新した後でもタブを制御しません。 Googleは説明しています
https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle
あなただけのデモに開放タブを1つ持っていても、ページ をリフレッシュすると、新しいバージョンが引き継ぐせるのに十分ではありません。これは、ブラウザの操作がどのように行われるのかに起因します( )。ナビゲートすると、レスポンスヘッダーが受信されるまで現在のページは になりません。応答が
Content-Disposition
ヘッダーの場合、 の場合でも現在のページが残ります。このオーバーラップのため、現在のサービスワーカーは、リフレッシュ中に常にクライアントを制御する です。更新を入手するには、 現在のサービスワーカーを使用して、すべてのタブを閉じてください。次に、デモに再度移動すると、 には馬[更新されたコンテンツ]が表示されます。
このパターンはChromeの更新方法と似ています。 Chrome のアップデートはバックグラウンドでダウンロードされますが、Chromeが再起動されるまでは適用されません。平均時間は で、 を中断することなく現在のバージョンを引き続き使用できます。しかし、これは開発中の痛みですが、DevTools には、この記事の後半で説明するように、簡単にする方法があります。
この動作は複数のタブの場合に有効です。私のアプリは、原子的に更新する必要があるバンドルです。古いバンドルの一部と新しいバンドルの一部を混在させることはできません。 (ネイティブアプリでは、アトミック性は自動で保証されます)
しかし、私がアプリの「最後に開いたタブ」と呼ぶ単一のタブの場合、この動作は私が望むものではありません。最後の開いているタブを更新してサービスワーカーを更新したい。
(それは誰もが実際にが最後に開いたタブが更新されたとき古いサービスワーカーが稼働し続けることを望んでいること。Googleの「ナビゲーションの重なり」引数は不幸なバグのための良い言い訳のように私に聞こえる想像するのは難しい。)
通常、アプリは1つのタブでのみ使用されます。本番環境では、ユーザーがページを更新するだけで最新のコードを使用できるようにしたいが、それはうまくいかない。古いサービスワーカーは、リフレッシュしても制御し続ける。
ユーザーに通知する必要はありません。「アップデートを受け取ったり、アプリを終了したり、ナビゲートしたりしてください。」私は彼らに「ただリフレッシュする」と言いたい。
ユーザーがページを更新するときに、更新されたサービスワーカーを有効にするにはどうすればよいですか?
EDIT:サービスワーカーのインストールイベントで、簡単で簡単で間違っていることを私が知っている回答が1つあります。skipWaiting
skipWaiting
は、古いページタブが開いている間に、アップデートがダウンロードされるとすぐに新しいサービスワーカーを有効にします。そのため、更新は不安定な非原子的になります。これは、アプリの実行中にネイティブアプリバンドルを置き換えるようなものです。それは私にとっては問題ではありません。ユーザーが最後に開いたタブのページを更新するまで待つ必要があります。
サービスワーカーの 'install'イベントの' skipWaiting'という、わかりやすく、簡単で、安全ではないことがわかりました。私は、ユーザーの作業の途中で、アップデートが発見されるとただちにサービス担当者をランダムに置き換えることは望ましくありません。ユーザーがページを更新するまで待つ必要があります。 –