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

Pete LePage

Desde o lançamento do banner "Adicionar à tela inicial", trabalhamos para rotular os Progressive Web Apps de forma mais clara e simplificar a forma como os usuários podem instalá-los. Nosso objetivo é oferecer um botão de instalação no 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 de 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 se você chamar prompt() no evento beforeinstallprompt de dentro de um gesto do usuário, o Chrome vai mostrar uma caixa modal para adicionar à 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 chamando prompt() no evento beforeinstallprompt.

Minibarra de informações Chrome 68 e versões mais recentes

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

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

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

Esse tratamento da interface será removido em uma versão futura do Chrome quando o botão de instalação da omnibox for introduzido.

Caixa de diálogo A2HS

Mostrado chamando prompt() em um gesto do usuário no evento beforeinstallprompt no Chrome 68 e versões mais recentes.

OU

Aparece quando um usuário toca na minibarra de informações no Chrome 68 e versões mais recentes.

OU

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

A minibarra de informações

A minibarra de informações é um componente da interface do Chrome e não pode ser controlada pelo site, mas pode ser facilmente dispensada pelo usuário. Depois de dispensada pelo usuário, ela não vai aparecer novamente até que um tempo suficiente tenha passado (atualmente, 3 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.

Em vez de solicitar ao usuário no carregamento da página (um antipadrão para solicitações de permissão), é possível indicar que o app pode ser instalado com alguma interface, que vai mostrar o comando 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.

O comando para instalar o app em um gesto do usuário parece menos spam para o usuário e aumenta a probabilidade de ele clicar em "Adicionar" em vez de "Cancelar". A incorporação de um botão "Instalar" no app significa que, mesmo que o usuário opte por não instalar o app hoje, o botão ainda estará lá amanhã ou sempre que 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 mais tarde, 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 dentro de 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. Em seguida, ouça a promessa retornada pela propriedade userChoice do evento beforeinstallprompt. A promessa retorna um objeto com uma propriedade outcome depois que o comando é mostrado e o usuário responde a ele.

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;
  });
});

Só é possível 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 ela precisa ser chamada em um gesto do usuário.

Outros recursos

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

• Detalhes sobre o evento beforeinstallprompt
• Como acompanhar a resposta do usuário à solicitação de adição à tela inicial
• Como acompanhar se o app foi instalado
• Como determinar se o app está sendo executado como um app instalado