Create-react-app Service Worker 不起作用

Question

我正在开发一个从 create-react-app 构建的 React 渐进式 Web 应用程序，并且正在尝试注册一个服务工作者。

但是，在遵循有关 create-react-app 的文档后，该文档仅说明将 serviceWorker.unregister() 更改为 serviceWorker.register()，并没有注册任何内容。

即使来自一个新的 create-react-app 项目，这仍然不起作用。

该主题的文档似乎非常精简，我还需要做些什么来注册由 create-react-app 生成的默认服务工作者？

Answer 1

如果您使用引导应用程序create-react-app，则将行index.js更改serviceWorker.unregister()为serviceWorker.register()

然后使用 HTTP 服务器（如或 ）构建应用程序npm run build并从目录运行应用程序。buildservehttp-server

打开DevTools并进入“应用程序”选项卡，您将看到您的服务工作人员正在运行。

Answer 2

第1步 ：

npm i workbox-cli

第 2 步：workbox-config.js在项目文件夹中创建文件

第 3 步：添加

module.exports = {
  globDirectory: './public/',
  globPatterns: ['\*\*/\*.{html,js}'],
  swDest: './public/sw.js',
  clientsClaim: true,
  skipWaiting: true
};

第 4 步：更新您的serviceWorker.js文件

const swUrl = `${process.env.PUBLIC_URL}/sw.js`

第 5 步：更新您的package.json文件

"scripts": {
  // ...    
  "build": " workbox generateSW && react-scripts build",
  // ...
}

然后构建和服务。

阅读更多https://medium.com/@arafatahmedtanimcsedu57/progressive-web-apps-with-create-react-app-ca0c955ab798