Manifest: beforeinstallprompt not fire

[vsuperator]

I want to add to my app "Add To home screen banner", I went through the manual
https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/#testing-the-app-install-banner
First I registered a sw in my index.html file

        navigator.serviceWorker.register('service-worker.js')
                .then(() => {
                  console.log('Service worker successfully registered.');
                })
                .catch(err => console.log("There is an error registering SW."))

Then I made a manifest file

{
  "short_name": "myapp",
  "name": "myapp",
  "icons": [
    {
      "src":"/img/logo-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src":"/img/logo-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src":"/img/logo-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/dashboard/day",
  "background_color": "#ffffff",
  "theme_color": "#536878",
  "display": "standalone"
}

Also I added eventListener in order to call prompt() in another place

window.addEventListener('beforeinstallprompt', (event) => {
                    console.log('beforeinstallprompt fired index'); // It doesn't show at all
                  });

So it work's if I fire an event manually. But when I launch the site (served on https) from mobile devices it doesn't work.
Is it a bug? Or am I doing smth wrong?

[marcoscaceres]

@vsuperator, check if your app meets the criteria with for a PWA with:

https://developers.google.com/web/tools/lighthouse/

I think you can also use Chrome's dev tools to trigger an install prompt on mobile (which should fire the event). I can't see anything wrong with the above.

Let us know how you go!

[mgiuca]

Thanks for the report. In the future, you should report issues like this to the browser's issue tracker (I assume you're using Chrome; if so, https://crbug.com/new). Please only report issues here if you think there is a problem with the spec (or the API design), as opposed to something that isn't working in the browser.

Closing. Feel free to open a new Chrome bug if you can't find anything wrong in Lighthouse.

[mgiuca]

(PS. I think I know what the problem is: as of recent versions of Chrome, your service worker is required to have a fetch handler so it can work offline. Lighthouse would tell you this.)

[Lukortech]

Hi!
I've gotten into similiar issue and that's what chrome has to say about the App.
Green checks all the way but no prompt in sight.

[dominickng]

@Lukortech please open a bug at https://crbug.com/new citing the URL of your site and what Chrome says in the DevTools > Application > Manifest page.

A screenshot of Lighthouse output isn't very helpful for debugging purposes. And as Matt said, you should only post something here if you think there is something wrong with the spec or API design rather than the implementation in a browser.

[Lukortech]

Okay, I will open a bug report and if you'd be so kind to tell me how would
you approach debugging lack of the 'beforeinstallprompt' event.
I've travelled around the internet and found no helping advice regarding PWA and
I am lost on why all the green checks if they mean nothing.

Should I reach out to chrome devs and ask to establish more bullet points so I can be sure
my app is 'good to go'?

EDIT: submitted a bug https://bugs.chromium.org/p/chromium/issues/detail?id=1042612. Let me know if I can improve it in any way.

[alancutter]

In Chrome DevTools go to the application tab, it should tell you reasons why the site is not considered promotable for installation by Chrome. In the case of https://globloc.pl/ it's because the service worker doesn't serve offline content in a fetch handler.

[alancutter]

There's a bit more to the lighthouse report for that site as well that indicates the need for an offline page.

[stephaneeybert]

@alancutter I never knew the Chrome DevTools's Application tab could tell me the reasons why my web site is not considered prompt-able for installation by Chrome. I opened this tab and could not find such a reason in there. Does that mean it is prompt-able ?
My PWA is there.
UPDATE: I found an answer to my question.

[alancutter]

DevTools says no matching service worker. I think the SW scope is smaller than the app scope.

[stephaneeybert]

@alancutter That's a message puzzling me. For an Audit confirms the presence of a service worker.

[stephaneeybert]

@alancutter I fixed that message with changing the scope property in the manifest.json file from "scope": "/" to "scope": "./" and in the index.html file changing the <base> element from <base href="/"> to <base href="./"> and the message was then gone.