Antes, a instalação de apps 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.
Isso pode ser feito de várias maneiras:
- Instalar o PWA no navegador.
- Instalar o PWA na app store.
Ter diferentes canais de distribuição é uma maneira eficaz 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 aborda as práticas recomendadas para combinar diferentes opções de instalação e aumentar as taxas de instalação, evitando a competição e a canibalizaçao de plataformas. As ofertas de instalação 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, em vez de uma guia do navegador. Eles podem ser iniciados na tela inicial, na base, na barra de tarefas ou na prateleira 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.
No entanto, ter um app da Web instalável e um app específico para a plataforma pode confundir os usuários. Para alguns usuários, os 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 ou liberar espaço, removendo conteúdo valioso. Isso é especialmente desvantajoso para usuários de dispositivos de baixo custo.
- 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 acessar uma loja para fazer o download de um app cria mais atrito e atrasa uma ação do usuário que poderia ser realizada diretamente na Web.
- Ciclo de atualização:fazer mudanças em apps específicos da plataforma pode exigir um processo de análise de apps, 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 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 acompanhar a porcentagem de usuários "somente da Web para dispositivos móveis".
Se o tamanho desse segmento for considerável, isso indica 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 a funcionalidade oferecida pelo PWA ou se não tiver sido atualizado há algum tempo. Também pode ser útil promover a instalação do seu 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 experiência instalável principal
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, e no dispositivo móvel, 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.
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 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 é um usuário que viu o comando de instalação do app específico da plataforma e não instalou o app específico da plataforma. Ele retornou 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 acompanhar o número de visitas do usuário 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 de 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 integrar a PWA a ambientes nativos, você encontra um resumo das tecnologias que podem ser usadas para esse fim.
Nesta seção, vamos classificar os apps 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 geralmente são criados com tecnologia da Web e 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 que a de um app de 100 MB.
Para resolver esse problema, algumas empresas estão usando as PWA para oferecer uma versão leve do app na Play Store com 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, ele 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
Por instinto, os usuários de dispositivos de baixo custo podem estar mais inclinados 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, 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
Usando propriedades do JavaScript, como navigator.hardwareConcurrency, navigator.deviceMemory e navigator.connection, é possível receber 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. Veja 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 própria:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
Em seguida, você vai começar a receber informações Device-Memory no cabeçalho de solicitações HTTP:
GET /main.js HTTP/1.1
Device-Memory: 0.5
Você pode 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 capacidade de ter um ícone na tela inicial do usuário é um dos recursos mais envolventes 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 de apps leves nas lojas e permitir que os usuários adicionem PWAs à tela inicial solicitando que eles façam isso diretamente no site.