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 port8080
- 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
- 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
- go to
- 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