No passado, a instalação de aplicativos só era possível no contexto de aplicativos específicos da plataforma. Hoje, os apps da Web modernos oferecem experiências instaláveis que oferecem o mesmo nível de integração e confiabilidade que os apps específicos da plataforma.
É possível fazer isso de diferentes maneiras:
- Instalar o PWA no navegador.
- Como instalar o PWA na app store.
Ter diferentes canais de distribuição é uma maneira eficiente de alcançar um grande número de usuários, mas escolher a estratégia certa para promover a instalação da PWA pode ser um desafio.
Este guia explora as práticas recomendadas para combinar diferentes opções de instalação a fim de aumentar as taxas de instalação e evitar a concorrência entre plataformas e a canibalização. As ofertas de instalação cobertas incluem PWAs instalados no navegador e na App Store, além de apps específicos da plataforma.
Por que tornar seu app da Web instalável?
Os Progressive Web Apps instalados são executados em uma janela autônoma, e não em uma guia do navegador. Eles podem ser iniciados na tela inicial, dock, barra de tarefas ou estante do usuário. É possível pesquisar e alternar entre eles em um dispositivo com o seletor de apps, fazendo com que eles pareçam parte do dispositivo em que estão instalados.
Mas ter um aplicativo da web instalável e um aplicativo específico da plataforma pode ser confuso para os usuários. Para alguns usuários, aplicativos específicos da plataforma podem ser a melhor escolha, mas para outros podem apresentar algumas desvantagens:
- Restrições de armazenamento: instalar um novo app pode significar excluir outros ou liberar espaço, removendo conteúdo valioso. Isso é especialmente desvantajoso para usuários em dispositivos mais simples.
- Largura de banda disponível: o download de um app pode ser um processo lento e caro, ainda mais para usuários com conexões lentas e planos de dados caros.
- Atrito:sair de um site e ir a uma loja para fazer o download de um app cria atrito e atrasa uma ação do usuário que poderia ser realizada diretamente na Web.
- Ciclo de atualização:para fazer mudanças em apps específicos da plataforma, talvez seja necessário passar por um processo de revisão, o que pode atrasar as mudanças e os experimentos (testes A/B, por exemplo).
Em alguns casos, a porcentagem de usuários que não vão fazer o download do app específico da plataforma pode ser grande, por exemplo: aqueles que acham que não vão usar o app com frequência ou que não podem gastar vários megabytes de armazenamento ou dados. É possível determinar o tamanho desse segmento de várias maneiras, por exemplo, usando uma configuração de análise para rastrear a porcentagem de usuários "somente na Web para dispositivos móveis".
Se o tamanho desse segmento for considerável, isso é uma boa indicação de que você precisa oferecer maneiras alternativas de instalar suas experiências.
Promover a instalação da PWA pelo navegador
Se você tiver um PWA de alta qualidade, talvez seja melhor promover a instalação dele em vez do app específico da plataforma. Por exemplo, se o app específico da plataforma não tiver funcionalidades oferecidas pelo PWA ou se ele não for atualizado há algum tempo. Também pode ser útil promover a instalação do PWA se o app específico da plataforma não tiver sido otimizado para telas maiores, como no ChromeOS.
Para alguns apps, impulsionar instalações de apps específicos da plataforma é uma parte importante do modelo de negócios. Nesse caso, faz sentido promover a instalação do app específico da plataforma. No entanto, alguns usuários podem se sentir mais confortáveis na Web. Se esse segmento puder ser identificado, o comando da PWA poderá ser mostrado apenas para ele, o que chamamos de "PWA como substituto".
PWA como principal experiência instalável
Quando um PWA atende aos critérios de instalabilidade, a maioria dos navegadores mostra uma indicação de que o PWA é instalável. Por exemplo, o Chrome para computador mostra um ícone instalável na barra de endereço. Em dispositivos móveis, ele mostra uma minibarra de informações:
Embora isso possa ser suficiente para algumas experiências, se o objetivo for gerar instalações do PWA, recomendamos que você ouça o BeforeInstallPromptEvent e siga os padrões para promover a instalação do PWA.
Evitar que o PWA canibalize a taxa de instalação do app específica da plataforma
Em alguns casos, você pode promover a instalação do app específico da plataforma em vez do PWA, mas, nesse caso, ainda recomendamos que você forneça um mecanismo para permitir que os usuários instalem o PWA. Essa opção alternativa permite que os usuários que não podem ou não querem instalar o app específico da plataforma tenham uma experiência semelhante.
A primeira etapa para implementar essa estratégia é definir uma heurística para mostrar ao usuário uma promoção de instalação da sua PWA.
Por exemplo:um usuário de PWA é aquele que viu a solicitação de instalação do app específico da plataforma e não o instalou. Ele voltou ao site pelo menos cinco vezes ou clicou no banner do app, mas continuou usando o site.
Em seguida, a heurística pode ser implementada da seguinte maneira:
- Mostrar o banner de instalação do app específico da plataforma.
- Se um usuário dispensar o banner, defina um cookie com essas informações (por exemplo,
document.cookie = "app-install-banner=dismissed"). - Use outro cookie para rastrear o número de visitas de usuários ao site (por exemplo,
document.cookie = "user-visits=1"). - Crie uma função, como
isPWAUser(), que use as informações armazenadas anteriormente nos cookies com a APIgetInstalledRelatedApps()para determinar se um usuário é considerado um "usuário do PWA". - Quando o usuário realizar uma ação significativa, chame
isPWAUser(). Se a função retornar "true" e o prompt de instalação do PWA tiver sido salvo anteriormente, você poderá mostrar o botão de instalação do PWA.
Promover a instalação da sua PWA em uma app store
Os apps para app stores podem ser criados com diferentes tecnologias, incluindo as de PWA. Em Como combinar o PWA com ambientes nativos, você encontra um resumo das tecnologias que podem ser usadas para isso.
Nesta seção, classificaremos os aplicativos na loja em dois grupos:
- Apps específicos para plataformas: são criados principalmente com código específico para plataformas. O tamanho depende da plataforma, mas geralmente é superior a 10 MB no Android e 30 MB no iOS. Você pode promover o app específico da plataforma se não tiver um PWA ou se o app específico da plataforma apresentar um conjunto de recursos mais completo.
- Apps leves:esses apps também podem ser criados com código específico da plataforma, mas normalmente são criados com tecnologia da Web, empacotados em um wrapper específico da plataforma. Também é possível fazer upload de PWAs completos para as lojas. Isso será abordado mais adiante neste artigo. Algumas empresas optam por oferecer essas experiências como "lite", e outras também usam essa abordagem para os apps principais.
Como promover apps leves
De acordo com um estudo do Google Play, para cada aumento de 6 MB no tamanho de um APK, a taxa de conversão de instalação diminui em 1%. Isso significa que a taxa de conclusão de download de um app de 10 MB pode ser aproximadamente 30% maior do que a de um app de 100 MB.
Para resolver isso, algumas empresas estão aproveitando o PWA para oferecer uma versão leve do app na Play Store usando as Atividades confiáveis na Web (TWA, na sigla em inglês). As TWAs agrupam seu PWA em um componente semelhante a uma visualização da Web, e o tamanho do app resultante geralmente é de apenas alguns megabytes.
A Oyo, uma das maiores empresas de hospitalidade da Índia, criou uma versão Lite do app e a disponibilizou na Play Store usando um TWA. Na época em que este artigo foi escrito, o app Oyo tinha apenas 850 KB, apenas 7% do tamanho do app Android. Depois de instalado, o app não pode ser distinguido do app Android:
A Oyo manteve as versões principal e "lite" do app na loja, oferecendo uma opção aos usuários.
Oferecer uma experiência leve na Web
Intuitivamente, os usuários de dispositivos mais simples podem estar mais inclinados a fazer o download de versões leves de aplicativos do que os usuários de celulares sofisticados. Portanto, se for possível identificar o dispositivo de um usuário, priorize o banner de instalação de apps leves em vez da versão mais pesada específica da plataforma.
Na Web, é possível receber indicadores de dispositivo e mapeá-los aproximadamente para categorias de dispositivo (por exemplo, "alta", "média" ou "baixa"). É possível conseguir essas informações de diferentes maneiras, usando APIs JavaScript ou dicas do cliente.
Usando o JavaScript
Com as propriedades JavaScript, como navigator.hardwareConcurrency, navigator.deviceMemory e navigator.connection, você pode ver informações sobre a CPU, a memória e o status da rede do dispositivo, respectivamente. Exemplo:
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
Como usar dicas de cliente
Os indicadores do dispositivo também podem ser inferidos nos cabeçalhos de solicitação HTTP por meio de dicas do cliente. Confira como implementar o código anterior para a memória do dispositivo com dicas do cliente:
Primeiro, informe ao navegador que você tem interesse em receber dicas de memória do dispositivo no cabeçalho da resposta HTTP para qualquer solicitação de primeira parte:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
Em seguida, você vai começar a receber informações de Device-Memory no cabeçalho das solicitações HTTP:
GET /main.js HTTP/1.1
Device-Memory: 0.5
É possível usar essas informações nos seus back-ends para armazenar um cookie com a categoria do dispositivo do usuário:
app.get('/route', (req, res) => {
// Determine device category
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Set cookie
res.setCookie('Device-Category', deviceCategory);
…
});
Por fim, crie sua própria lógica para mapear essas informações para categorias de dispositivos e mostrar a solicitação de instalação do app correspondente em cada caso:
if (isDeviceMidOrLowEnd()) {
// show "Lite app" install banner or PWA A2HS prompt
} else {
// show "Core app" install banner
}
Conclusão
A possibilidade de ter um ícone na tela inicial do usuário é um dos recursos mais interessantes dos aplicativos. Historicamente, isso só era possível para apps instalados em app stores. As empresas podem pensar que mostrar um banner de instalação de app store seria suficiente para convencer os usuários a instalar as experiências. Atualmente, há mais opções para permitir que os usuários instalem um app, incluindo oferecer experiências leves nas lojas e permitir que adicionem PWAs à tela inicial solicitando que façam isso diretamente do site.