すべてのサイトページでsw-precacheを初期化する方法

Question

アプリを完全にオフラインで使用可能にしたいと考えています。つまり、オンラインやすべての動的ページを含むすべてのページ、およびサイト上のアセットをキャッシュすることができるように、ユーザーがボタンをクリックする（またはそうでないと自動的に行われる）

私はすべてのアセットのリストを生成する必要がありますか、これを行うためのツールがあるのか​​、sw-precacheに組み込まれているのでしょうか？

キャッシュはどれくらいの大きさで、どれくらいの期間利用できるのですか？ユーザーがブラウザキャッシュを明確にクリアしない限り、サイズやサイズは問わないものとします。

Answer 1

スタティックファイル（HTML、JS、CSSなど）でいっぱいのローカルディレクトリがある場合は、渡したパターンに基づいて、自動的にそのすべて（または一部のサブセット）をプリキャッシュするようにsw-precacheを設定できますstaticFileGlobs option。ユーザーのブラウザで以前に事前定義されたエントリは、ローカル変更を行い、service-worker.jsを再生成して再デプロイする際に最新の状態に保たれます。

一般に、キャッシュストレージAPIを使用して保存できるデータの最大量には厳しい上限はありません。現在空いている容量（潜在的に他のヒューリスティックと一緒に）に依存します。

どのファイルが予備になっているかを判断し、実際にユーザーが役に立つと思うファイルであることを確認するときには、考慮する必要があります。たとえば、初めて（仮説的な）ドキュメンテーションサイトを訪問すると、数千ものHTMLドキュメントがダウンロードされて格納されてしまいます。これは、サーバーとユーザーの両方の帯域幅を浪費します。ユーザーのデバイス。

大量のリソースがすべての訪問者に必要なものではない場合は、重要なリソースに予備的な戦略を使用し、オプションのリソースの場合はruntime caching strategyを使用するのが最善の策です。ランタイムキャッシュ方式と最大キャッシュサイズまたは最大経過時間を組み合わせることができます。また、下にあるsw-toolboxライブラリが古いエントリを削除します。