更新時に更新されたサービスワーカーを有効にします。

Question

サービスワーカーが更新すると、ページの制御権が正しく取得されません。アクティブになるのを待って「待機中」の状態になります。

驚いたことに、更新されたサービスワーカーは、ページを更新した後でもタブを制御しません。 Googleは説明しています

https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle

あなただけのデモに開放タブを1つ持っていても、ページ をリフレッシュすると、新しいバージョンが引き継ぐせるのに十分ではありません。これは、ブラウザの操作がどのように行われるのかに起因します（ ）。ナビゲートすると、レスポンスヘッダーが受信されるまで現在のページは になりません。応答がContent-Disposition ヘッダーの場合、 の場合でも現在のページが残ります。このオーバーラップのため、現在のサービスワーカーは、リフレッシュ中に常にクライアントを制御する です。

更新を入手するには、 現在のサービスワーカーを使用して、すべてのタブを閉じてください。次に、デモに再度移動すると、 には馬[更新されたコンテンツ]が表示されます。

このパターンはChromeの更新方法と似ています。 Chrome のアップデートはバックグラウンドでダウンロードされますが、Chromeが再起動されるまでは適用されません。平均時間は で、 を中断することなく現在のバージョンを引き続き使用できます。しかし、これは開発中の痛みですが、DevTools には、この記事の後半で説明するように、簡単にする方法があります。

この動作は複数のタブの場合に有効です。私のアプリは、原子的に更新する必要があるバンドルです。古いバンドルの一部と新しいバンドルの一部を混在させることはできません。 （ネイティブアプリでは、アトミック性は自動で保証されます）

しかし、私がアプリの「最後に開いたタブ」と呼ぶ単一のタブの場合、この動作は私が望むものではありません。最後の開いているタブを更新してサービスワーカーを更新したい。

（それは誰もが実際にが最後に開いたタブが更新されたとき古いサービスワーカーが稼働し続けることを望んでいること。Googleの「ナビゲーションの重なり」引数は不幸なバグのための良い言い訳のように私に聞こえる想像するのは難しい。）

通常、アプリは1つのタブでのみ使用されます。本番環境では、ユーザーがページを更新するだけで最新のコードを使用できるようにしたいが、それはうまくいかない。古いサービスワーカーは、リフレッシュしても制御し続ける。

ユーザーに通知する必要はありません。「アップデートを受け取ったり、アプリを終了したり、ナビゲートしたりしてください。」私は彼らに「ただリフレッシュする」と言いたい。

ユーザーがページを更新するときに、更新されたサービスワーカーを有効にするにはどうすればよいですか？

EDIT：サービスワーカーのインストールイベントで、簡単で簡単で間違っていることを私が知っている回答が1つあります。skipWaitingskipWaitingは、古いページタブが開いている間に、アップデートがダウンロードされるとすぐに新しいサービスワーカーを有効にします。そのため、更新は不安定な非原子的になります。これは、アプリの実行中にネイティブアプリバンドルを置き換えるようなものです。それは私にとっては問題ではありません。ユーザーが最後に開いたタブのページを更新するまで待つ必要があります。

Answer 1

概念的には2種類のアップデートがありますが、私たちが話しているあなたの質問からは明らかではないので、両方をカバーします。

更新内容

例：

• ブログ記事のテキストが
• イベント
• ソーシャルメディアタイムラインのスケジュールは

これらはおそらく保存されますキャッシュAPIまたはIndexedDBに格納されます。これらの店舗はサービスワーカーとは独立しています。サービスワーカーを更新するとサービスワーカーを更新しないでください。更新すると、サービスワーカーに更新する必要はありません。

サービスワーカーを更新することは、記事を更新するなどの操作は必要ありません。

これらのキャッシュを更新する場合は、お客様の責任で行ってください。更新することなく更新されることはありません。私はoffline cookbookにパターンの数をカバーするが、this is my favourite one：

1. は、サービス労働者を使用して、キャッシュからページシェル、CSS & JSをサーブ。
2. ページにキャッシュのコンテンツを取り込みます。
3. ネットワークからコンテンツを取得しようとしています。
4. コンテンツがキャッシュに保存されているコンテンツよりも新しい場合は、キャッシュとページを更新します。

「ページを更新する」という点では、ユーザーに支障のない方法で行う必要があります。年代順のリストの場合は、新しいものを下/上に追加するだけで簡単です。記事を更新している場合は、ユーザーの目の下からテキストを切り替えたくないので、ややこしいです。そのような場合は、「利用可能なアップデート - show update」のような通知を表示するほうが簡単です。クリックすると、内容が更新されます。

Trained to thrill（おそらく初めてのサービスワーカーの例）は、データのタイムラインを更新する方法を示しています。

「アプリ」を更新

これは、あなたがサービス労働者を更新したいんケースです。ユーザーが非アトミックにこの更新プログラムを取得したい場合は

• は
• はJSの更新および/またはCSS

ページの殻を更新するが、このパターンは、あなたがいるときに使用されていますかなり安全な方法、それのためのパターンもあります。

1. ユーザへ
2. 表示する通知を「待機中」に更新サービスワーカーを検出 - ユーザーがskipWaitingを呼び出すためにそれを求めて、この通知は、サービス従事者へのpostMessageをクリックすると、「アップデート公開今アップデートを」
3. を。
4. このパターンを実装する
5. window.loaction.reload()

"アクティブ" になって新しいサービス労働者は私のservice worker Udacity courseの一部、およびhere's the diff of the code before/afterで検出します。

あなたもこのことができます。たとえば、何らかのセームエスクシステムを採用することができます。そのため、ユーザーが現在持っているサービスワーカーのバージョンを知ることができます。更新がマイナーな場合は、skipWaiting()を呼び出すことは完全に安全であると判断することがあります。