Предварительное кэширование с помощью сервис-воркера Angular

Используйте Angular Service Worker, чтобы сделать ваше приложение более быстрым и надежным в сетях с плохим соединением.

Minko Gechev

Работа с ограниченной связью

Когда у пользователей ограниченный сетевой доступ или его нет вообще, функциональность веб-приложения может значительно ухудшиться и часто давать сбои. Использование service worker для обеспечения предварительного кэширования позволяет перехватывать сетевые запросы и доставлять ответы напрямую из локального кэша, а не извлекать их из сети. После того, как ресурсы вашего приложения кэшированы, этот подход может действительно ускорить приложение и заставить его работать, когда пользователь находится в автономном режиме.

В этой статье рассказывается, как настроить предварительное кэширование в приложении Angular. Предполагается, что вы уже знакомы с предварительным кэшированием и service workers в целом. Если вам нужно освежить знания, ознакомьтесь с публикацией Service workers и Cache Storage API .

Знакомимся с сервис-воркером Angular

Команда Angular предлагает модуль Service Worker с функцией предварительного кэширования, который хорошо интегрирован с фреймворком и интерфейсом командной строки (CLI) Angular .

Чтобы добавить Service Worker, выполните следующую команду в CLI:

ng add @angular/pwa

@angular/service-worker и @angular/pwa теперь должны быть установлены в приложении и должны появиться в package.json . Схема ng-add также добавляет файл ngsw-config.json в проект, который вы можете использовать для настройки service worker. (Файл включает конфигурацию по умолчанию, которую вы настроите немного позже.)

Теперь соберите проект для производства:

ng build --prod

Inside the dist/service-worker-web-dev directory you'll find a file called ngsw.json . This file tells the Angular service worker how to cache the assets in the app. The file is generated during the build process based on the configuration ( ngsw-config.json ) and the assets produced at build time.

Теперь запустите HTTP-сервер в каталоге, содержащем производственные ресурсы вашего приложения, откройте общедоступный URL-адрес и проверьте его сетевые запросы в Chrome DevTools:

1. Нажмите `Control+Shift+J` (или `Command+Option+J` на Mac), чтобы открыть DevTools.
2. Перейдите на вкладку «Сеть» .

Обратите внимание, что на вкладке «Сеть» имеется ряд статических ресурсов, напрямую загружаемых в фоновом режиме скриптом ngsw-worker.js :

Это сервис-воркер Angular, который предварительно кэширует статические ресурсы, указанные в сгенерированном файле манифеста ngsw.json .

Однако отсутствует один важный ресурс: nyan.png . Чтобы предварительно кэшировать это изображение, вам нужно добавить шаблон, который включает его в ngsw-config.json , который находится в корне рабочей области:

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

Это изменение добавляет все изображения PNG в папке /assets в группу ресурсов ресурса app . Поскольку installMode для этой группы ресурсов установлен на prefetch , service worker предварительно кэширует все указанные ресурсы, которые теперь включают изображения PNG.

Указать другие ресурсы для предварительного кэширования так же просто: обновите шаблоны в группе ресурсов app .

Заключение

Использование service worker для предварительного кэширования может улучшить производительность ваших приложений, сохраняя ресурсы в локальном кэше, что делает их более надежными в плохих сетях. Чтобы использовать предварительное кэширование с Angular и Angular CLI:

1. Добавьте пакет @angular/pwa в свой проект.
2. Управляйте тем, что кэширует service worker, редактируя ngsw-config.json .