PWA: Uma grande lista de dicas e truques para Progressive Web Apps

Ultimamente tenho feito muitas palestras sobre o Progressive Web Apps. No final das palestras, normalmente há uma seção de perguntas e respostas em que o público faz perguntas ou propõe ideias. Muitas vezes durante essas sessões, me perguntam questões realmente úteis que valem a pena compartilhar com um público mais amplo.

Nesse artigo, juntei uma lista de algumas das perguntas que me fazem regularmente sobre os Progressive Web Apps e Service Workers e tentei incluir as respostas mais precisas que pude. Algumas dessas perguntas podem parecer óbvias, algumas não tão óbvias — mas, no geral, espero que sejam úteis!

Então… vamos lá! Sem nenhuma ordem em particular, essa lista de dicas úteis, truques e pegadinhas que podem ajudá-lo a construir o seu próximo Progressive Web App!

Como posso saber quantos usuários estão usando a funcionalidade Adicionar à tela inicial (A2HS) no meu site?

O código abaixo mostra isso em ação:

window.addEventListener("beforeinstallprompt", function(event) {
event.userChoice.then(function(result) {
if (result.outcome == "dismissed") {
// Usuário dispensou o banner, enviar para o nosso analytics
} else {
// User accepted! Send to analytics
// Usuário aceitou o banner, enviar para o nosso analytics
}
});
});

Usando o código acima, você pode determinar se o usuário descartou o banner ou se decidiu adicionar seu aplicativo à tela inicial. Usando uma ferramenta de captura de dados, você poderá rastrear sua escolha e determinar se essa funcionalidade é benéfica para seus usuários.

Outra técnica furtiva é definir na url de início em seu arquivo manifest.json uma querystring indicando que ele foi aberto por meio da tela inicial do dispositivo de um usuário.

Por exemplo, você pode atualizar a propriedade start_url no manifest.json:

{
"name": "Progressive Beer",
"short_name": "beer",
"start_url": "index.html?start=a2hs"
}

Com a url de início atualizada, incluindo a querystring, irá permitir que suas ferramentas de análise de dados determinem quantos usuários chegam ao seu PWA por meio do ícone na tela inicial do dispositivo.

O banner Adicionar ao Homescreen não faz sentido para o meu site. Como desabilito essa funcionalidade? Eu quero esconder isso!

window.addEventListener("beforeinstallprompt", function(e) {
e.preventDefault();
return false;
});

Dependendo do tipo do seu aplicativo web, pode não fazer sentido mostrar esse aviso. Talvez o seu site cubra tópicos sensíveis ou até mesmo um evento de curta duração, e o banner passa a ser mais irritante para o usuário do que útil.

Minha funcionalidade Adicionar à tela inicial (A2HS) não parece estar funcionando — ajuda!?

<link rel="manifest" href="manifest.json">

No entanto, se por algum motivo você ainda não estiver vendo o banner na parte inferior da página, há algumas coisas que você pode querer verificar. Em primeiro lugar, para o banner A2HS aparecer, alguns critérios precisam ser atendidos:

  • Seu site precisa estar executando HTTPS, ter um arquivo de manifesto válido (com uma URL e um ícone de início) e ter um arquivo de service worker ativo.
  • O usuário também precisa ter visitado seu site pelo menos duas vezes nos últimos cinco minutos. A razão para isso é que, se o banner aparecer muitas vezes, pode ser muito spam para o usuário. Esses banners de “instalar nosso aplicativo nativo” já são ruins em alguns sites!

Estou adicionando recursos ao cache com código no meu service worker, mas o cache não está atualizando quando eu altero o arquivo. Ainda consigo ver a versão mais antiga dos meus arquivos mesmo depois de atualizar a página — por quê?

Se você precisar garantir que os arquivos sejam sempre atualizados ao fazer alterações, você pode considerar adicionar versão aos arquivos e renomeá-los. Dessa forma, você garante que cada alteração de arquivo seja armazenada em cache corretamente. Por exemplo, usando controle de versão de arquivos, podemos referenciar um arquivo JavaScript em nosso HTML da seguinte forma:

<script src=”/js/main-v2.js”>

Cada vez que o arquivo é alterado, você aumenta a versão que resulta em um novo download.

Outra técnica para garantir que você sempre obtenha código novo é realmente excluir as entradas em cache atuais quando o service worker é ativado após a atualização. Ao escutar o evento de ativação durante o ciclo de vida do service worker, você pode limpar o cache. Eu recomendo verificar este link como uma orientação.

Dependendo de como o seu PWA foi construído, você pode querer escolher a melhor estratégia para atender às suas necessidades.

Como faço para ter testes de unidade do meu código do Service Worker?

Não tenho certeza se meu arquivo manifest.json está funcionando corretamente — como eu testo isso?

