PWA 项目怎么在本地开发环境中正确调试 HTTPS 调试证书-H5教程-PHP中文网

PWA本地开发必须使用HTTPS或localhost，自定义域名需可信证书并包含SAN（localhost、127.0.0.1、::1），证书须导入系统根信任库，开发服务器配置需匹配PEM格式与绝对路径，最后通过Chrome DevTools逐项验证Service Worker、Manifest及注册状态。

pwa 项目怎么在本地开发环境中正确调试 https 调试证书

PWA 项目在本地开发时必须走 HTTPS（或 localhost 的 HTTP）才能启用 Service Worker、安装提示、推送等核心能力。但浏览器对非 HTTPS 的 localhost 页面虽宽容，一旦你用自定义域名（如 myapp.test）、代理转发、或测试混合内容逻辑，HTTPS 就成了硬性门槛。关键不是“有没有证书”，而是“证书是否被浏览器信任 + 是否覆盖所有访问方式”。

证书必须支持 localhost 和常用替代地址

现代浏览器（Chrome 115+、Edge 115+、Safari 16.4+）强制要求证书包含 Subject Alternative Name（SAN），否则直接报 NET::ERR_CERT_INVALID。仅靠 CN=localhost 已完全失效。

正确 SAN 应至少包含：localhost、127.0.0.1、::1
若你用内网穿透或 hosts 绑定自定义域名（如 dev.myapp.local），也要一并加入 SAN
推荐工具：用 mkcert 生成，它默认自动写入全部三项，无需手动拼参数

证书要导入系统根信任库，而非仅浏览器

很多开发者把证书拖进 Chrome 设置 → “管理证书”里，结果 Edge 或 VS Code 内置浏览器仍报错——因为它们不共用 Chrome 的证书存储。真正生效的方式是导入操作系统级的“受信任的根证书颁发机构”：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

Windows：双击 rootCA.pem → “安装证书” → 选择“本地计算机” → 存储位置选“受信任的根证书颁发机构”
macOS：双击证书 → 钥匙串访问 → 拖入“系统”钥匙串 → 右键证书 → “显示简介” → “信任” → “始终信任”
完成后重启所有浏览器和开发工具（包括 HBuilderX、VS Code 的 Live Server）

开发服务器配置需匹配证书格式与路径

PWA 常见开发环境（Vite、Vue CLI、HBuilderX、uni-app）都基于 Webpack Dev Server 或类似服务，其 HTTPS 配置对证书格式敏感：

接受 PEM 格式（.pem 或 .crt + .key），不接受 Windows 的 .pfx/.p12（除非额外指定 ca 字段）
路径必须为绝对路径或相对于项目根目录的正确相对路径；HBuilderX 对 ./certs/xxx.pem 容易解析失败，建议改用 file://D:/project/certs/xxx.pem（Windows）或 file:///Users/name/project/certs/xxx.pem（macOS）

Vite 用户可在 vite.config.ts 中这样写：

server: {
  https: {
    key: fs.readFileSync('./certs/localhost-key.pem'),
    cert: fs.readFileSync('./certs/localhost.pem')
  }
}

验证 PWA 功能是否真正就绪

光有 HTTPS 不代表 PWA 能用。调试时逐项确认：

打开 Chrome DevTools → Application 标签页 → 查看左侧是否显示 “Service Worker” 且状态为 “Activated and running”
检查 Manifest 是否加载成功：Application → Manifest → 确认没有红色错误，图标路径可点击预览
在地址栏输入 chrome://serviceworker-internals/，查看注册的 SW 是否启用且无 scope 冲突
若用 navigator.serviceWorker.register() 手动注册，确保脚本路径是 HTTPS 的绝对路径（如 /sw.js），且响应头含 Content-Type: application/javascript