title: Serve PWA on local network without showing or disabling unsecured connection warning?
body: <h1>Goal</h1>
  
  <p>serve a PWA (progressive web application) build using Vuetify (VueJS) on a local network without showing or disabling <code>unsafe network</code> warning</p>
  
  <h1>Setup</h1>
  
  <ul>
  <li>PWA is built (<code>dist</code>) and ready to deploy</li>
  <li>The device is serving a shared Wi-Fi network (10.42.0.1 no internet) to which a tablet is connected</li>
  </ul>
  
  <h1>Steps Taken:</h1>
  
  <ul>
  <li><code>http-server dist</code> serve the PWA on the device on port <code>8080</code></li>
  <li>open chrome on tablet and go to <code>10.42.0.1:8080</code></li>
  </ul>
  
  <h1>Result</h1>
  
  <ul>
  <li>the application works but I get a warning message <code>Your connection to this site is not secure</code> which makes sense since the connection is HTTP</li>
  </ul>
  
  <h1>Desired Result</h1>
  
  <p>the application works <em>without</em> warning message about <code>unsecured connection</code></p>
  
  <h1>Why?</h1>
  
  <p>when the PWA is added to the homescreen and started as a PWA, this warning turns into a full block that spans the entire screen taking up screen space of the App.</p>
  
  <h1>What I've tried</h1>
  
  <ol>
  <li>disable the warning in chrome
  
  <ul>
  <li>go to <code>chrome://flags</code></li>
  <li>disable <code>Mark non-secure origins as non-secure</code></li>
  <li>result: it's still showing the warning in both chrome and as PWA</li>
  </ul></li>
  <li>add local certificate to the local server using <code>mkcert</code>
  
  <ul>
  <li><code>mkcert -install</code></li>
  <li><code>mkcert localhost 10.42.0.1</code></li>
  <li><code>http-server -S -C localhost.pem -K localhost-key.pem dist</code></li>
  <li>access PWA on server and observe secure connection</li>
  <li>result: access PWA from tablet connected to the server and still have the <code>unsecured connection</code> warning</li>
  </ul></li>
  </ol>