web-dev-qa-db-ja.com

PWAのService Workerキャッシュを更新する方法は？

sw-toolbox ライブラリでService Workerを使用しています。私のPWAは、APIクエリ（イメージ、css、js、html）を除くすべてをキャッシュします。しかし、いくつかのファイルがいつか変更されるとしたらどうでしょう。または、service-worker.jsが変更されるとどうなるでしょうか。アプリケーションはファイルの変更についてどのように知る必要がありますか？

私のservice-worker.js：

'use strict';
importScripts('./build/sw-toolbox.js');

self.toolbox.options.cache = {
  name: 'ionic-cache'
};

// pre-cache our key assets
self.toolbox.precache(
  [
    './build/main.js',
    './build/main.css',
    './build/polyfills.js',
    'index.html',
    'manifest.json'
  ]
);

// dynamically cache any other local assets
self.toolbox.router.any('/*', self.toolbox.cacheFirst);

// for any other requests go to the network, cache,
// and then only use that cached resource if your user goes offline
self.toolbox.router.default = self.toolbox.networkFirst;

PWAのキャッシュを更新する通常の方法はわかりません。おそらくPWAはAJAXリクエストをバックグラウンドで送信し、UIバージョンを確認する必要がありますか？

javascriptservice-workerionic3sw-toolbox
14
Ildar

ニースのソリューションが書かれています ここ ここで、彼は（一言で）キャッシュファースト戦略を使用しないか、「最新の更新のために再読み込み」を表示するUXパターンを更新しないように述べています。

4
oninross

わが社のsw_toolboxには、ネットワーク更新を伴うキャッシュ戦略がありません。これは私が本当に望んでいることです。キャッシュネットワークレース戦略を変更したい-> https://jakearchibald.com/2014/offline-cookbook/#cache-network-race 敗者をフェードアウトさせるだけでなく、ネットワークが応答すると、クライアントを更新します。これは私がここで説明する時間があるより少し進んだものです。更新があることを知らせるメッセージをクライアントに投稿します。ユーザーに更新を警告するか、強制的に更新することができます。私はこれをエッジのケースとは考えていませんが、非常に一般的ですが高度なシナリオです。より詳細なソリューションをすぐに公開したいと思います。

4
Chris Love

私はライブラリを使用せずにサービスワーカーを扱いましたが、私が思いついたソリューションには、サーバー側のコードとクライアント側のコードが少し含まれていました。一言で言えば戦略

最初に必要な変数と場所：

  1. サーバー側に「Service Worker Version」変数があります（phpのようなものを使用している場合は、再デプロイせずにサーバー側ですぐに更新されるので、これをデータベースまたは設定ファイルに入れます。呼び出してみましょうserverSWVersion
  2. キャッシュするJavaScriptファイルの1つ（私はこれ専用のJavaScriptファイルを持っています）には、「サービスワーカーのバージョン」になるグローバル変数があります。それを呼び出しましょうclientSWVersion

2つの使い方：

  1. 人がページにアクセスするたびに、サーバーにajax呼び出しを行ってserverSWVersion値を取得します。これをclientSWVersion値と比較します。

  2. 値が異なる場合は、Webアプリのバージョンが最新ではないことを意味します。

  3. この場合、Service Workerの登録を解除してページを更新すると、Service Workerが再登録され、新しいファイルがキャッシュされます。

新しいファイルが利用可能になったときに実際に行うこと

  1. serviceSWVersionおよびclientSWVersion変数を更新し、該当する場合はサーバーにアップロードします。

  2. 人が再び訪問するとき、Service Workerは再登録され、すべてのキャッシュされたファイルが取得されます。

この戦略を実装しているときに使用したphpサーバー側ベースのコードを提供しました。原則がわかるはずです。 phpサーバーのhtdocsに "Exercise"フォルダーをドロップするだけで、他に何もしなくても機能するはずです。 phpの代わりに他のサーバーを使用している場合は、サーバー側のサービスワーカー変数を格納するために、構成ファイルの代わりにデータベースを使用できることを覚えておいてください。

コード付きのZipファイル： ServiceWorkerExercise.Zip

3
Zuks

Service Workerが変更されると、ブラウザーによってインストールされますが、ブラウザーのタブまたはPWAアプリウィンドウを閉じて再度開くまで、新しいバージョンはアクティブ化されません。そのため、キャッシュ名を変更すると、ブラウザが再び開くまで新しいキャッシュはファイルを提供せず、その時まで古いキャッシュは削除されません。 Registration.onupdatefoundを使用してページのJavaScriptでService Workerの変更を検出し、ユーザーにウィンドウを閉じて再度開くように依頼することができます-次のようなもの：

// register the service worker
        navigator.serviceWorker.register('sw.js').then(function(registration) 
        {
                registration.onupdatefound = function()
                {
                        console.log("ServiceWorker update found.");
                        alert("A new version is available - please close this browser tab or app window and re-open to update ... ");
                }
        }, function(err)
        {
                console.log('ServiceWorker registration failed: ', err);
        });
0
Craig

self.toolbox.router.any（ '/ '、self.toolbox.cacheFirst）;をself.toolbox.router.any（ '/'、self.toolbox.fastest）;に変更します。

0
user2243952