Você pode detectar se o usuário está usando o PWA no navegador ou no modo independente. Em navegadores baseados no Chromium (Android e computador), você também pode detectar os seguintes eventos:
- Status e resultado da caixa de diálogo do convite de instalação.
- Instalação concluída.
- A navegação é transferida do navegador para a janela do PWA e vice-versa.
- Status da instalação do PWA.
- App relacionado instalado de uma app store.
É possível usar esses dados em análises para entender as preferências dos usuários e personalizar a experiência. Para capturar esses eventos, use ferramentas como consultas de mídia, eventos do window ou as APIs de recursos listadas aqui.
Detectando modo de exibição
Para acompanhar como os usuários iniciam seu PWA, você pode usar matchMedia() para testar a consulta de mídia display-mode.
window.addEventListener('DOMContentLoaded', () => {
let displayMode = 'browser tab';
if (window.matchMedia('(display-mode: standalone)').matches) {
displayMode = 'standalone';
}
// Log launch display mode to analytics
console.log('DISPLAY_MODE_LAUNCH:', displayMode);
});
Se você usar esse exemplo, lembre-se de associar o modo de exibição do manifesto do seu app da Web, por exemplo, standalone, minimal-ui ou fullscreen. Também é possível corresponder várias consultas na string de consulta de mídia usando condições separadas por vírgula.
Também é possível adicionar um parâmetro de consulta ao start_url do manifesto que pode ser capturado com análise para rastrear estatísticas sobre quando, de que maneira e quanto o PWA está sendo usado.
Instalação do app
Quando um usuário aceita a solicitação de instalação no navegador, o evento appinstalled é disparado em navegadores baseados no Chromium. Um ótimo uso desse manipulador de eventos é remover qualquer promoção de instalação no aplicativo adicionada.
window.addEventListener('appinstalled', () => {
// If visible, hide the install promotion
hideInAppInstallPromotion();
// Log install to analytics
console.log('INSTALL: Success');
});
Em dispositivos Android com WebAPK, o evento é disparado quando o usuário aceita a caixa de diálogo, e não depois que o WebAPK é criado e instalado. Pode haver um atraso de alguns segundos até que o app seja totalmente instalado.
O capítulo "Prompt de instalação" explica como detectar se a solicitação de instalação está disponível e qual escolha o usuário faz.
Transferência de sessão
Os usuários podem utilizar o PWA no navegador e no formulário independente instalado. Em navegadores para computadores, é possível transferir a navegação atual entre esses contextos usando selos ou itens de menu, como mostrado na imagem a seguir.
No Android, há um item de menu semelhante ao do navegador no computador que transfere a navegação para o app. Nesse caso, o URL atual é aberto, mas será uma nova navegação de página no app.
Na imagem abaixo, você pode conferir o item de menu no Android quando o app já está instalado.
Transferir após a instalação
Nos navegadores para computadores, a navegação atual é transferida imediatamente para o app durante a instalação. A guia do navegador é fechada e o aplicativo recém-instalado é aberto, continuando o que o usuário estava fazendo.
Em navegadores para dispositivos móveis, a navegação atual permanece no navegador quando você instala o app. Se os usuários quiserem passar para o app, precisarão abrir o app manualmente, e a navegação será nova.
Como detectar a transferência
Para detectar a transferência entre o navegador e a janela, use uma consulta de mídia:
window.addEventListener('DOMContentLoaded', () => {
// replace standalone with your display used in manifest
window.matchMedia('(display-mode: standalone)')
.addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});
});
Isolamento de armazenamento para iOS e iPadOS
No iOS e no iPadOS, não há navegação ou transferência de URL entre o navegador e o ícone instalado. Mesmo que seja o mesmo PWA, cada ícone que o usuário instalar terá seu próprio armazenamento, isolado da guia do Safari e de outros ícones. Quando o usuário abre o ícone de instalação, nenhum armazenamento é compartilhado com o Safari. Caso o PWA precise de login, o usuário vai precisar fazer isso de novo. Se o app tiver sido adicionado à tela inicial várias vezes, para cada instância do PWA, o usuário terá uma sessão diferente.
Aplicativos relacionados
Um site indica uma relação com um app pelo manifesto. Para fazer isso, use o membro related_applications da especificação do manifesto do app da Web.
A chave related_applications é uma matriz de objetos que representam cada aplicativo relacionado. Cada entrada contém platform, url e um id opcional.
Estes são os possíveis valores de plataforma:
chrome_web_store: Google Chrome Web Store.play: apps do Google Play (Android e ChromeOS).chromeos_play: reprodução do ChromeOS.webapp: apps da Web.windows: Microsoft Store (Windows 10 e 11).f-droid: F-droid.amazon: Amazon AppStore (FireOS).
Prefiro um app relacionado
Quando o usuário instala um app, você pode redirecioná-lo para um app relacionado. Basta definir o campo prefer_related_applications como true no manifesto. Com essa configuração, em navegadores compatíveis, os fluxos de instalação não instalam o PWA. Em vez disso, eles acionam uma instalação da loja pelo url ou id especificados na entrada related_applications.
O aplicativo relacionado pode ser seu PWA e será instalado em uma app store. Uma vantagem dessa configuração é que, no momento, apenas os aplicativos instalados pela app store são recuperados com um backup ou quando você muda para um novo dispositivo.
{
...
"related_applications:" [
{
"platform": "play",
"url": "https://play.google.com/..."
}
],
"prefer_related_applications": true
}
Banners inteligentes para apps da Apple
O Safari não é compatível com o membro related_applications, mas oferece banners de apps inteligentes para apps na App Store. Portanto, se você quiser promover um PWA ou outro app publicado na App Store, inclua metatags no HTML do PWA para convidar o usuário a instalar o app (consulte o link fornecido) ou transferir a navegação, caso ele já esteja instalado.
Como detectar apps instalados relacionados
O método getInstalledRelatedApps() permite que seu site verifique se o app iOS/Android/computador ou o PWA está instalado no dispositivo do usuário.
Verificar se um app relacionado já está instalado ajuda a implementar recursos, como ocultar solicitações instaladas personalizadas ou redirecionar o usuário diretamente ao app instalado, em vez de acessar um site de uso geral.
Para usar o método getInstalledRelatedApps(), o app instalado e o site precisam configurar a conexão entre si. Cada app, dependendo da plataforma, inclui metadados para reconhecer o site, e a página inclui o app instalado esperado no campo related_applications do manifesto.
Ferramentas como o BubbleWrap ou o PWA Builder, que permitem a publicação do PWA em app stores, já adicionam os metadados necessários para que seu site possa usar o getInstalledRelatedApps() imediatamente.
Para detectar se um PWA já está instalado usando getInstalledRelatedApps(), defina webapp no campo related_applications do manifesto com o URL do seu manifesto:
...
"related_applications": [{
"platform": "webapp",
"url": "https://example.com/manifest.json",
}],
...
getInstalledRelatedApps() retorna uma matriz de objetos de app. Se a matriz estiver vazia, o app relacionado não está instalado.
const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;
Detecta a instalação de fora do escopo do PWA
No Chrome no Android 89, é possível detectar se um PWA está instalado, mesmo fora do escopo dele. Seu PWA precisa definir um arquivo JSON na pasta /.well-known/, concedendo permissão para o outro escopo, conforme descrito neste artigo.