問題タブ [sw-precache]

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ます。

sw-precacheAngular アプリのすべての静的リソースの事前キャッシュを許可するために使用しています。私は理解したsw-precache concept of versioning by calculating the MD5 hash which is used to determine whether the file has changed or not.

sw-precacheしかし、複数のファイルを連結して生成されたバンドル ファイル (bundle.877095ebde8.js など) でバージョン管理/キャッシュ バスティングをどのように処理し、それらとバージョン管理ファイルを縮小するのか疑問に思っています。

この場合、ファイルの内容ではなく、変更を加えて新しいバージョン管理ファイルを作成するたびにファイル全体が変更されるため、navigator.serviceWorker.controller常に null が返されます。

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

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

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

提案してください ！

少し前に appcache を使用してオフラインの最初のアプリを作成し、それを service-worker を使用するように変換したいと考えていました (クライアントはすべて最新のクロムを使用しているため、ブラウザーの互換性の問題はありません)。

sw-precache を使用して、ローカル アセット (具体的には、html/css/fonts といくつかの js) をキャッシュするサービス ワーカーを生成しています。サービス ワーカーがインストールされると、すべてのアセットが正常に追加されます。ストレージをキャッシュすると、正常に開始されます（起動と完了の両方をインストールしてアクティブ化します。また、インストールイベントの最後にself.skipWaiting（）を使用して、サービスワーカーを開始します（これも正常に実行されます））。

問題は、「フェッチ」イベントが発生していないように見えることです。そのため、オフラインにするか、ブラウザーを開いて (既にオフラインの状態で) サイトに移動すると、Chrome オフライン恐竜が表示されます。ネットワーク タブを見ると、ブラウザがサーバーにアクセスしてページを取得しようとしているように見えます。何が間違っているのかわからず、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 を使用して設計されたシングル ページ アプリケーションのようなものです。

プログレッシブ Web アプリの構築に取り組んでいます。Service Worker の奇妙な動作に直面しています。

期待される結果: 1 つのリソースに対して 1 つのネットワーク リクエストのみを送信する必要があります。

実際の結果: 各リソースに対して 2 つのネットワーク要求が行われています [

sw-precacheを使用して CDNJS からアセットをキャッシュし、オフラインで使用する Service Worker をセットアップしようとしています。残念ながら、これは機能していないようです。これが私がこれまでに持っているものです：

いずれかのスクリプトが にロードされる前index.html:

Service Worker を生成するために使用している Gulp タスクは次のとおりです。

アプリを実行するService Worker Registeredと、コンソールにログが記録されます。ただし、wifi を切断すると、アプリはスクリプトの読み込みに失敗します。私は何を間違っていますか？

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

Webpack と swPrecache を使用しています。swPrecache によって service-worker.js ファイルが生成され、生成されたファイルにカスタム コードを追加したいと考えています。

次のように、babel 変換されたコードを service-worker.js ファイルに追加する Webpack プラグインを作成しました。

require() ただし、これには、追加しているファイルで機能させるためのコードは含まれていません。Webpack を使用して service-worker.js ファイルを生成する必要があると思いますが、おそらくカスタム エントリ ポイントを介してそれを行う方法がわかりませんか?