Используйте сервис-воркер 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:
- Нажмите «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 , сервис-воркер будет предварительно кэшировать все указанные ресурсы, которые теперь включают изображения PNG.
Указать другие ресурсы для предварительного кэширования так же просто: обновите шаблоны в группе ресурсов ресурсов app .
Заключение
Использование сервис-воркера для предварительного кэширования может повысить производительность ваших приложений за счет сохранения ресурсов в локальном кеше, что делает их более надежными в плохих сетях. Чтобы использовать предварительное кэширование с Angular и Angular CLI:
- Добавьте пакет
@angular/pwaв свой проект. - Управляйте тем, что кэширует сервис-воркер, редактируя
ngsw-config.json.