3

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
LinG
  • 235
  • 3
  • 9
  • Are you asking if you can have a PWA on an HTTP URL? The answer is no. HTTPS is required for a valid PWA. You will need to buy a cert. – Mathias Oct 14 '19 at 11:42
  • @Mathias can you define "valid"? All the functionality of my PWA works as intended on the local network, the only thing that's bothering me is the warning taking up screen space in chrome. So you're saying the only option is to get a certificate for HTTPS, but there is no way to turn this warning off? – LinG Oct 14 '19 at 13:05
  • 1
    HTTPS is not optional. That requirement is removed for local development/testing. – Mathias Oct 14 '19 at 13:32
  • If you run the Chrome Lighthouse test on your deployed URL, it will tell you of any issues you may need to fix. – Mathias Oct 14 '19 at 13:38

0 Answers0