我是渐进式 Web 应用程序的新手，这是我第一次向我的应用程序添加 Service Worker。这是一个简单的 Service Worker，我的目标纯粹是测试它是否正确注册。该文件是serviceWorker.js:
console.log('Hello Service Worker');
我将其添加到使用 Webpack Dev Server 运行的应用程序中。我在本地使用自签名证书。我在我的index.tsx(React Typescript)中设置了Service Worker，如下所示:
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service-worker.js')
.then(() => console.log('Worker registered'))
.catch((ex) => console.error('Worker registration error', ex));
}
但是，当我启动开发服务器并转到应用程序时，出现错误:
Failed to register a ServiceWorker for scope ('https://localhost:3000/') with script ('https://localhost:3000/service-worker.js'): An SSL certificate error occurred when fetching the script.
URL，https://localhost:3000/service-worker.js，确实有效，浏览器只是因为证书的自签名部分而阻止它。
我在运行 MacOS Monterey 和 Webpack 5 的 M1 Pro MacBook 上使用 Chrome 浏览器。
郑重声明，我知道像 Workbox 这样的插件，但我现在不想使用它们，因为我对 Service Workers 还很陌生。我相信在开始使用新技术时应该使用低级结构，以便在接受更简单的抽象之前更好地理解它们。
最佳答案
我不知道有任何features - 包括服务 worker - 需要 localhost 上的 HTTPS。
localhost 以及等效的 IP 地址范围为 specifically excluded来自基于 Chromium 的浏览器的 HTTPS 要求，Firefox 和 Safari 都遵循这一要求，至少在服务工作线程方面是如此。
因此，我建议您直接通过 http://localhost:3000 访问您的网站。
此older answer中有更多详细信息.
关于ssl - 无法使用自签名证书和 Webpack 开发服务器设置 Service Worker，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71149601/