Pré-armazenamento em cache com o service worker do Angular

Use o service worker do Angular para tornar seu app mais rápido e confiável em redes com conectividade ruim.

Minko Gechev

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:

1. Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
2. 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:

1. Adicione o pacote @angular/pwa ao projeto.
2. Controle o que o service worker armazena em cache editando ngsw-config.json.