2

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?

0

1 Resposta 1

1

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .