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

user_485183 0
Viewed 5258

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.

progressive-web-apps openssl self-signed android
3 Answers

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.

user_123334300

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)

user_54139040

A very simple solution is to install Termux on your Android phone, then use socat to port-forward from a local port to your development host:

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

This will run in the background while the terminal is open. Then in Chrome you can connect over plain HTTP to http://127.0.0.1:8000 and you should get the "Add x to Home screen" notice.

Works great over the local network and no certs, apps or services needed.

user_3638360
Related