Cómo almacenar previamente en caché con el service worker de Angular

Usa el service worker de Angular para que tu app sea más rápida y confiable en redes con conectividad deficiente.

Minko Gechev

Qué hacer ante una conectividad limitada

Cuando los usuarios tienen acceso limitado a la red (o ninguno en absoluto), la funcionalidad de la aplicación web puede verse afectada de forma significativa y, a menudo, falla. El uso de un service worker para proporcionar almacenamiento previo en caché te permite interceptar solicitudes de red y entregar respuestas directamente desde una caché local en lugar de recuperarlas de la red. Una vez que los elementos de tu app se almacenan en caché, este enfoque puede acelerar una app y hacer que funcione cuando el usuario no tiene conexión.

En esta publicación, se explica cómo configurar el almacenamiento previo en caché en una app de Angular. Se supone que ya conoces el almacenamiento previo en caché y los service workers en general. Si necesitas hacer un repaso, consulta la publicación sobre los service workers y la API de Cache Storage.

Presentación del service worker de Angular

El equipo de Angular ofrece un módulo de service worker con funcionalidad de almacenamiento previo en caché que está bien integrada en el framework y la interfaz de línea de comandos (CLI) de Angular.

Para agregar el service worker, ejecuta este comando en la CLI:

ng add @angular/pwa

@angular/service-worker y @angular/pwa ahora deberían estar instalados en la app y deberían aparecer en package.json. El esquema de ng-add también agrega un archivo llamado ngsw-config.json al proyecto, que puedes usar para configurar el service worker. (El archivo incluye una configuración predeterminada que personalizarás más adelante).

Ahora, compila el proyecto para producción:

ng build --prod

Dentro del directorio dist/service-worker-web-dev, encontrarás un archivo llamado ngsw.json. Este archivo le indica al service worker de Angular cómo almacenar en caché los elementos en la app. El archivo se genera durante el proceso de compilación según la configuración (ngsw-config.json) y los elementos producidos durante el tiempo de compilación.

Ahora, inicia un servidor HTTP en el directorio que contiene los recursos de producción de tu app, abre la URL pública y revisa sus solicitudes de red en Herramientas para desarrolladores de Chrome:

  1. Presiona `Control + Mayúsculas + J` (o `Command + Option + J` en Mac) para abrir Herramientas para desarrolladores.
  2. Haga clic en la pestaña Red.

Ten en cuenta que la pestaña de red tiene muchos elementos estáticos descargados directamente en segundo plano por la secuencia de comandos ngsw-worker.js:

App de ejemplo

Este es el service worker de Angular que almacena previamente en caché los elementos estáticos especificados en el archivo de manifiesto ngsw.json generado.

Sin embargo, falta un recurso importante: nyan.png. Para almacenar en caché por adelantado esta imagen, debes agregar un patrón que la incluya a ngsw-config.json, que se encuentra en la raíz del lugar de trabajo:

{
  "$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"
        ]
      }
    },
    ...
}

Con este cambio, se agregan todas las imágenes PNG de la carpeta /assets al grupo de recursos app. Como el installMode de este grupo de recursos se estableció en prefetch, el service worker almacenará previamente en caché todos los recursos especificados, que ahora incluyen imágenes PNG.

Especificar otros elementos para que se almacenen previamente en caché es igual de sencillo: actualiza los patrones en el grupo de recursos de recursos app.

Conclusión

El uso de un service worker para almacenamiento previo en caché puede mejorar el rendimiento de tus apps, ya que guarda recursos en una caché local, lo que las hace más confiables en redes de mala calidad. Para usar el almacenamiento previo en caché con Angular y la CLI de Angular, sigue estos pasos:

  1. Agrega el paquete @angular/pwa a tu proyecto.
  2. Edita ngsw-config.json para controlar lo que almacena en caché el service worker.