問題タブ [sw-precache]

Web サイトに Service Worker を実装しようとしています。SWPrecacheWebpackPlugin を vue で使用し、登録などはうまく機能します。どういうわけか、すべてのファイルをキャッシュするわけではありません。この場合、最も重要な app.js ファイルだと思います。

私がオンラインになっているとき、vue によって構築されたファイル構造は次のようになります。

しかし、キャッシュを確認すると app.js ファイルが見つからず、オフライン モードでは白いページが表示されます。

明らかに、サービスワーカーは稼働しており、いくつかのものをキャッシュしていますが、関連する app.js ファイルはキャッシュしていません。

私のwebpack構成は次のようになります。

私は実際に何が欠けているのか分かりません。

アップデート：

app.js ファイルが大きすぎて、PlugIn によってキャッシュされませんでした。警告もエラーも何もありません...

私は音声ベースの PWA を開発していますが、このテクノロジに詳しくないため、Service Worker でのキャッシュ管理と無効化について疑問がいくつかあります。

アプリケーションはオフラインで動作する必要があります。これについては、SW プリキャッシュを使用して説明しました。

私の唯一の疑いは、データの量です。経験上、5 つのユース ケース シナリオがあります。各シナリオには最大 30MB のオーディオ コンテンツが含まれます。つまり、約 150MB + すべての画像、js、および css の合計がプリキャッシュされます。

これが一部のブラウザーの制限を超えていることはわかっています (この質問とこの記事を参照してください)。一般に、ストレージ サイズには注意する必要があります。これは、ユーザーのデバイスのディスク上の空き容量にも依存します。

それが私が考えたことです: あるシナリオと別のシナリオの間に、ユーザーは WiFi 接続のあるデスクに立ち寄るので、私の考えは、ユーザーのアクション(ボタンを押すなど) の後にキャッシュランタイムを空にし、それを新しいコンテンツに置き換えることです. この方法では、一度に 1 つのシナリオのみを保存します。つまり、約 35 MB という妥当なサイズです。

それは良いアプローチだと思いますか？これを実装する最良の方法は何ですか?

これが私の現在のコードです：

service-worker.js

index.js

時間をありがとう、フランチェスコ

すべてのユーザーに対して preCache を実行するのではなく、メンバーに対してのみ preCache を実行します。サーバーへの不必要な負荷と、1 回限りの訪問者の不必要なキャッシュを回避するために、これを行いたいと考えています。

そのため、訪問者がログインすると、Service Worker にメッセージを送信します。以下の Service Worker のスニペットでは、「Message Received」がコンソールに記録されています。ただし、画像はキャッシュされません。そして、エラーメッセージはありません。

precacheAndRoute(images)の下に直接配置するとconst images = [....];、画像は適切にキャッシュされます。

サービスワーカーは初めてです。そして、どんな助けも大歓迎です。