問題タブ [workbox]

Service Worker を初めて実装する Web サイトを構築しています。パフォーマンスをテストしていたところ、約 500 ミリ秒でした。プライベート ウィンドウでパフォーマンス テストを実行してみましたが、約 2 倍の時間がかかりました。ページの読み込みを見ると、Service Worker が最初に読み込みを行っているだけでなく、同期的に読み込みを行っており、それ自体で約 500 ミリ秒続いているようです。非常に時間がかかっているのは私の js ファイルではなく、この方法でロードしているワークボックス ライブラリであることに注意してくださいimportScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');。本当に同期的にロードされていますか? これを解決する他の方法はありますか？これは初回のみロードされますか? 前もって感謝します。

ここにいくつかのスクリーンショットがあります：

通常のロード

プライベート ウィンドウ ロード

Workbox.injectManifest を使用してサービス ワーカーを生成しようとしていますが、サービス ワーカーからのプリキャッシュ マニフェストへのパスが正しく生成されないという問題があります。

私の Webpackoutput.pathは 'path.resolve('./scripts/app/dist')' で、ワークボックスの構成は次のとおりです。

デフォルトでは、Workbox は output.path に sw.js を作成し、それを自分のサイトのルートに配置したいのです../../../sw.js が、プリキャッシュ マニフェストは output.path に残ります。これは./scripts/app/dist. 問題は、生成された sw.js のマニフェストを指すパスが次のようになっていることです。

これは、サイトのルートにあり、見つからない sw.js の場所を示しています。それはバグですか、それとも私が正しく設定していないのですか? 「importsDirectory」を使用してみましたが、マニフェストを別の場所に移動するだけで、sw.js のパスはまだ間違っています。

アップデート

Service Worker テンプレートにこれがあります。

しかし、私がビルドすると、配列は読み込まれず、外部マニフェストが作成されます: これはプラグインが作成するものです:

workboxでセットアップされた単純な Service Worker があります。プリキャッシュにはindex.html、main.xxx.jsビルドごとに xxx が更新される javascript バンドル (とりわけ) が含まれています。プリキャッシュのセットアップは非常に簡単で、workbox-buildを使用します。

私がランダムに見ている問題 (特に Safary と Firefox で) は、インデックスが参照しているにmain.xxx.jsもかかわらず、現在のビルドが onmain.yyy.jsであるという悪い (古い) 状態になっているように見えることです。これは存在せず、サイトを壊します。main.yyy.jsへの正しい参照を示し、正常に動作する Chrome にアクセスすることで、これを確認できますindex.html。ここで何が欠けていますか?常に同じバージョンを使用できるようにするためにどのような戦略を使用できますか?

明確にするために、問題が悪い状態になると、問題を解決するものは何もないようです。リフレッシュしても何も起こりません。