Use o service worker do Angular para tornar seu app mais rápido e confiável em redes com conectividade ruim.
Como lidar com conectividade limitada
Quando os usuários têm acesso limitado à rede (ou nenhum acesso), a funcionalidade do app da Web pode ter uma queda significativa e geralmente falha. O uso de um service worker para fornecer pré-armazenamento em cache permite que você intercepte solicitações de rede e entregue respostas diretamente de um cache local em vez de recuperá-las da rede. Depois que os recursos do app forem armazenados em cache, essa abordagem poderá acelerar o app e fazer com que ele funcione quando o usuário estiver off-line.
Nesta postagem, explicamos como configurar o pré-armazenamento em cache em um app do Angular e pressupõe que você já conhece o pré-armazenamento em cache e os service workers em geral. Se você precisar se atualizar, confira a postagem Service workers e a API Cache Storage.
Introdução ao service worker do Angular
A equipe do Angular oferece um módulo de service worker com funcionalidade de pré-armazenamento em cache bem integrada ao framework e à interface de linha de comando (CLI) do Angular.
Para adicionar o service worker, execute este comando na CLI:
ng add @angular/pwa
Agora, @angular/service-worker
e @angular/pwa
vão estar instalados no app e vão aparecer em package.json
. O esquema ng-add
também adiciona ao projeto um arquivo chamado ngsw-config.json
, que pode ser usado para configurar o service worker. O arquivo inclui uma configuração padrão que você personalizará um pouco mais tarde.
Agora crie o projeto para produção:
ng build --prod
No diretório dist/service-worker-web-dev
, você vai encontrar um arquivo chamado ngsw.json
. Esse arquivo informa ao service worker do Angular como armazenar os recursos em cache no app. O arquivo é gerado durante o processo de build com base na configuração (ngsw-config.json
) e nos recursos produzidos no momento da compilação.
Agora inicie um servidor HTTP no diretório que contém os recursos de produção do seu app, abra o URL público e verifique as solicitações de rede no Chrome DevTools:
- Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
- Clique na guia Rede.
A guia "Rede" tem vários recursos estáticos salvos diretamente em segundo plano pelo script ngsw-worker.js
:
Este é o service worker do Angular que pré-armazena em cache os recursos estáticos especificados no arquivo de manifesto ngsw.json
gerado.
No entanto, falta um recurso importante: nyan.png
. Para pré-armazenar essa imagem em cache, adicione um padrão que a inclua em ngsw-config.json
, que reside na raiz do espaço de trabalho:
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js",
"/assets/*.png"
]
}
},
...
}
Essa mudança adiciona todas as imagens PNG na pasta /assets
ao grupo de recursos app
. Como o installMode
desse grupo de recursos está definido como prefetch
, o service worker vai pré-armazenar em cache todos os recursos especificados, que agora incluem imagens PNG.
Especificar outros recursos para pré-cache também é simples: atualize os padrões no grupo de recursos app
.
Conclusão
O uso de um service worker para pré-armazenamento em cache pode melhorar o desempenho dos aplicativos ao salvar recursos em um cache local, o que os torna mais confiáveis em redes ruins. Para usar o pré-armazenamento em cache com o Angular e a CLI do Angular:
- Adicione o pacote
@angular/pwa
ao projeto. - Controle o que o service worker armazena em cache editando
ngsw-config.json
.