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 th

Answer 1

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.

Answer 2

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 3

I found this detailed article on Medium. How to add “Add to Homescreen” popup in web app

Step 1: Create a blank service-worker.js file in your root folder. And put the below code in your html page, before closing tag.

<script>
 if ('serviceWorker' in navigator) {
    console.log("Will the service worker register?");
    navigator.serviceWorker.register('service-worker.js')
      .then(function(reg){
        console.log("Yes, it did.");
     }).catch(function(err) {
        console.log("No it didn't. This happened:", err)
    });
 }
</script>

Step 2: Create manifest file create manifest.json file in root folder. Add below tag in your html page header section.

<link rel="manifest" href="/manifest.json">

Step 3: Add configurations in manifest file Here is the configurations sample.

{
  "short_name": "BetaPage",
  "name": "BetaPage",
  "theme_color": "#4A90E2",
  "background_color": "#F7F8F9",
  "display": "standalone",
  "icons": [
    {
      "src": "assets/icons/launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "assets/icons/launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "assets/icons/launcher-icon-3x.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "assets/icons/launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/?utm_source=launcher"
}

In the above code, you can replace your own values.

short_name: This name is visible on Homescreen along app icon.

icons: Set different size icons for different screen sizes

theme_color: This color code will change the color of addresser in chrome.

background_color: Set background color for splash screen.

name : Full name of the application.

You can validate your manifest here at https://manifest-validator.appspot.com

Answer 4

In your service worker js file have this single line.

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