問題タブ [sw-precache]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
service-worker - service-worker.js でキャッチされない promise DOM 例外
Service Worker は正常に登録されましたが、Chrome で上記のエラーがまだ発生しています。
service-worker - AWS CloudFront での新しいデプロイで Uncaught Syntax Error を防ぐために React で Service Worker を設定する方法
このトピックに関する過去数日間、SO の投稿と Github の問題を読んでいますが、まだ自分のセットアップに適した組み合わせが見つからないようです。誰かが私に特定の解決策を教えてくれることを願っています。これが何が起こっているかです。
で create-react-app v2 を使用していますsw-precache。ビルドは CircleCI を経由して新しいファイルを S3 にプッシュし、それが CloudFront から提供されます。ビルドの最後のステップは、以前の CloudFront ディストリビューションを無効にすることです。
私が直面している問題は、新しいビルドがデプロイされ、Service Worker が更新されたときに、Service Worker によって提供されるバンドル ファイルが存在しなくなったため、次のページの読み込みでエラーがスローされることです。繰り返しますが、サイトをロードできますがwww.example.com、新しいタブを開いてロードwww.example.com/testすると、Uncaught Syntax Error が発生します。
私のセットアップに関するいくつかのメモ。
Minimum and Maximum TTLto に設定する動作を CloudFront で作成しましservice-worker.jsた0。私
sw-precache-config.jsの場合、ここに私のセットアップがあります：
- ビルド後に最初のページを読み込むと、index.html に対して次の応答が表示されます。
Status Code: 200 OK (from ServiceWorker)
私の仮定は、サービス ワーカーによって index.html ファイルがキャッシュされないようにすることです。しかし、そうすると、オフライン機能が失われませんか? index.html の runtimeCaching を設定して、networkFirstいつでも要求できるようにする必要がありますが、オフラインの場合はキャッシュにフォールバックする必要がありますか? もしそうなら、それは次のようになりますか？
私が試したもののうまくいかなかったいくつかのことには、これが発生したときにユーザーにリロードするようにメッセージを表示することが含まれます (技術的には機能しますが、ユーザー エクスペリエンスは最適ではありません)。オプションも調べましたskipWaiting: falseが、新しいビルドでも同じエラーが表示され続けました。
performance - 1000 を超えるアセットを事前キャッシュするとパフォーマンスが低下する
Vue CLI PWA ワークボックス プラグイン モードを使用しています。私のアプリには 1000 を超えるアセットがあり、それらを事前キャッシュするとパフォーマンスが非常に低下します。チェックアウトしてください：
より具体的にファイルを事前キャッシュする方法はありますか? たとえば、ファイルを URL で事前キャッシュします。URLx/yのみでファイル 1、5、6 をプリキャッシュし、URL でx/vプリキャッシュ ファイル 7、8、2 をプリキャッシュします。