ssl - Can not debug service-worker on an Android phone

Question

I have a web app with service worker that is served from my Desktop, and I want to debug on an Android phone (Pixel3).
On the desktop I installed a self-trusted CA to satisfy the secured connection (https), and the page shows up with the secured padlock - good!.

But on the phone, I cannot get the secured padlock to show up.
(I can debug the web app by connecting the phone via USB cable, selecting inspect for the required tab, for the Pixel 3 XL device, in chrome://inspect/#devices, and interact with the page on Chrome on the phone and see the changes on the Desktop, but cannot get the secured padlock).

To satisfy the secured connection, I tried to do the following things:

• follow the instructions for debugging on device

• install the self-trusted CA on the phone using the instructions here and here
  I installed the self-trusted CA myCA.pem (this is the same self-trusted CA that signs the web site certificate that is used on the Desktop, via Security -> Install certificates -> myCA.pem, and verified that it is installed in Trusted credentials -> User -> myCA)

• set up port forwarding in chrome devtools, and access the web site via localhost using instructions from here and here.
  

  1. on chrome devtools I set port forwarding via chrome://inspect/#devices -> port forwarding -> 8086 localhost:443
     
  2. on the phone I set proxy via Network and Internet -> Wi-Fi -> current network -> Proxy -> Manual -> Proxy hostname: localhost, Proxy port: 8086
     
  3. on the phone I open the page localhost:8086, https:\localhost:8086 (the page shows up with insecure padlock warning)
     the page shows up with insecure padlock warning
     
  4. (on the desktop https://localhost shows the secure padlock)
     

• set up port forwarding in chrome devtools, configure proxy settings on your device, map to custom local domains, and access the web site via custom domain: mydomain, following the instructions in here

  1. on chrome devtools I set port forwarding via chrome://inspect/#devices -> port forwarding -> 8086 mydomain:443
     
  2. on the phone I set proxy via Network and Internet -> Wi-Fi -> current network -> Proxy -> Manual -> Proxy hostname: localhost, Proxy port: 8086
     
  3. on the phone I open the page localhost:8086, https:\localhost:8086
     the page shows up with insecure padlock warning
     
  4. (on the desktop https://mydomain shows the secure padlock)
     

• loosen the requirements for secured connection on the phone by setting:
  

  1. chrome://flags/#allow-insecure-localhost to Enabled
     

  2. chrome://flags/#insecure origins treated as secure to Enabled with:
     http://192.168.1.74, http://mydomain, http://localhost
     (the flag #insecure origins treated as secure doesn't even help when running on the Desktop, and I'm getting an error like: DOMException: Failed to register a ServiceWorker for scope ('https://192.168.1.74/') with script ('https://192.168.1.74/sw.js'): An SSL certificate error occurred when fetching the script.

None of these help. In the chrome tab on the phone I keep seeing the triangle icon for insecure connection.

Desktop: Ubuntu 18.04, Chrome Version 83.0.4103.61
Pixel 3 XL: Chrome: 83.0.4103.106, Android version 10

Thanks
Avner

Answer 1

I was able to remote debug the web app with the service worker, on the Android phone, by using, a combination of:

• web server configuration settings:
  • disable https
  • enable serving of http, with non standard port
  • disable redirect of http to https
• set the chrome flag: Insecure origins treated as secure in Chrome on the Desktop, and in the Android phone.
  

See here for details