Como funciona a instalação de PWAs no iOS e Android

Os Progressive Web Apps (PWAs) oferecem uma maneira eficiente de entregar experiências semelhantes a apps nativos diretamente pelo navegador. A instalação de um PWA é simples no Android, mas no iOS o processo é diferente e mais limitado. Este post mostra o que é possível fazer em cada plataforma e como lidar com essas diferenças no código.

Instalação no Android

No Android, navegadores como o Chrome oferecem suporte nativo à instalação de PWAs via o evento beforeinstallprompt. Com ele, o desenvolvedor pode controlar o momento e a forma como o prompt de instalação é exibido ao usuário.

Exemplo funcional:

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  showInstallButton(); // Exiba um botão customizado para o usuário

  installButton.addEventListener('click', () => {
    deferredPrompt.prompt();
    deferredPrompt.userChoice.then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('Usuário aceitou a instalação');
      } else {
        console.log('Usuário recusou a instalação');
      }
      deferredPrompt = null;
    });
  });
});

Esse controle permite melhorar a experiência do usuário e integrar a instalação ao fluxo da aplicação.

Instalação no iOS

No iOS, PWAs só podem ser instalados manualmente pelo Safari. O usuário deve tocar no ícone de compartilhamento e, em seguida, escolher “Adicionar à Tela de Início”. Não há evento programável como beforeinstallprompt, e nenhum navegador fora o Safari permite essa instalação.

Como detectar e orientar o usuário

A alternativa no iOS é detectar que o PWA está sendo acessado via Safari e exibir instruções visuais personalizadas.

const isIos = /iphone|ipad|ipod/.test(window.navigator.userAgent.toLowerCase());
const isInStandaloneMode = ('standalone' in window.navigator) && window.navigator.standalone;

if (isIos && !isInStandaloneMode) {
  // Mostrar instruções personalizadas para o usuário
}

Com base nisso, você pode exibir um banner simples orientando o usuário a instalar o app:

“Para instalar este app, toque no botão de compartilhar do Safari e selecione ‘Adicionar à Tela de Início’.”

Suporte a notificações push no iOS

Desde o iOS 16.4, o Safari permite que PWAs instalados na tela de início usem notificações push. No entanto, isso exige que o PWA esteja de fato instalado e que o usuário permita explicitamente as notificações.

Conclusão

Enquanto o Android oferece uma API completa para gerenciar a instalação de PWAs, o iOS ainda limita esse controle ao usuário, exigindo abordagens alternativas com mensagens visuais. Mesmo com restrições, é possível criar boas experiências multiplataforma com PWAs, contanto que as limitações sejam tratadas de forma clara e adaptativa.