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

2

There's an Android shortcut on iOS that adds the site to your mobile screen, as an application, how do I make a button do that?

    
asked by anonymous 17.01.2018 / 19:42

1 answer

1

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

Chrome is the only one supporting 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 ).

  • You should have a web app manifest as in this example ( the attributes are required):

    {
      "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 a onclick event to a button:

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

Other browsers have libraries to simulate this functionality: link

    
17.01.2018 / 21:36