Используйте Angular Service Worker, чтобы сделать ваше приложение более быстрым и надежным в сетях с плохим соединением.
Работа с ограниченной связью
Когда у пользователей ограниченный сетевой доступ или его нет вообще, функциональность веб-приложения может значительно ухудшиться и часто давать сбои. Использование 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:
- Нажмите `Control+Shift+J` (или `Command+Option+J` на Mac), чтобы открыть DevTools.
- Перейдите на вкладку «Сеть» .
Обратите внимание, что на вкладке «Сеть» имеется ряд статических ресурсов, напрямую загружаемых в фоновом режиме скриптом 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:
- Добавьте пакет
@angular/pwa
в свой проект. - Управляйте тем, что кэширует service worker, редактируя
ngsw-config.json
.