Chrome 67 won't fire the 'beforeinstallprompt' for my PWA

Question

I am working on an example web app that I want my users to be able to install to their chrome home screen. As far as I can tell, all of the following criteria are met:

The web app is not already installed

• Meets a user engagement heuristic (currently, the user has interacted with the domain for at least 30 seconds)

• Includes a web app manifest that includes: short_name or name

• icons must include a 192px and a 512px sized icons start_url

• display must be one of: fullscreen, standalone, or minimal-ui

• Served over HTTPS (required for service workers)

• Has registered a service worker with a fetch event handler

• hard to actually measure

• I do include a manifest:

    {
        "short_name": "React Notes",
        "name": "React Notes Sample",
        "icons": [
          {
            "src": "staticAssets/favicon.ico",
            "sizes": "64x64 32x32 24x24 16x16",
            "type": "image/png"
          },
          {
            "src": "staticAssets/icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
          },
          {
            "src": "staticAssets/icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
          }
        ],
        "start_url": "/",
        "display": "standalone",
        "theme_color": "#000000",
        "background_color": "#ffffff"
    }

• As you can see from my manifest, I'm serving icons.

• I'm using a Paid heroku dyno, so there's no reason it should be served over https

• I'm registering a service worker with a fetch handler:

  importScripts("/precache-manifest.2dbaa71ff348edf029d7ff098089b7cd.js", "/workbox-v3.3.1/workbox-sw.js"); workbox.setConfig({modulePathPrefix: "/workbox-v3.3.1"}); /* eslint-disable */

  self.__precacheManifest = [].concat(self.__precacheManifest || []); workbox.precaching.suppressWarnings(); workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

  self.addEventListener('fetch', (e) => { console.log(e); });

S, the problem that I'm running into, is that the beforeinstallprompt event is never firing for me to do anything with. I've run my app through Lighthouse at least a dozen times, and every single time I get the same error:

Failures: Service worker does not successfully serve the manifest’s start_url, No start URL to fetch: No usable web app manifest on page…

And I'm officially at a loss for why this isn't working.

Answer 1

Strangely, for me Lighthouse is showing + result for prompting user to install app. It ISN'T working on chrome 65 Android 6. Check screenshot for my Lighthouse results. https://i.sstatic.net/V0ZfW.jpg

Also, I've added scope, start_url, everything in case.

Besides, when I manually trigger "Add To Home Screen" from Dev Tool, it then prompts all fine. Sigh! already spent hours already wasting time.

It nicely prompts in firefox though.

My stack is standard gatsby v2 with 2 plugins here https://www.gatsbyjs.org/docs/progressive-web-app/

Answer 2

Best way to diagnose your issue would be by using "Audits" (lighthouse) available from the Chrome Dev Tools Audits tab.

Try to run the "Progressive Web App" mobile audit, the results should give you a clue for what needs fixing.

Answer 3

You may want to try adding a scope attribute
Looks like if that's not there, it looks @ start_url

https://www.w3.org/TR/appmanifest/#navigation-scope

My example
http://a2hs.glitch.me/manifest.json

Answer 4

First, try it on another device if possible.
Do you have a URL you could share? I could test if you like.

Using the lighthouse audit tool
Under #4 do you see "User can be prompted to Install the Web App"
Sometimes you get some errors, but it still works