O que é um Progressive Web App? Web apps que parecem nativos
Um progressive web app (PWA) é um site que usa recursos modernos do navegador para ser instalável, funcionar offline e se comportar mais como um app nativo.
Um PWA não é uma tecnologia separada, mas um conjunto de capacidades adicionadas a um web app normal. Com um service worker e um web manifest, um site pode ser adicionado à tela inicial, iniciar em tela cheia e continuar funcionando sem rede. A pipeline de build é responsável por produzir e validar essas peças.
Os ingredientes principais
- Um web manifest descrevendo nome, ícones e modo de exibição.
- Um service worker para cache e suporte offline.
- HTTPS, que a maioria dos recursos de PWA exige.
O que um PWA pode fazer
Um PWA qualificado pode ser instalado no dispositivo, iniciar sem a interface do navegador, fazer cache de assets para uso offline e, em plataformas suportadas, receber push notifications. A experiência se aproxima de um app nativo, embora continue sendo um site.
Aprimoramento progressivo
A palavra progressivo importa: o site ainda funciona como uma página web normal em navegadores sem suporte a PWA, e as capacidades extras são adicionadas onde disponíveis. Você não perde a experiência web básica.
O modelo de cache offline
O service worker intercepta requisições de rede e pode servir respostas em cache, para que o app carregue mesmo sem conexão. Projetar o que colocar em cache e como atualizá-lo é a parte mais difícil de construir um PWA confiável.
PWAs em CI/CD
O build gera o manifest e um service worker, muitas vezes com um plugin que faz o precache dos assets de build com hash. O CI deve verificar se o manifest e o service worker são emitidos e válidos, e uma verificação do Lighthouse na pipeline pode falhar o build se os requisitos de PWA regredirem.
Principais conclusões
- Um PWA adiciona instalabilidade e suporte offline a um web app normal.
- Ele precisa de um web manifest, um service worker e HTTPS.
- O CI gera o manifest e o service worker e pode aplicar um gate em uma verificação de PWA do Lighthouse.