title: Can not debug service-worker on an Android phone
body: <p>I have a web app with service worker that is served from my Desktop, and I want to debug on an Android phone (Pixel3).<br/>
  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!.<br/></p>
  <p><strong>But on the phone, I cannot get the secured padlock to show up.</strong><br/>
  (I can debug the web app by connecting the phone via USB cable, selecting <em>inspect</em> for the required tab, for the Pixel 3 XL device, in <code>chrome://inspect/#devices</code>, and interact with the page on Chrome on the phone and see the changes on the Desktop, but cannot get the secured padlock).</p>
  <p>To satisfy the secured connection, I tried to do the following things:</p>
  <ul>
  <li><p>follow the instructions for <a href="https://michielsioen.be/2019-11-23-the-pwa-experiment-pt2-debugging/" rel="nofollow noreferrer">debugging on device</a></p>
  </li>
  <li><p>install the self-trusted CA on the phone using the instructions <a href="https://aboutssl.org/how-to-create-and-import-self-signed-certificate-to-android-device/" rel="nofollow noreferrer">here</a> and <a href="https://stackoverflow.com/questions/50911518/debug-service-worker-with-chrome-on-android-mobile">here</a><br/>
  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 <code>Security -&gt; Install certificates -&gt; myCA.pem</code>, and verified that it is installed in <code>Trusted credentials -&gt; User -&gt; myCA</code>)</p>
  </li>
  <li><p>set up port forwarding in chrome devtools, and access the web site via <em>localhost</em> using instructions from <a href="https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server" rel="nofollow noreferrer">here</a> and <a href="https://stackoverflow.com/questions/34160509/options-for-testing-service-workers-via-http/43426714#43426714">here</a>.<br/></p>
  <ol>
  <li>on chrome devtools I set port forwarding via <code>chrome://inspect/#devices -&gt; port forwarding -&gt; 8086 localhost:443</code><br/></li>
  <li>on the phone I set proxy via <code>Network and Internet -&gt; Wi-Fi -&gt; current network -&gt; Proxy -&gt; Manual -&gt; Proxy hostname: localhost, Proxy port: 8086</code><br/></li>
  <li>on the phone I open the page <a href="http://localhost:8086" rel="nofollow noreferrer">localhost:8086</a>, <a href="http://%3Cbr/%3E" rel="nofollow noreferrer">https:\\localhost:8086</a> (the page shows up with insecure padlock warning)<br/> <strong>the page shows up with insecure padlock warning</strong><br/></li>
  <li>(on the desktop <a href="https://localhost" rel="nofollow noreferrer">https://localhost</a> shows the secure padlock)<br/></li>
  </ol>
  </li>
  <li><p>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: <em>mydomain</em>, following the instructions in <a href="https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server" rel="nofollow noreferrer">here</a></p>
  <ol>
  <li>on chrome devtools I set port forwarding via <code>chrome://inspect/#devices -&gt; port forwarding -&gt; 8086 mydomain:443</code><br/></li>
  <li>on the phone I set proxy via <code>Network and Internet -&gt; Wi-Fi -&gt; current network -&gt; Proxy -&gt; Manual -&gt; Proxy hostname: localhost, Proxy port: 8086</code><br/></li>
  <li>on the phone I open the page <a href="http://mydomain:8086" rel="nofollow noreferrer">localhost:8086</a>, <a href="http://https:%5C%5C%5C%5Clocalhost:8086" rel="nofollow noreferrer">https:\\localhost:8086</a><br/> <strong>the page shows up with insecure padlock warning</strong><br/></li>
  <li>(on the desktop <a href="http://mydomain" rel="nofollow noreferrer">https://mydomain</a> shows the secure padlock)<br/></li>
  </ol>
  </li>
  <li><p>loosen the requirements for secured connection on the phone by setting:<br/></p>
  <ol>
  <li><p><code>chrome://flags/#allow-insecure-localhost</code> to <em>Enabled</em><br/></p>
  </li>
  <li><p><code>chrome://flags/#insecure origins treated as secure</code> to <em>Enabled</em> with:<br/> <code>http://192.168.1.74, http://mydomain, http://localhost</code><br/>
  (the flag <code>#insecure origins treated as secure</code> doesn't even help when running on the Desktop, and I'm getting an error like:
  <code>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</code>.</p>
  </li>
  </ol>
  </li>
  </ul>
  <p><strong>None of these help. In the chrome tab on the phone I keep seeing the triangle icon for insecure connection.</strong></p>
  <p><em>Desktop:</em> Ubuntu 18.04, Chrome Version 83.0.4103.61<br/>
  <em>Pixel 3 XL:</em> Chrome: 83.0.4103.106, Android version 10</p>
  <p>Thanks<br/>
  Avner</p>