默认情况下，freshcreate-react-app 项目中包含一个服务工作者脚本。我不需要默认的registerServiceWorker.js 和默认的service-worker.js（在构建中隐藏并可用），因为我想添加自己的 Service Worker。我也想用 es6 语法创建我自己的 service worker 代码，所以仅仅在公共文件夹中添加一个“sw.js”并将其注册到我的 index.html 对我来说并不是最好的选择。如何使用 ES6 create-react-app 构建一些自定义 sw 代码？
【问题讨论】：
标签： reactjs webpack ecmascript-6 service-worker create-react-app
如果您希望在初始生产部署之前禁用内置的 service-worker，则从 src/index.js 中删除对 serviceWorkerRegistration.register() 的调用并添加您自己的 service-worker。
如果您的站点/应用程序已经投入生产，请将其换成serviceWorkerRegistration.unregister(). 在用户访问您的具有serviceWorkerRegistration.unregister() 的页面后，Service Worker 将被卸载，缓存可能需要长达 24 小时失效（取决于服务工作者的服务方式）
另一种选择是弹出并配置他们的内置解决方案。
【讨论】：
service-worker.js 仍将被构建并在构建文件夹中可用。我有兴趣用ES6 编写自己的服务工作者，用构建文件夹中的服务工作者替换它。我目前只是在我的公共文件夹中单独的sw.js 文件中编写我的 sw 代码，但它只是普通的香草 js 代码。
放弃所有其他想法，选择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);
});
}
如果您像我一样需要访问 service worker 中的环境变量来初始化 firebase 消息模块，这是唯一不需要弹出 CRA 的简单选项。
我决定发布这个答案，因为我自己忽略了另一个答案的 cmets，并且浪费了不必要的时间来寻找这个解决方案。
【讨论】：