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

Os usuários costumam instalar os apps, principalmente os de plataforma, em app stores ou fazendo o download e a instalação de um pacote. Hoje, até mesmo a experiência do computador está mudando para oferecer apps em lojas centralizadas.

Para apps da Web, o modelo é diferente: os usuários não precisam acessar um depósito centralizado para fazer o download de um app da Web. Por padrão, nem todas as experiências da Web são instaláveis, a instalação de um app pode variar entre plataformas e navegadores, os navegadores até mesmo têm diferentes menus e superfícies para instalar o app. Quando o usuário clica nessa opção, a caixa de diálogo padrão não inclui informações adicionais, conforme 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 na área de trabalho.
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.

Criar aplicativos da web que podem ser instalados e fornecer as mesmas interações que apps de plataforma requer trabalho técnico para possibilitar essas experiências, juntamente com uma boa orientação para os usuários aproveitarem esse fluxo de instalação diferente.

Com a interface de instalação avançada, os desenvolvedores Web têm uma nova oportunidade de dar aos usuários contexto específico sobre o aplicativo no momento da instalação. Essa interface está disponível para dispositivos móveis a partir do Chrome 94 e para computadores a partir do Chrome 108. Embora o Chrome continue a oferecer caixas de diálogo de instalação simples para apps instaláveis, essa interface maior oferece aos desenvolvedores espaço para destacar apps da Web. Isso 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 mais avançada em computadores e dispositivos móveis.
Interface de instalação mais avançada em computadores e dispositivos móveis.

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

Para mostrar a caixa de diálogo da interface 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 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 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. Com o screenshots, é possível apresentar a aparência do app da Web de forma 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).

O estilo antigo do prompt de instalação fornecia poucas informações e contexto. Isso não correspondia às expectativas dos usuários quanto ao significado da instalação e poderia deixá-los confusos sobre o que aconteceu. Muitos deles recusavam a solicitação de instalação, o que também era ruim para as empresas que os desenvolveram.

Instalações mais avançadas permitem criar experiências mais parecidas com as nos sistemas operacionais.

Você pode criar um seguindo o exemplo do arquivo de manifesto do app Squoosh e testar a caixa de diálogo em: https://squoosh.app/.

Feedback Estamos considerando outras opções para aumentar as instalações, 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 avançadas que não funciona como você esperava? Ou há dados específicos que você precisa para implementar sua ideia? Tem uma pergunta ou comentário? Preencha este formulário.

Foto de Kaboompics .com em Pexels