无法绕过ServiceWorker注册时的SSL证书错误求助

问题背景 #

首次尝试实现推送通知并创建ServiceWorker，自签名证书在以下场景均能正常工作：

• 通过ng serve运行的Angular应用
• API服务器
• 基于如下配置通过ng serve代理API服务器：

{
  "/api/*": {
    "target": "https://localhost:4201",
    "secure": false,
    "changeOrigin": true
  }
}

但执行ServiceWorker注册代码时失败：

ngOnInit(): void {
  navigator.serviceWorker.register('/assets/service.js').then(reg =>
    console.log('Service worker registration succeeded:', reg))
    .catch(err => console.error('Service worker registration failed:', err));
}

报错信息：

DOMException: Failed to register a ServiceWorker for scope ('https://localhost:4200/assets/') with script ('https://localhost:4200/assets/service.js'): An SSL certificate error occurred when fetching the script.

已尝试操作：

• 在Windows和Chrome中导入自签名证书
• 配置Chrome忽略localhost证书错误
• 通过命令行参数让Chrome忽略https://localhost:4200证书错误
• 确认ServiceWorker脚本路径正确（修改路径会触发404错误而非证书错误）

更新：Firefox中可正常注册ServiceWorker，仅Chrome存在该问题。

解决方案 #

1. 将证书加入Chrome信任根证书存储 #

Chrome对自签名证书的信任要求更严格，仅导入证书可能无效，需将其放入系统受信任的根证书颁发机构存储区：

• 打开Chrome设置 → 隐私和安全 → 安全 → 管理证书
• 找到已导入的自签名证书，右键选择「所有任务」→「导出」备份
• 删除现有证书后重新导入，在证书导入向导中选择「将所有证书放入下列存储」，指定为「受信任的根证书颁发机构」
• 重启Chrome后重试注册

2. 配置Chrome命令行参数绕过SSL验证 #

关闭所有Chrome窗口，修改快捷方式参数：

• 右键Chrome快捷方式 → 属性，在「目标」字段末尾添加（注意参数前加空格）：
  • 精准匹配证书：--ignore-certificate-errors-spki-list=<证书SPKI指纹>
    • 获取SPKI指纹：访问https://localhost:4200，点击地址栏锁图标 → 证书 → 详细信息 → 复制「SPKI指纹」并去掉冒号
  • 开发环境宽松模式：--ignore-certificate-errors
• 启动Chrome后测试注册

3. 显式指定ServiceWorker根作用域 #

默认作用域为脚本所在目录（/assets/），尝试指定根作用域避免路径相关验证异常：

ngOnInit(): void {
  navigator.serviceWorker.register('/assets/service.js', { scope: '/' })
    .then(reg => console.log('Service worker registration succeeded:', reg))
    .catch(err => console.error('Service worker registration failed:', err));
}

4. 确认Angular服务使用指定自签名证书 #

修改angular.json配置，确保ng serve使用你导入的自签名证书而非自动生成的临时证书：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "ssl": true,
    "sslKey": "./path/to/your/private.key",
    "sslCert": "./path/to/your/certificate.crt"
  }
}

重启ng serve后重试。

5. 清除Chrome缓存与安全策略 #

• 打开Chrome开发者工具 → 应用 → Service Workers，点击「Unregister」清除现有ServiceWorker
• 访问chrome://net-internals/#hsts，在「Delete domain security policies」输入localhost并点击「Delete」
• 按Ctrl+Shift+Del清除浏览器缓存，选择「缓存的图像和文件」「Cookie和其他网站数据」，重启Chrome后测试

内容的提问来源于stack exchange，提问作者kshetline