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



我可以使用localhost通过http测试serviceworker,但我想在移动浏览器上进行测试。因为它是一个单独的设备,我不能使用localhost,所以我使用PC的名称。所以现在我需要使用https,这会在我的服务人员中导致与SSL相关的错误:

未捕获(承诺中(DOMException:未能为作用域('注册ServiceWorkerhttps://xxx:5500/app/'(和脚本('https://xxx:5500/app/service_worker.js'(:获取脚本时发生SSL证书错误。

我已将liveServer正确配置为使用自签名证书,并且已成功启用"edge://flags/#unsafely-将不安全的来源视为安全",但这是不够的。

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

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

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

  2. 通过usb连接到笔记本电脑或pc

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

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

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

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

这在移动设备中提供了localhost,因此不需要https或ssl。

我认为这是测试你的PWA的最好方法,我个人已经用过了。

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

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

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

这将在终端打开时在后台运行。然后在Chrome中,您可以通过普通HTTP连接到http://127.0.0.1:8000;将x添加到主屏幕";注意

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

最新更新