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.

Solution 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

Solution 2

In your service worker js file have this single line.

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

Solution 3

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.

Solution 4

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

Solution 5

I struggled adding A2HS option for hours, and by God's grace this is how I did:

Based on this criteria, you will have to make sure:

• The web app is not already installed
• Meets a user engagement heuristic
• Be served over HTTPS
• Includes a Web App Manifest that includes:
  • short_name or name
  • icons - must include a 192px and a 512px icon
  • start_url
  • display - must be one of fullscreen, standalone, or minimal-ui
  • Registers a service worker with a functional fetch handler

Web App Manifest:

Create a manifest.webmanifest file and add something similar to:

{
    "short_name":"AskGod",
    "name":"AskGod",
    "start_url":"/askgod/",
    "display":"standalone",
    "theme_color":"#007bff",
    "background_color":"#ffffff",
    "icons": [
      {
       "src": "/icons/android-icon-36x36.png",
       "sizes": "36x36",
       "type": "image/png",
       "density": "0.75"
      },
      {
       "src": "/icons/android-icon-48x48.png",
       "sizes": "48x48",
       "type": "image/png",
       "density": "1.0"
      },
      {
       "src": "/icons/android-icon-72x72.png",
       "sizes": "72x72",
       "type": "image/png",
       "density": "1.5"
      },
      {
       "src": "/icons/android-icon-96x96.png",
       "sizes": "96x96",
       "type": "image/png",
       "density": "2.0"
      },
      {
       "src": "/icons/android-icon-144x144.png",
       "sizes": "144x144",
       "type": "image/png",
       "density": "3.0"
      },
      {
       "src": "/icons/android-icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "density": "4.0"
      },
      {
        "src": "/icons/android-icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png",
        "density": "4.0"
       }
     ]
 }

For generation of icons I used favicon-generator , it doesn't give 512x512 image, so I used another site to get 512x512 image

start_url depends on your base url, for example, if you website url is fawazahmed0.github.io/ then your start_url will be:

"start_url":"/

if your url is fawazahmed0.github.io/askgod, then your start_url will be:

"start_url":"/askgod/

In your HTML code link your Web Manifest file:

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

Service Worker:

create a file named service-worker.js and add the below code:

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

At your javascript code add below code:

// Register Service worker for Add to Home Screen option to work
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') }

Now you should see the Add To Home Screen Option, in case you don't see it, then open chrome Devtools and run lighthouse report for your site, and you should make sure that the website has passed all the Installable criteria under PWA section.

A working demo with A2HS option: AskGod

View more solutions

Comments

[Dhaval Parmar]

check this links developer.chrome.com/multidevice/android/installtohomescreen and developers.google.com/web/updates/2015/03/…

[Ila]

Why we have to create a blank js file? Please state your answer clear. This is knowledge sharing portal not a tutorial site.

[MitchellK]

That fixed it for me, many thanks, wonder why this is not documented in Google's docs?

[kaushalparik27]

copy... and paste your comment to every thread of stackoverflow where answerer has provided detailed steps to a problem for solution.

[Ana DEV]

Great answer @aWebDeveloper, thanks work like a charm :)

[Mike]

This event has a method called .prompt(), which allows you to make the popup appear at will. That's if you stay on the same page, yes? What if I wish to stash that event until a certain point in my web application? When they hit the cart, e.g.?

[john Smith]

better use register('/service-worker.js') so worker can be found absolute

[NorthStarCode]

I have been fighting with this stupid add to homescreen thing for 4 days. THIS is what finally fixed it. Thank you so much @imsinu9!!!

[Binh Nguyen]

thanks for great help.. this save me after 3 days digging internet, wonder why not in the google develop document !! they mentioned it but not detail ..

[user2060451]

So all we need is this single line script? No manifest, nothing else?

[RSD]

@aWebDeveloper How to create our own custom button? I want to create a popup and I want to ask the user that if he wants to subscribe or not? If he want to subscribe user clicks on our custom subscribe button if he dont he will click on cancel button... <div class="modal-dialog"> <div class="modal-content"> <div class="modal-head"> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button">Close</button> <button type="button" >Save changes</button> </div> </div> </div>

[aWebDeveloper]

plz ask as a separate question. This is nothing but a HTML/CSS question. In my example myCustomButton is the reference to the button

[Dimitri Kopriwa]

Can we show the prompt later ?