No passado, a instalação de apps só era possível usando 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 aplicativos específicos da plataforma.
É possível fazer isso de várias maneiras:
- Instalar o PWA pelo navegador.
- Instalar o PWA pela app store.
Ter canais de distribuição diferentes é uma maneira eficiente de alcançar um grande número de usuários. No entanto, 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 para aumentar as taxas de instalação e evitar a concorrência e a canibalização da plataforma. As ofertas de instalação cobertas incluem PWAs instalados pelo navegador e pela 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 independente, e não em uma guia do navegador. Eles podem ser iniciados na tela inicial, no dock, na barra de tarefas ou na estante do usuário. É possível pesquisar por eles em um dispositivo e navegar entre eles 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, apps específicos da plataforma podem ser a melhor escolha, mas para outros, eles 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 desvantagem para usuários de dispositivos mais simples.
- Largura de banda disponível: fazer o download de um app pode ser um processo caro e lento, ainda mais para usuários com conexões lentas e planos de dados caros.
- Atrito:sair de um site e ir para uma loja para fazer o download de um app cria atritos adicionais e atrasa uma ação do usuário que pode ser realizada diretamente na Web.
- Ciclo de atualização:fazer mudanças em apps específicos da plataforma pode exigir a revisão do app, o que pode atrasar mudanças e 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 pensam que não vão usar o app com muita frequência ou que não justificam gastar vários megabytes de armazenamento ou dados. Você pode 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 web para dispositivos móveis".
Se o tamanho desse segmento for considerável, é um bom indicativo de que você precisa fornecer formas 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 a funcionalidade oferecida 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 estiver otimizado para telas maiores, como no ChromeOS.
Para alguns apps, gerar instalações de apps específicos da plataforma é uma parte fundamental do modelo de negócios. Nesse caso, faz sentido promover a instalação do seu app específico da plataforma. No entanto, alguns usuários podem preferir ficar na Web. Se esse segmento for identificado, a solicitação do PWA poderá ser exibida apenas para ele (o que chamamos de "PWA como substituto").
PWA como experiência instalável principal
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 e, nos dispositivos móveis, mostra uma minibarra de informações:
Embora isso possa ser suficiente para algumas experiências, se a meta é impulsionar as instalações do PWA, recomendamos que você ouça o BeforeInstallPromptEvent e siga os padrões para promover a instalação do PWA.
Impedir que o PWA canibalize a taxa de instalação de apps específica da plataforma
Em alguns casos, você pode promover a instalação do app específico da plataforma usando o PWA, mas recomendamos que você forneça um mecanismo para permitir que os usuários o instalem. Com essa opção substituta, os usuários que não podem ou não querem instalar seu app específico da plataforma podem ter uma experiência de instalação semelhante.
A primeira etapa para implementar essa estratégia é definir uma heurística para quando você mostrará ao usuário uma promoção de instalação para seu PWA.
Por exemplo:um usuário do PWA é aquele que viu a solicitação de instalação de app específica 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 de 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 a solicitação de instalação do PWA tiver sido salva anteriormente, você vai poder mostrar o botão de instalação do PWA.
Promover a instalação do PWA por uma app store
Os aplicativos para app stores podem ser criados com diferentes tecnologias, incluindo técnicas de PWA. Em Como combinar o PWA em ambientes nativos, você encontra um resumo das tecnologias que podem ser usadas para esse fim.
Nesta seção, classificaremos os apps na loja em dois grupos:
- Apps específicos à plataforma:esses apps são criados principalmente com código específico da plataforma. Os tamanhos dependem da plataforma, mas geralmente são mais de 10 MB no Android e 30 MB no iOS. Convém promover seu aplicativo específico da plataforma se você não tiver um PWA ou se o aplicativo 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 geralmente são desenvolvidos com tecnologia da Web e empacotada em um wrapper específico da plataforma. Os PWAs completos também podem ser enviados para as lojas. Isso será discutido posteriormente neste artigo. Algumas empresas optam por fornecer essas experiências como "lite", e outras também usam essa abordagem para seus principais aplicativos (principais).
Promover apps leves
De acordo com um estudo do Google Play (link em inglês), 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 downloads de um app de 10 MB pode ser aproximadamente 30% maior do que a de um app com 100 MB.
Para resolver isso, algumas empresas estão usando o PWA para fornecer uma versão leve do app na Play Store com atividades confiáveis na Web (TWA, na sigla em inglês). Os TWAs envolvem seu PWA em um componente parecido com um WebView, 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, ele não pode ser distinguido do app Android:
A Oyo manteve as versões principais e "lite" do app na loja, oferecendo opções aos usuários.
Como fornecer uma experiência leve na Web
Intuitivamente, usuários em dispositivos mais simples podem ser mais propensos a fazer o download de versões leves de apps do que os usuários de smartphones de última geração. Portanto, se for possível identificar o dispositivo de um usuário, você poderá priorizar o banner leve de instalação do aplicativo em vez da versão mais pesada, específica da plataforma.
Na Web, é possível obter sinais de dispositivos e mapeá-los aproximadamente em categorias de dispositivos (por exemplo, "alto", "médio" ou "baixo"). Você pode obter essas informações de diferentes maneiras, usando APIs JavaScript ou dicas de cliente.
Usando JavaScript
Usando as propriedades JavaScript, como navigator.hardwareConcurrency, navigator.deviceMemory e navigator.connection, você pode ver informações sobre o status da CPU, memória e rede do dispositivo, respectivamente. Exemplo:
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
Como usar dicas do cliente
Os sinais do dispositivo também podem ser inferidos em cabeçalhos de solicitações HTTP por meio de dicas do cliente. Confira como implementar o código anterior para a memória do dispositivo com dicas de cliente:
Primeiro, informe ao navegador que você quer receber dicas de memória do dispositivo no cabeçalho da resposta HTTP para qualquer solicitação própria:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
Em seguida, você começará a receber informações de Device-Memory no cabeçalho da solicitação HTTP:
GET /main.js HTTP/1.1
Device-Memory: 0.5
Use 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 associar essas informações a categorias de dispositivos e mostre a solicitação de instalação de 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 capacidade de ter um ícone na tela inicial do usuário é um dos recursos mais envolventes dos aplicativos. Como, historicamente, isso só era possível para aplicativos instalados de app stores, as empresas pensam que mostrar um banner de instalação da app store seria suficiente para convencer os usuários a instalar as experiências deles. Atualmente, existem mais opções para permitir que os usuários instalem um app, incluindo oferecer experiências leves nas lojas e permitir que os usuários adicionem PWAs à tela inicial solicitando que façam isso diretamente do site.