Question

默认情况下，包含新的create-react-app项目中的服务工作者脚本。我不需要默认的registerServiceWorker.js和默认的service-worker.js（在构建中隐藏和可用），因为我想添加自己的服务工作者。我想用es6语法创建自己的服务工作者代码，所以只需添加一个＆＃39; sw.js＆＃39;进入公共文件夹并在我的index.html中注册它不是我的最佳选择。如何使用ES6 create-react-app？

构建一些自定义sw-code

Answer 1

如果您希望在初始生产部署之前禁用内置服务工作者，请从serviceWorkerRegistration.register()移除对src/index.js的调用并添加您自己的服务工作者。

如果您的网站/应用已投入生产，请将其换成serviceWorkerRegistration.unregister().用户访问包含serviceWorkerRegistration.unregister()的网页后，将卸载服务工作者，最多可能需要24个缓存无效的时间（取决于服务工作者的服务方式）

另一种选择是弹出和配置他们的内置解决方案。

Answer 2

放弃所有其他想法，然后选择cra-append-sw。这样可以节省您很多时间和痛苦。

就像安装软件包一样简单，在主文件夹中创建service worker文件，然后像下面这样修改package.json文件中的start和build命令：

"start": "cra-append-sw --mode dev --env ./.env ./custom-sw.js && react-scripts start",
"build": "cra-append-sw --env ./.env ./custom-sw.js && react-scripts build",

然后确保在开发模式下注册单独的服务工作者：

if ('serviceWorker' in navigator) {
  console.log('Trying to register custom sw');
  navigator.serviceWorker
    .register('./firebase-messaging-sw.js')
    .then(function (registration) {
      console.log('Registration successful, scope is:', registration.scope);
    })
    .catch(function (err) {
      console.log('Service worker registration failed, error:', err);
    });
}

如果像我一样，您需要访问服务工作者中的环境变量以初始化firebase消息传递模块，这是唯一不需要退出CRA的简单选项。

我之所以决定发布此答案，是因为我自己忽略了对其他答案的评论，并浪费了不必要的时间来寻找此解决方案。

将自定义服务工作者添加到create-react-app

2 个答案: