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

Pete LePage

Desde que lançamos o banner "Adicionar à tela inicial", trabalhamos para rotular os Progressive Web Apps com mais clareza e simplificar a forma como os usuários podem instalá-los. Nosso objetivo final é fornecer um botão de instalação na omnibox em todas as plataformas. No Chrome 68, estamos fazendo mudanças para alcançar esse objetivo.

O que muda?

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

Banner A2HS Chrome 67 e versões anteriores

Mostrado automaticamente quando o site atende aos critérios de adição à tela inicial e não chama preventDefault() no evento beforeinstallprompt

OU

Mostrado ao chamar prompt() no evento beforeinstallprompt.

Miniinfobar Chrome 68 e versões mais recentes

Mostrado quando o site atende aos critérios de adição à tela inicial

Se um usuário dispensar a mensagem, ela não será mostrada até que um período suficiente (~3 meses) tenha passado.

Mostrado independente de preventDefault() ter sido chamado no evento beforeinstallprompt.

Essa interface será removida em uma versão futura do Chrome quando o botão de instalação da omnibox for lançado.

Caixa de diálogo A2HS

Mostrado ao chamar prompt() de dentro de um gesto do usuário no evento beforeinstallprompt no Chrome 68 e versões mais recentes.

OU

Mostrada quando um usuário toca na mini barra de informações no Chrome 68 e em versões mais recentes.

OU

Mostrada depois que o usuário clica em "Adicionar à tela inicial" no menu do Chrome em todas as versões do navegador.

A miniinfobox

A miniinfobar é um componente da interface do Chrome e não pode ser controlada pelo site, mas pode ser dispensada facilmente pelo usuário. Depois que o usuário dispensa a mensagem, ela não aparece mais até que um período suficiente tenha passado (atualmente, três meses). A miniinfobar vai aparecer quando o site atender aos critérios de adição à tela inicial, independente de você preventDefault() no evento beforeinstallprompt ou não.

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

Pedir para instalar o app em um gesto do usuário parece menos spam 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 escolha não instalar o app hoje, o botão ainda estará lá amanhã ou quando ele estiver pronto para instalar.

Detectar o evento beforeinstallprompt

Se o site atender aos critérios de adição à tela inicial, o Chrome vai acionar um evento beforeinstallprompt, salvar uma referência a ele e atualizar a interface do usuário para indicar que o usuário pode adicionar o 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 de adição à tela inicial). No entanto, se o usuário desinstalar o app depois, o evento beforeinstallprompt será disparado novamente em cada navegação de página.

Como mostrar a caixa de diálogo com prompt()

Para mostrar a caixa de diálogo "Adicionar à tela inicial", chame prompt() no evento salvo de dentro de um gesto do usuário. O Chrome vai mostrar a caixa de diálogo modal, pedindo que o usuário adicione seu app à tela inicial. Em seguida, aguarde a promessa retornada pela propriedade userChoice do evento beforeinstallprompt. A promessa retorna um objeto com uma propriedade outcome depois que a solicitação é mostrada e o usuário responde 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 esperar até que o evento beforeinstallprompt seja acionado na próxima navegação de página. Ao contrário das solicitações de permissão tradicionais, clicar em "Cancelar" não bloqueia chamadas futuras para prompt(), porque essa chamada precisa ser feita dentro de um gesto do usuário.

Outros recursos

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

• Detalhes do evento beforeinstallprompt
• Rastrear a resposta do usuário ao pedido de adicionar à tela inicial
• Rastreamento para saber se o app foi instalado.
• Como determinar se o app está sendo executado como um app instalado