create-react-app默认包含服务工作器功能,这很棒-我的所有静态资源都可以直接离线缓存使用。但现在我想进一步使用indexedDB缓存一些动态内容。
问题是,没有service-worker.js文件可修改。它是在构建过程中生成的。
是否有一种方法可以添加其他逻辑而不必弹出create-react-app或重做所有不错的静态缓存内容?
create-react-app默认包含服务工作器功能,这很棒-我的所有静态资源都可以直接离线缓存使用。但现在我想进一步使用indexedDB缓存一些动态内容。
问题是,没有service-worker.js文件可修改。它是在构建过程中生成的。
是否有一种方法可以添加其他逻辑而不必弹出create-react-app或重做所有不错的静态缓存内容?
正如您所观察到的,create-react-app
的配置是被锁定的,服务工作者逻辑完全在配置中定义。
如果您不想 eject
,但仍希望进行一些自定义,则另一个选项是修改 create-react-app
的构建过程,以在常规构建完成后显式调用 sw-precache
CLI,覆盖默认生成的 service-worker.js
。由于这涉及修改本地的 package.json
,因此不需要首先进行 eject
。
有关此方法的一些信息 在此处,其一般思路是修改您的 npm
脚本,使其看起来类似于:
"build": "react-scripts build && sw-precache --config=sw-precache-config.js"
sw-precache-config.js
,但包括以下内容:swFilePath: './build/service-worker.js'
为确保内置的service-worker.js
被覆盖。
"build": "react-scripts build && workbox-cli generate:sw --config-file=workbox-config.js"
这样的东西来覆盖service-worker.js文件? - Daniel Loitertoneject
命令,我可以用由 workbox
生成的默认 service-worker
替换掉默认的 service-worker
,以实现在运行时缓存 webfonts、api 调用等功能。workbox-build
src/sw-template.js
文件并添加你的 registerRoute
调用/build-sw.js
文件以将 workbox 文件复制到 'build' 文件夹并执行 injectManifest
操作package.json
中的脚本以运行上述 build-sw.js
文件src/registerServiceWorker.js
文件以替换默认的 service worker
service-worker
之前,您需要弹出应用程序。 - BlackBeard