No entanto, se você se esforçar para criar esses arquivos e achar que comete erros aqui e ali, recomendo usar um gerador de arquivo de manifesto. Este repo do Github criado por Bruce Lawson tem uma ferramenta útil, onde você simplesmente insere seus detalhes e gera um arquivo de manifesto completo para você.

Com que frequência o arquivo do Service Worker é atualizado?

Para obter mais informações, recomendo a leitura do artigo a seguir no Stack Overflow, no qual Jeff Posnick, do Google, entra em mais detalhes.

Meu arquivo do Service Worker está emitindo um erro, mas não tenho certeza do que está errado. Como depurar isso?

Com o ponto de interrupção definido no DevTools, seu código será pausado quando atingir esse ponto e permitirá que você veja exatamente como sua lógica está sendo executada. Dominar o DevTools é um grande passo em frente para se tornar um melhor desenvolvedor. Embora muitos dos fornecedores de navegadores ofereçam tutoriais para suas ferramentas de desenvolvedor, meu favorito é o Chrome DevTools. Se você quiser saber mais, recomendo verificar o seguinte link.

Eu tentei de tudo, mas por alguma razão maluca minha lógica do Service Worker nunca parece executar — ajuda!?

Da mesma forma, você pode querer verificar se não tem as outras configurações ativadas quando não precisa delas. Por exemplo, Offline e Update on reload — fiquei coçando a cabeça várias vezes tentando descobrir por que meu código não estava funcionando, apenas para descobrir que tinha esquecido de desativar uma dessas configurações — d’oh!

Se um usuário instalou meu aplicativo da Web em sua tela inicial, mas limpa o cache no Chrome, os recursos armazenados em cache do meu site também são limpos?

Se você quiser saber mais sobre a funcionalidade aprimorada do A2HS no Chrome, é altamente recomendável ler o artigo a seguir.

Quanta memória meu aplicativo Progressive Web pode usar no dispositivo de um usuário?

Se você quiser determinar quanto armazenamento você tem e quanto você usou, o código a seguir pode ajudar.

navigator.storageQuota.queryInfo("temporary").then(function(info) {
console.log(info.quota); // A quantidade total em bytes
console.log(info.usage); // Quantos dados você usou até agora em bytes
});

O código acima pode não funcionar em todos os navegadores, mas definitivamente te apontará na direção certa. Há uma ótima resposta no Stack Overflow que explica isso com mais detalhes.

Meus recursos em cache parecem expirar de vez em quando, como posso garantir que eles fiquem permanentemente armazenados em cache?

Não tenha medo! Tem jeito. Se você quiser tornar o armazenamento em cache mais persistente, poderá solicitar explicitamente usando um pouco de código.

if (navigator.storage && navigator.storage.persist) {
navigator.storage.persist().then(granted => {
if (granted) {
alert("Armazenamento persistirá e não será limpo");
} else {
alert("Armazenamento não persistirá e pode ser limpo");
}
});
}

Existem alguns critérios que precisam ser atendidos antes que o armazenamento persistente seja concedido, mas se você quiser saber mais sobre esse ótimo recurso, recomendo a leitura deste artigo para obter mais informações.

Eu adicionei código para lidar com notificações push no meu arquivo de service worker, mas como posso testá-las rapidamente sem escrever código do lado do servidor?

Eu criei um aplicativo da Web off-line, mas agora não consigo ver como os usuários estão usando meu aplicativo. Como faço para acompanhar o uso?

Para começar a usar a biblioteca, basta incluí-la no arquivo do service worker usando o código abaixo.

importScripts('../build/offline-google-analytics-import.js');                   goog.offlineGoogleAnalytics.initialize();                           self.addEventListener('install', () => self.skipWaiting());                 
self.addEventListener('activate', () => self.clients.claim());

Ao incluir esse código no arquivo do service worker, a biblioteca rastreará as ações realizadas pelo usuário enquanto estiver off-line, criará uma fila e as enviará em ordem quando o usuário recuperar a conectividade. Coisas muito legais!

Como faço para lidar com parâmetros querystring e cache?

Por exemplo, se você fizer uma solicitação para uma URL com uma querystring e ela puder corresponder a uma consulta anterior, você talvez descubra que ela não será exibida na próxima vez, porque a querystring é um pouco diferente. Para ignorar querystring ao verificar o cache, use o atributo ignoreSearch e defina o valor como true.

O código abaixo dá uma ideia disso em ação:

self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request, {
**ignoreSearch: true**
}).then(function(response) {
return response || fetch(event.request);
})
);
});

Finalizando

Para manter o compartilhamento de conhecimento, criei um repositório do Github com todas essas perguntas. Se você tem alguma dica que gostaria de adicionar, ou algo não parece preciso, por favor, crie um PR e juntos podemos crescer este documento — você nunca sabe como isso poderia ajudar os outros!

Créditos

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store