IU de instalação de PWA mais avançada

Introdução

Os dispositivos móveis e a introdução de app stores de fornecedores de dispositivos mudaram o modelo mental dos usuários de como descobrir, avaliar e instalar softwares. Agora, os usuários estão tão familiarizados com as app stores e com as outras informações fornecidas por elas, como contexto sobre o app, feedback social, avaliações etc. que a metáfora da app store aparece nos sistemas operacionais de computadores, incluindo ChromeOS, Mac e Windows.

Desafio com as plataformas de instalação atuais

Atualmente, se um usuário quiser instalar um PWA, uma barra de informações e uma sobreposição modal aparecerão com o mínimo de informações. Se a instalação continuar, o processo terminará rápido demais e não oferecerá contexto ao usuário. Isso vai contra as expectativas deles quanto à instalação de apps e pode deixá-los um pouco confusos sobre o que aconteceu.

Um exemplo de interface de instalação de PWA.
Um exemplo da interface de instalação do PWA.

Para permitir que os desenvolvedores ofereçam experiências de instalação equivalentes às nativas, o Chrome está introduzindo uma nova plataforma de instalação, o Richer Install, que permite que os desenvolvedores adicionem uma descrição e capturas de tela ao arquivo de manifesto e façam com que ele apareça em uma caixa de diálogo de página inferior no Chrome para Android.

Exemplo de interface da página inferior no Chrome.
Exemplo de interface da página inferior no Chrome.

Isso dá aos desenvolvedores a oportunidade de criar um processo de instalação mais atraente, que se alinha melhor às expectativas do usuário e que imita o modelo mental atual de experiências instaladas.

Interface de instalação mais avançada expandida.
Interface de instalação mais avançada expandida.
Interface de instalação mais avançada recolhida.
Interface de instalação mais avançada recolhida.

Compatibilidade com versões anteriores

Os sites que não incluem pelo menos uma captura de tela no arquivo de manifesto vão continuar recebendo as solicitações atuais. Isso pode mudar no futuro, dependendo da aceitação da comunidade de desenvolvedores e da reação dos usuários.

Como visualizar a interface

Essa interface funciona no Chrome 94 no Android e no Chrome 108 no computador.

Esse recurso está ativado em squoosh.app e pode ser visualizado lá.

Implementação

Para mostrar a caixa de diálogo de instalação mais avançada, os desenvolvedores precisam adicionar pelo menos uma captura de tela do formato correspondente na matriz screenshots. O campo description não é obrigatório, mas é recomendado. A caixa de diálogo é criada usando o conteúdo dos campos screenshots e description para tornar a experiência mais semelhante a uma instalação de app store. Essa interface ajuda os usuários a identificar que estão adicionando um app ao dispositivo e, com mais espaço disponível, os desenvolvedores podem fornecer contexto específico aos usuários no momento da instalação.

Por exemplo, os desenvolvedores podem usar o campo description para destacar os recursos do app que incentivam o usuário a mantê-lo nos dispositivos e, com o screenshots, podem apresentar a aparência do app da Web como independente, com todo o acesso fácil que os apps de plataforma têm.

Para conferir especificações detalhadas e um guia sobre como adicionar esses recursos ao app, acesse o padrão de interface de instalação mais avançada (link em inglês).

Feedback

No futuro, consideraremos adicionar outros dados, como categorias e classificação do app, mas isso será baseado no feedback de desenvolvedores e usuários.

Nos próximos meses, adoraríamos ver como os desenvolvedores estão explorando esse novo padrão de interface e adoraríamos receber seu feedback. Para entrar em contato com nossa equipe, preencha este formulário.