如何使用自签名 OpenSSL 证书在 HTTPS 上测试 PWA? [英] How to test PWA on over HTTPS with self-signed OpenSSL certificate?

问题描述

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

I am able to test serviceworkers over http with localhost but I would like to testg on a mobile browser. Because it is a separate device I cannot use localhost so I use the name of the PC. So now I need to use https, which is causing SSL related errors in my service worker:

未捕获(承诺)DOMException:未能为作用域注册 ServiceWorker ('https://xxx:5500/app/') 与脚本 ('https://xxx:5500/app/service_worker.js)js'):获取脚本时发生 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 certificate error occurred when fetching the script.

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

I have properly configured liveServer to use self-signed certs and I've successfully enabled "edge://flags/#unsafely-treat-insecure-origin-as-secure" but it is not enough.

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

I'm also concerned about how to test PWA on the mobile device as I presume I cannot make use of the "unsafely" feature on mobile. I assume this is a common scenario but I am not finding any answers.

推荐答案

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

You can test your PWA on mobile via chrome developer tools: the method called remote debugging (works only for android)

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

1. open developer tools in mobile - allow usb debugging

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

connect via usb to laptop or pc

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

go to chrome dev tools open remote devices

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

set port forwarding in remote device

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

run local host in mobile chrome browser.

有关详细信息，请参阅:https://developers.google.com/web/tools/chrome-devtools/远程调试

for detailed info follow : https://developers.google.com/web/tools/chrome-devtools/remote-debugging

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

this provides localhost in a mobile devices so no need for https or ssl.

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

I think this is the best way to test your PWA, I have personally used it.

这篇关于如何使用自签名 OpenSSL 证书在 HTTPS 上测试 PWA?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！