Create-React-Appで自動生成されたサービスワーカーを変更する方法

Question

Create-React-Appライブラリからサンプルアプリケーションを作成しました。ビルド・コマンドを実行すると、cache-first戦略を使用して独自にサービスワーカーが生成されます。 しかし、キャッシュのようないくつかのAPIレスポンスが必要です。自動生成されたサービスワーカーに自分のコードを含むスクリプトをどのように変更するのか分かりません。 私のケースではヘルプラインがいくつか見つかりましたが、これらのすべてを理解するには十分ではありません。

デフォルトでは、生成されたサービスワーカーファイルは、HTTP APIリクエスト、画像、または別のドメインから読み込まれた埋め込みなど、クロスオリジントラフィックを傍受またはキャッシュしません。これらの要求にランタイムキャッシュ方式を使用する場合は、webpack.config.prod.jsのSWPrecacheWebpackPluginセクションでruntimeCachingオプションを取り出して設定できます。段落の上

doc公式

から事前に感謝です！

Answer 1

npm run ejectを実行して、Webpackの基本設定にアクセスできます。

これを実行すると、webpack.config.prod.jsファイルを修正して、生成されたサービスワーカーを調整できます。 section that configures SWPrecacheWebpackPluginを探してください。

runtimeCaching configuration optionを追加して、ランタイムキャッシュのニーズに対応することができます。

Answer 2

最近プロジェクトで作業しているときにも同様の問題があり、「取り出す」ことは望ましくありませんでした。 CRAによって生成されたサービスワーカーコードにカスタムサービスワーカーコードを追加するための小さなツールを作成しました。

はこちらをご覧：https://github.com/bbhlondon/cra-append-sw