web-dev-qa-db-ja.com

create-react-appを使用してサービスワーカー機能を追加する

そのため、create-react-appにはService Worker機能 デフォルト が含まれています。これはすばらしいことです。静的アセットはすべて、すぐにオフラインで使用できるようにキャッシュされます。かっこいいですが、今度は少し先に進み、indexedDBを使用して動的コンテンツをキャッシュしたいと思います。

問題は、変更するservice-worker.jsファイルがないことです。ビルドプロセス中に生成されます。

Create-react-appをイジェクトしたり、Nice静的キャッシングのすべてをやり直したりせずに、追加のロジックを追加する方法はありますか？

reactjsindexeddbservice-workercreate-react-appprogressive-web-apps
14
Daniel Loiterton

ご覧のとおり、create-react-appの構成はロックダウンされており、Service Workerロジックは完全に構成で定義されています。

ejectを使用したくないがカスタマイズが必要な場合は、create-react-appビルドプロセスを変更してsw-precache CLIを明示的に呼び出すようにすることもできます after通常のビルドが完了し、service-worker.jsがデフォルトで生成するcreate-react-appを上書きします。これにはローカルのpackage.jsonの変更が含まれるため、最初にejectingする必要はありません。

このアプローチにはいくつかの情報があります ここ 、そして一般的なアイデアはnpmスクリプトを次のように変更することです：

"build": "react-scripts build && sw-precache --config=sw-precache-config.js"

sw-precache-config.jsを使用 configured ニーズに基づきますが、

swFilePath: './build/service-worker.js'

組み込みservice-worker.jsが確実に上書きされるようにします。

12
Jeff Posnick

同じ問題があり、ejectを実行せずに、デフォルトのservice-workerをworkboxで生成されたものに置き換えて、ランタイムキャッシングWebフォント、API呼び出しなどを追加できました。

  1. インストールworkbox-build
  2. registerRoute呼び出しを追加するためにsrc/sw-template.jsを準備します
  3. ワークボックスファイルを「build」フォルダにコピーする/build-sw.jsを準備し、injectManifest
  4. 上で実行するようにpackage.jsonスクリプトを変更するbuild-sw.js
  5. src/registerServiceWorker.jsを変更してデフォルトのものを置き換える

詳細なファイルの変更はこちら です。

9
bob