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

Question

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:

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.

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.

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.

Answer 1

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

1. open developer tools in mobile - allow usb debugging

2. connect via usb to laptop or pc

3. go to chrome dev tools open remote devices

4. set port forwarding in remote device

5. run local host in mobile chrome browser.

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

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

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

Answer 2

Another working solution than is to use ngrok which will create a live https-server for the project you want (and then you'll be able to access it on your mobile device)