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

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

Минко Гечев

Работа с ограниченным подключением

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

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

Знакомство с сервисным работником Angular

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

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

ng add @angular/pwa

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

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

ng build --prod

Внутри каталога dist/service-worker-web-dev вы найдете файл с именем ngsw.json . Этот файл сообщает работнику службы Angular, как кэшировать ресурсы в приложении. Файл создается в процессе сборки на основе конфигурации ( ngsw-config.json ) и ресурсов, созданных во время сборки.

Теперь запустите 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 , сервис-воркер будет предварительно кэшировать все указанные ресурсы, которые теперь включают изображения PNG.

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

Заключение

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

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