Existe no Android e no iOS um atalho que adiciona o site em sua tela do celular, como um aplicativo, tem como eu fazer um botão que faça isso?
1 Resposta
Sim. Mas depende da implementação dos navegadores do service worker (ver aqui) e do suporte a manifestos web.
O Chrome é o único a dar suporte a ambos:
O site deve ter sido visitado mais de uma vez, com mais de 5 minutos de diferença.
Registre um
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."); }); }
Os site dever ser HTTPS (por causa do
service worker
).Deve ter um manifesto web app como nesse exemplo (os atributos são obrigatórios):
{ "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" }
Você pode adicionar um evento onclick
em um botão:
window.addEventListener("beforeinstallprompt", ev => {
ev.preventDefault();
addHomeScreenBotao.onclick = () => ev.prompt();
});
Para outros navegadores tem bibliotecas para simular essa funcionalidade: https://github.com/cubiq/add-to-homescreen