如何使用自签名 OpenSSL 证书在 HTTPS 上测试 PWA？

Question

我可以使用 localhost 通过 http 测试 serviceworkers，但我想在移动浏览器上测试。因为它是一个单独的设备，所以我不能使用 localhost，所以我使用了 PC 的名称。所以现在我需要使用 https，这会导致我的 Service Worker 出现 SSL 相关错误：

Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope (' https://xxx:5500/app/ ') with script (' https://xxx:5500/app/service_worker.js '): An SSL获取脚本时发生证书错误。

我已正确配置 liveServer 以使用自签名证书，并且已成功启用“edge://flags/#unsafely-treat-insecure-origin-as-secure”，但这还不够。

我还担心如何在移动设备上测试 PWA，因为我认为我无法在移动设备上使用“不安全”功能。我认为这是一个常见的情况，但我没有找到任何答案。

Answer 1

您可以通过 chrome 开发人员工具在移动设备上测试您的 PWA：称为远程调试的方法（仅适用于 android）

1. 在移动设备中打开开发人员工具 - 允许 USB 调试

2. 通过 USB 连接到笔记本电脑或个人电脑

3. 转到 chrome 开发工具打开远程设备

4. 在远程设备中设置端口转发

5. 在移动 Chrome 浏览器中运行本地主机。

有关详细信息，请参阅：https : //developers.google.com/web/tools/chrome-devtools/remote-debugging

这在移动设备中提供了本地主机，因此不需要 https 或 ssl。

我认为这是测试您的 PWA 的最佳方式，我亲自使用过。