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

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

Minko Gechev

Lidar com conectividade limitada

Quando os usuários têm acesso limitado à rede (ou nenhum acesso), a funcionalidade do aplicativo da Web pode ser significativamente prejudicada e muitas vezes falha. Usar um service worker para fornecer armazenamento em cache permite interceptar solicitações de rede e entregar 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é-armazenamento em cache em um app do Angular. Você precisa estar familiarizado com pré-armazenamento em cache e service workers 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 service worker, execute este comando na CLI:

ng add @angular/pwa

@angular/service-worker e @angular/pwa agora estão instalados no app e aparecem em 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ê 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 tempo de build.

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 confira 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 transferidos por download 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.

Um recurso importante está faltando: nyan.png. Para pré-armazenar essa imagem em cache, você precisa adicionar um padrão que a inclua no arquivo 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 serem armazenados em cache é simples: atualize os padrões no grupo de recursos de recursos app.

Conclusão

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

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