使用create-react-app添加更多服务工作者功能

问题描述 投票:11回答:2

所以create-react-app包括服务工作者功能by default,这很可爱 - 我的所有静态资产都被缓存以供开箱即用的离线使用。很酷,但现在我想更进一步,并使用indexedDB缓存一些动态内容。

问题是,没有要修改的service-worker.js文件。它在构建过程中生成。

有没有办法添加额外的逻辑,而无需弹出create-react-app或重做所有漂亮的静态缓存内容?

reactjs indexeddb service-worker create-react-app progressive-web-apps
2个回答
12
投票

如您所见,create-react-app的配置被锁定,服务工作者逻辑完全在配置中定义。

如果你不想eject但你想要一些自定义,另一个选择是修改create-react-app构建过程以在正常构建完成后显式调用sw-precache CLI,覆盖service-worker.js默认生成的create-react-app。因为这涉及到修改你当地的package.json,所以它不需要首先使用ejecting。

关于这种方法有一些信息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被覆盖。


7
投票

我有同样的问题,没有做eject,我可以用service-worker生成的一个替换默认的workbox来添加运行时缓存webfonts,api调用等。

  1. 安装workbox-build
  2. 准备src/sw-template.js添加你的registerRoute电话
  3. 准备/build-sw.js将工作箱文件复制到'build'文件夹和injectManifest
  4. 修改package.json脚本以在build-sw.js上运行
  5. 修改src/registerServiceWorker.js以替换默认值

你可以找到detailed file changes here

© www.soinside.com 2019 - 2024. All rights reserved.