No passado, a instalação de aplicativos só era possível no contexto de aplicativos específicos da plataforma. Atualmente, os aplicativos da Web modernos oferecem experiências instaláveis que proporcionam o mesmo nível de integração e confiabilidade que os apps específicos da plataforma.
É possível fazer isso de diferentes maneiras:
- Como instalar o PWA pelo 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 do 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 aplicativo 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 por eles em um dispositivo e alternar entre eles com o seletor de apps, fazendo com que eles se sintam 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 usuários ou liberar espaço removendo conteúdo valioso. Isso é especialmente desvantajoso para usuários em dispositivos mais simples.
- Largura de banda disponível:fazer o download de um app pode ser um processo caro e lento, principalmente 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 fazem o download do app específico da plataforma pode ser grande, por exemplo: aqueles que pensam que não vão usar o app com muita frequência ou que não podem justificar 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 "somente Web para dispositivos móveis" usuários.
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 do 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 as 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 aplicativos, gerar instalações específicas da plataforma é uma parte fundamental do modelo de negócios. Nesse caso, faz sentido promover a instalação do seu aplicativo específico da plataforma. Mas alguns usuários podem se sentir mais confortáveis na Web. Se esse segmento for identificado, o prompt do PWA só vai aparecer para essas pessoas (o que chamamos de "PWA como substituto").
PWA como principal experiência instalável
Quando um PWA atende aos critérios de instalação, a maioria dos navegadores mostra uma indicação de que ele pode ser instalado. 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 impulsionar as instalações do PWA, recomendamos que você detecte 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 optar por promover a instalação do app específico da plataforma pelo PWA, mas, nesse caso, ainda recomendamos fornecer um mecanismo para permitir que os usuários instalem o PWA. Essa opção substituta possibilita que usuários que não podem ou não queiram instalar o app específico da plataforma tenham uma experiência de instalação semelhante.
A primeira etapa para implementar essa estratégia é definir uma heurística para quando você vai mostrar ao usuário uma promoção de instalação do PWA.
Por exemplo:um usuário de PWA é aquele que viu o pedido de instalação de app específico da plataforma, mas não o instalou. Eles voltaram ao site pelo menos cinco vezes ou clicaram no banner do app, mas continuaram usando o site.
Em seguida, a heurística pode ser implementada da seguinte forma:
- Mostra o banner de instalação de app específico da plataforma.
- Se um usuário dispensar o banner, defina um cookie com essa informação (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 usa 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 do PWA por meio de uma app store
Apps para app stores podem ser criados com diferentes tecnologias, incluindo técnicas 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 da plataforma:na maioria das vezes, são criados com código específico da plataforma. O tamanho deles depende da plataforma, mas geralmente são mais de 10 MB no Android e 30 MB no iOS. Promova seu app específico da plataforma se você 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á discutido posteriormente neste artigo. Algumas empresas optam por fornecê-las como "lite", e outras empresas também usaram essa abordagem nos principais apps (principais).
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). Os TWAs envolvem o PWA em um componente como WebView, e o tamanho resultante do app geralmente é de apenas alguns megabytes.
A Oyo, uma das maiores empresas de hotelaria 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, é indistinguível do app Android:
A Oyo manteve a versão principal e leve versões do app na loja, oferecendo aos usuários uma opção.
Oferecer uma experiência leve da Web
Intuitivamente, os usuários de dispositivos mais simples podem estar mais inclinados a fazer o download de versões leves de apps do que os usuários de smartphones sofisticados. Portanto, se for possível identificar o dispositivo de um usuário, priorize o banner leve de instalação de aplicativo em relação à versão mais pesada do aplicativo específico da plataforma.
Na Web, é possível receber indicadores de dispositivos e mapeá-los de acordo com as categorias de dispositivo (por exemplo, "alto", "médio" ou "baixo"). Você pode obter essas informações de diferentes maneiras, usando APIs JavaScript ou dicas de cliente.
Usar 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 de dispositivo também podem ser inferidos em cabeçalhos de solicitação HTTP, usando 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ê está interessado em receber dicas de memória do dispositivo no cabeçalho da resposta HTTP para qualquer solicitação primária:
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 as categorias de dispositivos e mostre 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. Considerando que, historicamente, isso só era possível para apps instalados de app stores, as empresas podem pensar que mostrar um banner de instalação da app store seria suficiente para convencer os usuários a instalar a experiência. 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.