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 a conectividade limitada

Quando os usuários têm acesso limitado à rede ou nenhum acesso, a funcionalidade do app da Web pode ficar significativamente comprometida e, muitas vezes, falhar. Usar um service worker para fornecer pré-cache permite interceptar solicitações de rede e fornecer respostas diretamente de um cache local, em vez de recuperá-las da rede. Uma vez que os recursos do seu aplicativo tenham sido armazenados em cache, essa abordagem pode realmente acelerar o aplicativo e fazer com que ele funcione quando o usuário estiver off-line.

Esta postagem explica como configurar o pré-cache em um app do Angular. Ela pressupõe que você já conhece o pré-cache e os workers de serviço em geral. Para refrescar a memória, 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 que é bem integrada ao framework e à interface de linha de comando (CLI) do Angular.

Para adicionar o worker de serviço, execute este comando na CLI:

ng add @angular/pwa

@angular/service-worker e @angular/pwa agora estão instalados no app e aparecem no package.json. O esquema ng-add também adiciona um arquivo chamado ngsw-config.json ao projeto, que você pode usar para configurar o service worker. O arquivo inclui uma configuração padrão que você vai personalizar 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 em cache os recursos no app. O arquivo é gerado durante o processo de build com base na configuração (ngsw-config.json) e nos recursos produzidos no momento do build.

Agora, inicie um servidor HTTP no diretório que contém os recursos de produção do app, abra o URL público e confira as solicitações de rede dele 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 de rede tem vários recursos estáticos baixados diretamente em segundo plano pelo script ngsw-worker.js:

App de exemplo

Esse é o service worker do Angular que armazena em cache os recursos estáticos especificados no arquivo de manifesto ngsw.json gerado.

No entanto, um recurso importante está faltando: nyan.png. Para pré-cachear essa imagem, adicione um padrão que a inclua em ngsw-config.json, que fica 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 armazenará em cache todos os recursos especificados, que agora incluem imagens PNG.

Especificar outros recursos para pré-cachear é igualmente simples: atualize os padrões no grupo de recursos app.

Conclusão

O uso de um service worker para pré-cachear pode melhorar o desempenho dos seus apps salvando recursos em um cache local, o que os torna mais confiáveis em redes ruins. Para usar a pré-cache com o Angular e a CLI do Angular:

  1. Adicione o pacote @angular/pwa ao projeto.
  2. Edite ngsw-config.json para controlar o que o worker de serviço armazena em cache.