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.

I could see you have start URL in the manifest pointing to /. Which will be the root path of your web app. Unless you provide the folder structure of your files and URL, nothing that we can help in specific. — Anand

asiop asiop · Accepted Answer · 2018-10-01T18:37:36

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.

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

4 Answers