問題タブ [sw-toolbox]

sw-precacheと一緒に使用してsw-toolbox、Angular アプリのキャッシュされたページをオフラインで閲覧できるようにしています。

アプリは、node Express サーバーを介して提供されます。

私たちが遭遇した問題の 1 つはindex.html、新しい Service Worker のアクティブ化で他のアセットが更新されているにもかかわらず、キャッシュ内で が更新されていないように見えることがあるということです。

index.htmlこれにより、この場合、既存のバージョン管理されていないアセットを読み込もうとしている古いアセットがユーザーに残り/scripts/a387fbeb.modules.jsます。

index.htmlが正しく更新された別のブラウザでは同じハッシュを持つように見えるため、何が起こっているのか完全にはわかりません。

1つのブラウザで古い（問題のある）Index.html

2cdd5371d1201f857054a716570c1564（ハッシュでキャッシュされます）には以下が含まれます：

その内容で。(このファイルはキャッシュにもリモートにも存在しません)。

別のブラウザで更新された（良い）index.html

（同じでキャッシュされ2cdd5371d1201f857054a716570c1564ます）には以下が含まれます：

これら 2 つのキャッシュは同じですが、ブラウザーに返されるコンテンツは異なります。

これはどうすればいいですか？sw-precacheこれは、新しい SW がアクティブになったときにアトミック キャッシュ バスティングが保証されないということですか? どうすればこれを防ぐことができますか？

これらが役立つ場合、これは から生成された service-worker.jsファイルですsw-precache。

注：これを回避するためremoteFirstに戦略（少なくとも）を使用できることに気づきました。しかし、パフォーマンスを最大限に引き出すために戦略をindex.html使用する方法を理解し、理解したいと思っています。cacheFirst

注2：他の関連する質問で、キャッシュの名前を変更して古いキャッシュをすべて強制的に破棄できることを見ました。しかし、これはsw-precache更新されたコンテンツのみを破棄するという考えに勝っているように見えますか? これは行く方法ですか？

注 3 : ブラウザーをハード リロードしても、Web サイトが壊れていることに注意してください。Service Worker キャッシュをスキップするため、サイトは機能しますが、キャッシュはまだ間違っています - Service Worker がアクティブ化されていないようです - 私の推測では、この特定の SW は既にアクティブ化されていますが、キャッシュを正しくバストすることに失敗しているためです。その後のハード リフレッシュ以外のアクセスでは、引き続き壊れた が表示されindex.htmlます。

サイトが行っている XHR get 呼び出しの結果を保存しようとしているので、インターネット接続がない場合は cache/indexedDB からデータを取得します。Service Worker 内でSw-toolboxを使用しています。アクセスしているURLは「https://www.domain.in/field?searchparams=123」で、やってみました、

しかし、私は何のリードも見つけられません。私はそれを間違っていますか? 助けてください 。

Service Worker を使用してプログレッシブ Web アプリを作成しており、Service Worker ツールボックスを使用してコンテンツをキャッシュしています。私のコンテンツをキャッシュするService Workerコード：

コンソールにエラーが表示されていないため、コードは正常に実行されています。しかし、クラウドフロントからの画像または上記で構成された URL がキャッシュされ、キャッシュ自体からレンダリングされているかどうかを確認するにはどうすればよいですか。

sw-precacheすべての静的リソースの事前キャッシュを許可しようとしています。ファイル名に MD5 フィンガープリントが含まれるバージョン管理されたリソースをプリキャッシュするために、どのアプローチに従うべきかを考えています。

最初の解決策はsw-toolbox、URL パターンを使用して一致させ、それらをキャッシュすることです。新しい指紋でファイルを生成するたびに、自動的にキャッシュが取得されます。はい、古いキャッシュを独自に管理するためのキャッチがあります。

2番目の解決策はsw-precache同じものを処理することであり、古いキャッシュを自動的に処理するという利点があります。試してみましたが、複数のページを更新したり、ブラウザのタブを再度開いたりしても、リソースが更新されないことがあります。

提案してください ！

Sw-precache私はとライブラリに精通していますがSw-toolbox、Angular を使用してプログレッシブ Web アプリを構築する際に動的依存関係に対応する方法についてはまだ頭を悩ませています。

Sw-precache ビルド プロセスを使用して、アプリケーション用に bundle.js、bundle.css、およびいくつかの静的テンプレートを事前にキャッシュしました。(すべてのテンプレート (.html ファイル) が bundle.js と bundle.css に依存していると仮定します)

1. 事前にキャッシュされていないテンプレートを更新するとどうなりますか? テンプレートと合わせて bundle.js/css を確実に更新するにはどうすればよいですか。

2. 既にキャッシュされているテンプレートを更新するとどうなりますか。事前にキャッシュされた bundle.js/css ファイルと連動して常に更新されますか。

3. 最後の使用例は、テンプレートが既に事前にキャッシュされているが、src 属性を持つインライン スクリプトがあり、このスクリプト ファイルがどこにもキャッシュされていない場合です。テンプレートとスクリプト ファイルに変更を加えたとします。スクリプト ファイルと組み合わせてテンプレート ファイルを確実に更新するには、どのキャッシュ アプローチに従う必要がありますか。

純粋な App-shell アーキテクチャに従っているわけではありません。Angular.js を使用して設計されたシングル ページ アプリケーションのようなものです。

サービスワーカーにswtoolboxを使用しようとしています。urlパターンマッチングでネットワークのみ、キャッシュのみにしたい場合があります。

私はまだそれを機能させるために立ち往生しています。

基本的な使用法は問題なく機能しています。

正規表現を使い始めたとき。期待どおりに機能していません。

誰かがそれを試してみたらうまくいくでしょう。最初に正規表現が正常に機能していることを検証するために使用しました。https://regex101.com/

実行時キャッシュ オプションで sw-precache を指定して sw-toolbox を使用しています。しかし、URLにアクセスしてdevtoolsでネットワークを調べると、最初にネットワークからではなくサービスワーカーからキャッシュされたことが示されます(私が望むように)。たぶん、これらの 2 つのライブラリがどのように連携するかを理解していないだけです。私の現在の実装では、sw-precache を使用して webapp 全体 (非常に小さな webapp) をキャッシュし、ランタイム キャッシュ オプションを使用して、最初にネットワークのハンドラーで URL パターンを使用しました。私の考えでは、アプリ全体がキャッシュされていても、特定の URL パターンに移動すると、ページで使用されるデータはキャッシュではなくネットワークから取得されます。これは間違っていますか？

これが私のgulpタスクです：

});

上記の構成から、ログインと管理ルートはネットワークのみを使用してフェッチされ、インデックスルートは最初にキャッシュから提供されますが、サーバー側からページをバインドしているため、ネットワークを最初にしたいと考えています。そのため、ctrl + f5 を押さない限り、動的データはアプリで複製されません。