Search code examples
javascriptmobileprogressive-web-appslighthouse

What is wrong with this Lighthouse audit? Can I install a PWA from http://localhost

I have a PWA that passes the Lighthouse audit on Chrome for an installable PWA but I never get prompted to install it and the "beforeinstallprompt" event never fires. Just checked Opera and that doesn't ask me to install either :-(

I am developing/debugging with http://localhost, which seems suitable for other tests, could this be the problem? I want to test my bespoke install prompt locally before deployment.

Manifest: -

{
  "short_name": "Brotkrumen",
  "name": "Brotkrumen Web App",
  "description": "Native Background Geolocation POC",
  "icons": [
    {
      "src": "gingerbreadhouse.png",
      "sizes": "48x48 128x128 144x144 192x192 512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "gingerbreadhouse.png",
      "sizes": "48x48 128x128 144x144 192x192 512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "start_url": "/travelmanager.html",
  "background_color": "#00ccdd",
  "theme_color": "#00ccdd",
  "display": "fullscreen"
}

Lighthouse Audit: -

enter image description here

Edit 1

Please Note: - The https://github.com/RichardMaher/Brotkrumen repository can be cloned by anyone! Just stick it in a internet facing folder/directory and go for "https://your.domain/TravelManager.html" You'll need a Google Maps API key to use the maps and at least a couple of GPS readings before you can press "Arrive".

NB: With Edge I do get prompted to install via the beforeinstall event https://github.com/RichardMaher/Brotkrumen/blob/master/TravelManager.html Line# 117 but not Chrome

@Fawaz are you sure you haven;t added chrome://flags/#bypass-app-banner-engagement-checks ? It's just that I've invoke your web-site multiple times and it hasn't asked me to install. Have you tried Chrome on another PC?

Edit 2

School boy error :-( Pretty sure I cleared my BrotkrumenV1 cache before it "magically" started working. Coincidence? I think not.

Solution

  • I do see Add to homescreen on http://localhost (I tested on Desktop chrome browser, and it shows install App option)

    This is the build code for my App.

    Also this might be relevant to you.