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

第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

Answer 2

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

然后使用npm run build应用程序，并使用诸如serve或http-server类的 HTTP 服务器从build目录运行应用程序。

打开DevTools并进入Application选项卡，您将看到您的 Service Worker 正在运行。

Answer 3

如果您在开发工具的应用程序选项卡中没有看到您的 Service Worker 处于活动状态，那么您可以尝试以下操作：

1. 确保您在“本地主机”或HTTPS url 上查看应用程序，其他任何内容都不起作用。
2. 通过在控制台中运行以下命令，尝试在生产模式（而不是开发）下运行构建：

npm 运行产品

然后，如果你想运行一个开发服务器，你可以遵循：

服务 -s 构建

并通过响应中指定的 URL 访问您的网站（可能是 localhost:5000）。

Answer 4

我在同时修补一些服务人员时遇到了同样的问题，即使我创建了一个新的 create-react-app，将unregister更改为register ，它仍然无法正常工作。 当我重新启动 chrome ，构建我的应用程序，并使用serve它提供serve ，它才真正开始工作。

我还删除了 if 生产条件以在任何地方启用它。