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

Question

How to get this pop up in mobile browser "Add to home" will create icon of chrome on home screen of mobile with site link on mobile.

Please suggest the solution.

Answer 1

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

Answer 2

In your service worker js file have this single line.

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