Add to home screen functionality using javascript

Question

I want "add to home screen" functionality on button click using javascript. My first question is. Is that possible using javascript or html/css?

I have read too many post but did not find any working code. what I found is user have to do is to go to chrome menu and tab on "add to home screen" or chrome will prompt the user and ask them "add to home screen"

Answer 1

Image below shows the project structure in file explorer. A public folder has all the file is inside it. And the manifest file is outside the public folder

Next create Manifest.json and service-worker.js files as shown below:

Manifest.json

{
  "short_name": "BetaPage",
  "name": "BetaPage",
  "theme_color": "#4A90E2",
  "background_color": "#F7F8F9",
  "display": "standalone",
  "icons": [
      {  
   "src": "assets/layouts/layout2/img/icon/android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image/png",
   "density": "0.75"
  },
    {
      "src": "assets/layouts/layout2/img/icon/android-icon-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
       "src": "assets/layouts/layout2/img/icon/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image/png",
   "density": "1.5"
  },

    {
    "src": "assets/layouts/layout2/img/icon/android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image/png",
   "density": "2.0"
  },
  {
   "src": "assets/layouts/layout2/img/icon/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image/png",
   "density": "3.0"
  },
  {
   "src": "assets/layouts/layout2/img/icon/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image/png",
   "density": "4.0"
  }
  ],
  "start_url": "/index.html"
}

service-worker.js

self.addEventListener("fetch", function(event){

});

Now edit index.html and add following code in head section

<link rel="manifest" href="/manifest.json">     
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> 

In the same file put below code right before body closing

<script type="text/javascript">
 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>

Now Run your project, wait for few minute and reload your page.

ENJOY !

Answer 2

In June 2018, Google introduce Chrome 68 (still in Beta at July 2018) that allow you show a modal add to home screen dialog by catching event "beforeinstallprompt".

To trigger this event, you need:

• The web app is not already installed

• Meets a user engagement heuristic (currently, the user has interacted with the domain for at least 30 seconds)

• Web app manifest must have: short_name or name, icon, start_url, and display

• Must be https

• Has registered a service worker with a "fetch" event handler

More detail and code at: https://developers.google.com/web/updates/2018/06/a2hs-updates

Add to home screen criteria: https://developers.google.com/web/fundamentals/app-install-banners/#criteria

Answer 3

According to the Best Practices section of this page: https://developer.chrome.com/multidevice/android/installtohomescreen#best-practices

• Do not prompt the user to add your app to the homescreen. There is no way to detect if the app is running installed or not.

---

It looks like other developers have suggested that you can simply prompt the user with instructions for how to add to the homescreen, rather than try and do it directly.

---

EDIT: Doing more digging, it seems that since chrome 42, google is introducing app install banners. See: https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android

Your web app will need to meet a bunch of requirements however, including running a service worker, having your site as https, and having the user visit your site at least twice.