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

How to test PWA on over HTTPS with self-signed OpenSSL certificate?

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

未捕获（承诺）DOMException：无法为范围注册 ServiceWorker（'https://xxx:5500/app/') with script ('https://xxx:5500/app/service_worker.js'）：获取脚本时发生 SSL 证书错误。

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

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

您可以通过 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 的最好方法，我亲自使用过它。

另一个可行的解决方案是使用 ngrok，它将为您想要的项目创建一个实时 https 服务器（然后您就可以在您的移动设备上访问它）

一个非常简单的解决方案是在您的 Android phone 上安装 Termux，然后使用 socat 从本地端口转发到您的开发主机： 

socat tcp-l:8000,fork,reuseaddr tcp:192.168.1.170:8000

这将在终端打开时 运行 在后台运行。然后在 Chrome 中，您可以通过纯 HTTP 连接到 http://127.0.0.1:8000，您应该会收到“将 x 添加到主屏幕”通知。

在本地网络上运行良好，无需证书、应用程序或服务。