Mudanças no comportamento da adição à tela inicial

Desde que lançamos o banner "adicionar à tela inicial", temos trabalhado para rotular Progressive Web Apps de forma mais clara e simplificar a maneira como os usuários podem fazer a instalação. Nosso objetivo é fornecer um botão de instalação na omnibox em todas as plataformas. No Chrome 68, estamos fazendo mudanças nessa meta.

O que está mudando?

A partir do Chrome 68 no Android (versão estável em julho de 2018), o Chrome não mostrará mais o banner "Adicionar à tela inicial". Se o site atender aos critérios de adição à tela inicial, o Chrome vai mostrar a minibarra de informações. Em seguida, se o usuário clicar na minibarra de informações ou você chamar prompt() no evento beforeinstallprompt em um gesto do usuário, o Chrome mostrará uma caixa de diálogo modal para adicionar à tela inicial.

A minibarra de informações

A minibarra de informações é um componente da IU do Chrome e não pode ser controlada pelo site, mas pode ser facilmente dispensada pelo usuário. Depois de dispensado pelo usuário, ela não vai aparecer novamente até que uma quantidade suficiente de tempo tenha passado (atualmente três meses). A minibarra de informações vai aparecer quando o site atender aos critérios de adição à tela inicial, independente de você preventDefault() no evento beforeinstallprompt ou não.

A minibarra de informações é uma experiência provisória do Chrome no Android, enquanto trabalhamos para criar uma experiência consistente em todas as plataformas, incluindo um botão de instalação na omnibox. ## Acionar a caixa de diálogo "Adicionar à tela inicial"

Em vez de solicitar ao usuário no carregamento da página (um antipadrão para solicitações de permissão), você pode indicar que seu app pode ser instalado com alguma IU, que vai mostrar a solicitação de instalação modal. Por exemplo, esse PWA para computador adiciona um botão "Instalar app" logo acima do nome do perfil do usuário.

Solicitar a instalação do app em um gesto do usuário parece menos spam para o usuário e aumenta a probabilidade de que ele clique em "Adicionar" em vez de "Cancelar". Incorporar um botão "Instalar" ao app significa que, mesmo que o usuário opte por não instalar o app hoje, o botão ainda vai estar lá amanhã ou quando ele estiver pronto para instalação.

Como detectar o evento beforeinstallprompt

Se o site atender aos critérios de adição à tela inicial, o Chrome vai disparar um evento beforeinstallprompt, salvar uma referência ao evento e atualizar a interface do usuário para indicar que o usuário pode adicionar seu app à tela inicial.

let installPromptEvent;

window.addEventListener('beforeinstallprompt', event => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

O evento beforeinstallprompt não será acionado se o app já estiver instalado. Consulte os critérios para adicionar à tela inicial. No entanto, se o usuário desinstalar o app mais tarde, o evento beforeinstallprompt será disparado novamente em cada navegação na página.

Mostrando a caixa de diálogo com prompt()

Para mostrar a caixa de diálogo "Adicionar à tela inicial", chame prompt() no evento salvo em um gesto do usuário. O Chrome vai mostrar a caixa de diálogo modal, solicitando que o usuário adicione seu app à tela inicial dele. Em seguida, detecte a promessa retornada pela propriedade userChoice do evento beforeinstallprompt. A promessa vai retornar um objeto com uma propriedade outcome depois que a solicitação for mostrada e o usuário responder a ela.

btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(choice => {
    if (choice.outcome === 'accepted') {
      console.log('User accepted the A2HS prompt');
    } else {
      console.log('User dismissed the A2HS prompt');
    }
    // Clear the saved prompt since it can't be used again
    installPromptEvent = null;
  });
});

Você só pode chamar prompt() no evento adiado uma vez. Se o usuário clicar em "Cancelar" na caixa de diálogo, será necessário aguardar até que o evento beforeinstallprompt seja disparado na próxima navegação na página. Ao contrário das solicitações de permissão tradicionais, clicar em "cancelar" não vai bloquear chamadas futuras para prompt(), porque a chamada precisa ser chamada dentro de um gesto do usuário.

Outros recursos

Confira Banners de instalação de aplicativos para mais informações, incluindo:

• Detalhes do evento beforeinstallprompt
• Rastrear a resposta do usuário ao comando para adicionar à tela inicial
• Como rastrear se o app foi instalado
• Como determinar se o aplicativo está sendo executado como um aplicativo instalado