Chrome native app install banner and Add to Home Screen

Question

I recently add to my web a Native app install banner of Chrome. It's working pretty well, when a user meets the specified criteria, a banner to install my app is showed.

But I would like to have the feature: Add to Home Screen too. Basically for those users which doesn't want to install the app but they could be interested on add to home screen my web.

It is posible to have both features working together?

Answer 1

Yes, you can.

There is beforeinstallprompt event, which you can intercept and delay for as long as you like (e.g. until user presses your button).

The event has a .prompt() function, which you can call to make the prompt appear when you want it.

window.addEventListener("beforeinstallprompt", ev => { 
  // Stop Chrome from asking _now_
  ev.preventDefault();

  // Create your custom "add to home screen" button here if needed.
  // Keep in mind that this event may be called multiple times, 
  // so avoid creating multiple buttons!
  myCustomButton.onclick = () => ev.prompt();
});