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步：使用{p>更新您的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

如果在开发工具的“应用程序”选项卡中没有看到服务工作者处于活动状态，则可以尝试以下操作：

确保您正在“ 本地主机”或“ HTTPS ” URL上查看应用程序，否则所有其他操作均将无效。
尝试在生产模式（而不是dev）中运行构建，方法是在控制台中运行它：

npm run prod

然后，如果您要运行开发服务器，则可以使用以下命令：

提供-s build

，然后在响应中指定的URL上访问您的网站（可能是localhost：5000）。

Answer 3

如果您使用create-react-app自举应用，请转到index.js并将行serviceWorker.unregister()更改为serviceWorker.register()

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

打开 DevTools 并进入 Application 标签，您将看到您的服务人员正在运行。

Answer 4

在同时与一些服务人员进行修补时，我遇到了同样的问题，即使我创建了一个新的create-react-app，将kill -9 5983更改为<script> function isNumber(value, acceptScientificNotation) { if(true !== acceptScientificNotation){ return /^-{0,1}\d+(\.\d+)?$/.test(value); } if (true === Array.isArray(value)) { return false; } return !isNaN(parseInt(value, 10)); } console.log(isNumber("")); // false console.log(isNumber(false)); // false console.log(isNumber(true)); // false console.log(isNumber("0")); // true console.log(isNumber("0.1")); // true console.log(isNumber("12")); // true console.log(isNumber("-12")); // true console.log(isNumber(-45)); // true console.log(isNumber({jo: "pi"})); // false console.log(isNumber([])); // false console.log(isNumber([78, 79])); // false console.log(isNumber(NaN)); // false console.log(isNumber(Infinity)); // false console.log(isNumber(undefined)); // false console.log(isNumber("0,1")); // false console.log(isNumber("1e-1")); // false console.log(isNumber("1e-1", true)); // true </script>，它仍然无法正常工作。 首先，我重新启动chrome ，构建了我的应用，并使用unregister为其提供了服务，

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

建立反应应用程式服务工作者无法运作

4 个答案: