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

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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 Jul 16, 2018 at 21:27

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.

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

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

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://imgur.com/a/vJxfNAJ

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/

Chrome defines a few conditions for the add to home screen banner to be displayed - there are some PWA requirements but then you have to be using the site/app for some time and if you refused to add the site to the home screen at some point it can be up to 3 months before chrome offers to add it again. I think that if you get a green light from light house and can test that your prompt is triggered through the dev-tools test then you have done what it takes to get this thing going at least on chrome. Find out how well it works for your users by adding a beforeinstallprompt analytics event. – asiop Oct 16, 2018 at 6:24 I actually have spent few hours testing on the website on several occasions which actually fulfils condition for "user spending some time on website". But never got a prompt to Install. But I guess, there is more to this than just documented "user spending some time on website". – master_dodo Oct 17, 2018 at 7:52

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question . Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers .