localhost环境下Service Worker注册失败问题求助

可能的原因及对应解决方案 #

1. Service Worker作用域权限问题 #

你注册时指定了scope: '/'，但Service Worker脚本放在/js/目录下。根据浏览器规则，Service Worker的默认作用域是其脚本所在目录的路径，若要扩大到根目录，需要服务器返回Service-Worker-Allowed: /响应头。

解决方法：
修改Nginx配置，在/js路径下添加响应头：

location /js/ {
    add_header Service-Worker-Allowed "/";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Accept-Encoding "";
    proxy_pass http://localhost:3000;
}

或者将Service Worker脚本移至网站根目录，同时修改注册路径为'/serviceWorker.min.js'。

2. Firefox证书信任问题 #

mkcert生成的证书不会自动被Firefox信任（Firefox不使用系统证书库），需手动导入：

• 打开Firefox设置，进入「隐私与安全」-「证书」-「查看证书」
• 切换到「证书机构」标签，点击「导入」，选择mkcert生成的localhost.pem文件
• 勾选「信任由此证书机构标识的网站」，完成导入

3. Firefox Service Worker配置检查 #

输入about:config，确认以下配置为true：

• dom.serviceWorkers.enabled
• dom.serviceWorkers.testing.enabled

若security.mixed_content.block_active_content为true，可临时设为false测试（当前Nginx配置已代理所有请求，此问题概率较低）。

4. 验证Service Worker脚本可访问性 #

直接访问https://localhost:8080/js/serviceWorker.min.js，确认：

• 返回状态码200
• Content-Type响应头为application/javascript
• 开发环境可添加Cache-Control: no-cache响应头避免缓存旧脚本

内容的提问来源于stack exchange，提问作者Dr. Light