Instalação da IU mais avançada disponível para computadores

Adriana Jara
Adriana Jara

Os usuários geralmente encontram os aplicativos, especialmente aplicativos de plataforma, por meio de app stores ou ao fazer o download de um pacote e instalá-lo. Hoje, até mesmo a experiência no computador está passando para oferecer apps em lojas centralizadas.

Para apps da Web, o modelo é diferente: os usuários não precisam acessar um repositório de apps centralizado para ter um app da Web. Por padrão, nem todas as experiências na Web são instaláveis. A instalação de um app pode variar entre plataformas e navegadores. Os navegadores têm até menus e superfícies diferentes para instalar o app. Quando o usuário clica na opção de instalação, a caixa de diálogo padrão não inclui outras informações, como mostrado abaixo:

A caixa de diálogo de instalação padrão do navegador para computador.
Caixa de diálogo de instalação padrão em computadores.
Caixa de diálogo de instalação padrão do navegador para dispositivos móveis.
Caixa de diálogo de instalação padrão em dispositivos móveis.

A criação de apps da Web que podem ser instalados e fornecem as mesmas interações que os apps de plataforma exige trabalho técnico para possibilitar essas experiências, além de boas orientações para que os usuários aproveitem esse fluxo de instalação diferente.

Com a interface de instalação mais avançada, os desenvolvedores da Web têm uma nova oportunidade de oferecer aos usuários contexto específico sobre o app no momento da instalação. Essa interface está disponível para dispositivos móveis do Chrome 94 e do Chrome 108 para computadores. O Chrome continua oferecendo caixas de diálogo simples de instalação para apps instaláveis, mas essa interface maior dá aos desenvolvedores espaço para destacar o app da Web. Ela também torna o processo de instalação mais familiar, porque é semelhante às caixas de diálogo das app stores.

Capturas de tela da interface de instalação do Richer em computadores e dispositivos móveis.
IU de instalação mais avançada em computadores e dispositivos móveis.

Como ativar a interface de instalação mais avançada

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 desses dois campos, tornando a experiência mais semelhante à instalação da app store. Isso 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 manter o app nos dispositivos. Com as screenshots, é possível 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 uma especificação detalhada e um guia sobre como adicionar esses recursos ao app, acesse o Padrão de interface para instalação aprimorada.

O estilo antigo de solicitação de instalação fornecia pouca informação e contexto. Isso não correspondeu às expectativas dos usuários sobre o significado da instalação e pode deixá-los confusos sobre o que aconteceu. Muitas pessoas recusaram totalmente a solicitação de instalação, o que também era ruim para as empresas que os construíram.

Com instalações mais avançadas, você pode criar experiências mais parecidas com as dos sistemas operacionais.

Você pode criar o seu próprio seguindo o exemplo do arquivo de manifesto do app Squoosh e testar a caixa de diálogo disponível em: https://squoosh.app/.

Feedback Estamos considerando outras opções para instalações mais avançadas, incluindo categorias e classificações do app. Para tomar essa decisão, precisamos do seu feedback. Fale sobre o design Há algo na interface de instalações mais avançadas que não funciona como esperado? Ou há dados específicos que você precise implementar para implementar sua ideia? Tem uma pergunta ou comentário? Preencha este formulário.

Foto de Kaboompics .com no Pexels