Angular service worker введение¶

28.02.2022

Рабочие службы дополняют традиционную модель развертывания веб-приложений и позволяют приложениям предоставлять пользовательский опыт с надежностью и производительностью наравне с кодом, написанным для работы на вашей операционной системе и оборудовании. Добавление сервисного работника в приложение Angular является одним из шагов для превращения приложения в Progressive Web App (также известное как PWA).

В самом простом виде service worker — это скрипт, который запускается в веб-браузере и управляет кэшированием приложения.

Рабочие службы функционируют как сетевой прокси. Они перехватывают все исходящие HTTP-запросы, сделанные приложением, и могут выбирать, как на них отвечать.

Например, они могут запрашивать локальный кэш и предоставлять кэшированный ответ, если он доступен.

Проксирование не ограничивается запросами, сделанными через программные API, такие как fetch; оно также включает ресурсы, на которые ссылается HTML, и даже начальный запрос к index.html.

Таким образом, кэширование на основе Service worker является полностью программируемым и не зависит от определенных сервером заголовков кэширования.

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

Если сервисный работник спроектирован таким образом, он может полностью удовлетворить загрузку приложения, не нуждаясь в сети.

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

Service worker в Angular¶

Приложения Angular, как одностраничные приложения, находятся в выгодном положении, чтобы воспользоваться преимуществами service worker. Начиная с версии 5.0.0, Angular поставляется с реализацией service worker.

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

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

Для достижения этой цели работник службы Angular следует следующим рекомендациям:

Кэширование приложения подобно установке родного приложения.

Приложение кэшируется как единое целое, и все файлы обновляются вместе.
Работающее приложение продолжает работать с одной и той же версией всех файлов.

Оно не начинает внезапно получать кэшированные файлы из более новой версии, которые, скорее всего, несовместимы.
Когда пользователи обновляют приложение, они видят последнюю полностью кэшированную версию.

Новые вкладки загружают последний кэшированный код.
Обновления происходят в фоновом режиме, относительно быстро после публикации изменений.

Пока обновление не установлено и не готово, обслуживается предыдущая версия приложения.
Рабочий сервис экономит пропускную способность, когда это возможно.

Ресурсы загружаются только в том случае, если они изменились.

Для поддержки такого поведения работник службы Angular загружает с сервера файл manifest. Файл, называемый ngsw.json (не путать с web app manifest), описывает ресурсы для кэширования и включает хэши содержимого каждого файла.

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

Этот манифест генерируется из конфигурационного файла CLI под названием ngsw-config.json.

Установка Angular service worker так же проста, как включение NgModule. Помимо регистрации Angular service worker в браузере, это также делает доступными для внедрения несколько сервисов, которые взаимодействуют с сервисным работником и могут быть использованы для управления им. Например, приложение может запросить уведомление о появлении нового обновления, или приложение может попросить сервис-работника проверить сервер на наличие доступных обновлений.

Предварительные условия¶

Чтобы использовать все возможности Angular service workers, используйте последние версии Angular и Angular CLI.

Чтобы рабочие службы были зарегистрированы, доступ к приложению должен осуществляться по протоколу HTTPS, а не HTTP. Браузеры игнорируют рабочие службы на страницах, которые обслуживаются через небезопасное соединение.

Причина в том, что рабочие службы являются достаточно мощными, поэтому нужно быть особенно внимательным, чтобы убедиться, что скрипт рабочей службы не был подделан.

Из этого правила есть одно исключение: чтобы сделать локальную разработку более простой, браузеры не требуют безопасного соединения при доступе к приложению на localhost.

Поддержка браузеров¶

Чтобы воспользоваться преимуществами Angular service worker, ваше приложение должно работать в веб-браузере, который поддерживает service worker в целом. В настоящее время сервис-работники поддерживаются в последних версиях Chrome, Firefox, Edge, Safari, Opera, UC Browser (Android version) и Samsung Internet.

Такие браузеры, как IE и Opera Mini, не поддерживают service workers.

Если пользователь обращается к вашему приложению через браузер, который не поддерживает сервисные работники, сервисный работник не регистрируется, и связанные с ним действия, такие как автономное управление кэшем и push-уведомления, не происходят. Более конкретно:

Браузер не загружает сценарий работника службы и файл манифеста ngsw.json.
Активные попытки взаимодействия с работником сервиса, например, вызов SwUpdate.checkForUpdate(), возвращают отклоненные обещания
Наблюдаемые события связанных сервисов, такие как SwUpdate.available, не запускаются.

Настоятельно рекомендуется убедиться, что ваше приложение работает даже без поддержки service worker в браузере. Хотя браузер без поддержки игнорирует кэширование работников служб, он все равно сообщает об ошибках, если приложение пытается взаимодействовать с работником службы.

Например, вызов SwUpdate.checkForUpdate() возвращает отклоненные обещания.

Чтобы избежать такой ошибки, проверьте, включен ли работник сервиса Angular, используя SwUpdate.isEnabled.

Чтобы узнать больше о других браузерах, готовых к работе с рабочими службами, смотрите страницу Can I Use и MDN docs.

Связанные ресурсы¶

Остальные статьи в этом разделе посвящены реализации рабочих служб в Angular.

Более подробную информацию о рабочих службах в целом смотрите в Service Workers: an Introduction.

Более подробную информацию о поддержке браузеров см. в разделе Поддержка браузеров в Service Workers: an Introduction, в статьях Джейка Арчибальда Готов ли Serviceworker? и Можно ли использовать.

Дополнительные рекомендации и примеры см:

Следующие шаги¶

Чтобы начать использовать Angular service workers, смотрите Getting Started with service workers.