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?
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?
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