Is it possible to create a button that makes the person add the site on the mobile screen?

Question

There is in Android and iOS a shortcut that adds the site on your mobile screen, as an app, has how I make a button that does this?

Answer 1

Yes. But it depends on the implementation of the service worker browsers (see here) and the support for web manifests.

Chrome is the only one to support both:

• The site must have been visited more than once, more than 5 minutes apart.

• Register a service worker:

  if ('serviceWorker' in navigator) {
    console.log("Will the service worker register?");
    navigator.serviceWorker.register('service-worker.js')
      .then(function(reg){
        console.log("Service worker registrado.");
      });
  }
  

• The site should be HTTPS (because of service worker).

• Must have a web app manifesto as in this example (attributes are mandatory):

  {
    "short_name": "AirHorner",
    "name": "Kinlan's AirHorner of Infamy",
    "icons": [
      {
        "src": "launcher-icon-1x.png",
        "type": "image/png",
        "sizes": "48x48"
      },
      {
        "src": "launcher-icon-2x.png",
        "type": "image/png",
        "sizes": "96x96"
      },
      {
        "src": "launcher-icon-4x.png",
        "type": "image/png",
        "sizes": "192x192"
      }
   ],
   "start_url": "index.html?launcher=true"
  }
  

You can add an event onclick on a button:

window.addEventListener("beforeinstallprompt", ev => { 
  ev.preventDefault();
  addHomeScreenBotao.onclick = () => ev.prompt();
});

---

For other browsers have libraries to simulate this functionality: https://github.com/cubiq/add-to-homescreen