Serve PWA on local network without showing or disabling unsecured connection warning?

Question

Goal

serve a PWA (progressive web application) build using Vuetify (VueJS) on a local network without showing or disabling unsafe network warning

Setup

• PWA is built (dist) and ready to deploy
• The device is serving a shared Wi-Fi network (10.42.0.1 no internet) to which a tablet is connected

Steps Taken:

• http-server dist serve the PWA on the device on port 8080
• open chrome on tablet and go to 10.42.0.1:8080

Result

• the application works but I get a warning message Your connection to this site is not secure which makes sense since the connection is HTTP

Desired Result

the application works without warning message about unsecured connection

Why?

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.

What I've tried

1. disable the warning in chrome
   • go to chrome://flags
   • disable Mark non-secure origins as non-secure
   • result: it's still showing the warning in both chrome and as PWA
2. add local certificate to the local server using mkcert
   • mkcert -install
   • mkcert localhost 10.42.0.1
   • http-server -S -C localhost.pem -K localhost-key.pem dist
   • access PWA on server and observe secure connection
   • result: access PWA from tablet connected to the server and still have the unsecured connection warning