How to get Add to Home Screen Pop up on Site Open in mobile browser

Official requirements are:

Chrome automatically displays the banner when your app meets the following criteria:

• Has a web app manifest file with:
  • a short_name (used on the home screen)
  • a name (used in the banner)
  • a 144x144 png icon (the icon declarations must include a mime type of image/png)
  • a start_url that loads
• Has a service worker registered on your site.
• Is served over HTTPS (a requirement for using service worker).
• Is visited at least twice, with at least five minutes between visits.

source: https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/

You can skip these requirements for testing or debugging purposes by enabling a chrome flag:

chrome://flags/#bypass-app-banner-engagement-checks

In your service worker js file have this single line.

self.addEventListener('fetch', function(event) {});

You need to have the following to show a manifest file.

1. You should have a web app manifest file with:

   1. short_name - its used on the home screen just below the icon.
   2. name - full name of your app
   3. icon - logo/icon of at least 192x192 png icon (the icon declarations must include a mime type of image/png)
   4. start_url - the page that should load when the app opens

2. You should have a service worker registered on your site.

3. Make sure your site is served over HTTPS (a requirement for using service worker).

4. And it should meet the browsers site engagement heuristic.

Now you can capture this popup and decide when you wnat to show 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();});

Look at beforeinstallprompt event, which you can intercept and put on hold.

This event has a method called .prompt(), which allows you to make the popup appear at will.