web-dev-qa-db-ja.com

PWAはいつ、どのように自身を更新しますか?

私の知る限り、PWAのWebサイトで「ホーム画面に追加」をクリックすると、ブラウザーは提供されたマニフェストファイルとソースを使用して.apkを生成し、通常のアプリのようにインストールします。

ウェブサイトを更新すると、アプリも更新されたコンテンツを表示し、アプリがウェブサイトにアクセスするための単なるラッパーであることを示唆していることに気付きました。また、Webサイトへの更新がすぐに表示されないことに気付きました。これは内部キャッシュによるものと思われます。

私の質問は、私の仮定は正しいですか?または、より一般的には、PWAがいつどのように更新され、クライアントマシンで更新を強制する方法はありますか?

22
Tobias Würth

キャッシュなしシナリオ(サービスワーカーなし):PWAアプリは、サービスワーカーを使用する場合にのみキャッシュされます。 Manifest.jsonは、Webアプリをアイコンでホーム画面に追加し、アドレスバーなしで開くのに役立ちます。サービスワーカーがいない場合、またはブラウザがサポートしていない場合、Webページは毎回新しく読み込まれます。キャッシュなし。

キャッシュオンのシナリオ(Service Workerを使用):Service Workerが構成されていると仮定すると、Service Workerは、キャッシング(html、CSS、画像からJSON/XML API応答へのキャッシングを含めたり除外したりできます)。

初期キャッシュの後、サービスワーカーはキャッシュを使用して、以下から実装した キャッシュアプ​​ローチ に基づいてアプリのネットワークリクエストを処理します。

  • ネットワークにフォールバックするキャッシュ
  • ネットワークがキャッシュにフォールバック
  • キャッシュしてからネットワーク

見つかった変更が次のセッションで読み込まれるか、ユーザーに更新を促す場合、ほとんどのアプリは precache を選択します。このソリューションでは、各ファイルには、Service Workerによってキャッシュされた各ファイルの長いハッシュ文字列が含まれます。各アプリケーションのロード時に、サーバーからハッシュコードがフェッチされ、更新が必要なファイルと一致するものが検索され、同じファイルが別のサービスワーカースレッドで更新されます。これは、[ネットワーク]タブ-> chrome開発者ツールのService Workerの応答で確認できます。

ネットワーク拳アプローチを選択した場合、初期ロード時に古いコンテンツを表示することは避けられますが、キャッシングに伴うパフォーマンス上の大きなメリットは失われます。

21
Anand