5

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

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

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

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

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

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

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

<script src="scripts/a387fbeb.modules.js"></script>

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

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

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

<script src="scripts/cec2b711.modules.js"></script>

これら 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ます。

4

1 に答える 1

2

(ここでの回答はsw-precacheライブラリに固有のものです。詳細は一般的な Service Worker には当てはまりませんが、キャッシュのメンテナンスに関する概念は、より幅広い対象者に当てはまる可能性があります。)

のコンテンツがサーバーによって動的に生成され、インライン化されているか、またはタグindex.htmlを介して参照されている他のリソースに依存している場合は、オプションを介してそれらの依存関係を指定する必要があります。ライブラリの一部として出荷されるの例を次に示します。<script><link>dynamicUrlToDependenciesapp-shell-demo

dynamicUrlToDependencies: {
  '/shell': [
    ...glob.sync(`${BUILD_DIR}/rev/js/**/*.js`),
    ...glob.sync(`${BUILD_DIR}/rev/styles/all*.css`),
    `${SRC_DIR}/views/index.handlebars`
  ]
}

(キャッシュされた App Shell へのアクセスに使用される URL であるため、 の/shell代わりに が使用されます。)/index.html

この構成はsw-precache、これらのパターンに一致するローカル ファイルのいずれかが変更されるたびに、動的ページのキャッシュ エントリを更新する必要があることを示しています。

index.htmlサーバーによって動的に生成されるのではなく、このアプローチのようなものを使用してビルド時に更新される場合は、実行されるビルド プロセスのステップがsw-precache、他のすべての変更と置換が行われた後に行われるようにすることが重要です。場所。これはrun-sequence、Service Worker の生成が他のタスクと並行して実行されないようにするために、次のようなものを使用することを意味します。

上記の情報が役に立たない場合は、お気軽にバグを報告して、サイトの URL などの詳細をお知らせください。

于 2016-02-24T21:48:10.693 に答える