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

Adriana Jara
Adriana Jara

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, feedback social, classificações etc., que você vê a metáfora da app store surgindo nos sistemas operacionais para computadores, incluindo ChromeOS, Mac e Windows.

Desafiar 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 são exibidas com o mínimo de informações. Se a instalação continuar, o processo terminará muito rápido, sem fornecer contexto ao usuário. Isso vai contra as expectativas que eles têm de instalar apps e pode deixá-los um pouco confusos sobre o que aconteceu.

Exemplo de interface de instalação de PWA.
Exemplo da IU de instalação de PWA.

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

Exemplo da interface da página inferior no Chrome.
Exemplo de IU 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 existente 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 fechada.
A interface de instalação mais avançada foi fechada.

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 existentes. 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 IU funciona no Chrome 94 para Android e no Chrome 108 em computadores.

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

Implementação

Para exibir a caixa de diálogo da interface de instalação mais avançada, os desenvolvedores precisam adicionar pelo menos uma captura de tela para o formato correspondente na matriz screenshots. O campo description não é obrigatório, mas é recomendado. A caixa de diálogo de conteúdo é criada com o conteúdo dos campos screenshots e description para tornar a experiência mais semelhante à instalação de uma 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 oferecer 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. Com screenshots, eles podem apresentar a aparência do app da Web como independente, com todo o acesso fácil que os apps da plataforma têm.

Para conferir uma especificação detalhada e um guia sobre como adicionar esses recursos ao app, acesse o Padrão de interface para instalação aprimorada.

Feedback

No futuro, vamos considerar a inclusão de outros dados, como categorias e nota do app, mas isso vai ser baseado no feedback de desenvolvedores e usuários.

Nos próximos meses, adoraríamos ver como os desenvolvedores exploram esse novo padrão de IU e gostaríamos de receber seu feedback. Para entrar em contato, preencha este formulário