所以create-react-app包括服务工作者功能by default,这很可爱 - 我的所有静态资产都被缓存以供开箱即用的离线使用。很酷,但现在我想更进一步,并使用indexedDB缓存一些动态内容。
问题是,没有要修改的service-worker.js文件。它在构建过程中生成。
有没有办法添加额外的逻辑,而无需弹出create-react-app或重做所有漂亮的静态缓存内容?
如您所见,create-react-app
的配置被锁定,服务工作者逻辑完全在配置中定义。
如果你不想eject
但你想要一些自定义,另一个选择是修改create-react-app
构建过程以在正常构建完成后显式调用sw-precache
CLI,覆盖service-worker.js
默认生成的create-react-app
。因为这涉及到修改你当地的package.json
,所以它不需要首先使用eject
ing。
关于这种方法有一些信息here,一般的想法是修改你的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
被覆盖。
我有同样的问题,没有做eject
,我可以用service-worker
生成的一个替换默认的workbox
来添加运行时缓存webfonts,api调用等。
workbox-build
src/sw-template.js
添加你的registerRoute
电话/build-sw.js
将工作箱文件复制到'build'文件夹和injectManifest
package.json
脚本以在build-sw.js
上运行src/registerServiceWorker.js
以替换默认值