ВАЖНО: Angular Service Worker — это базовая утилита кэширования для простой поддержки автономной работы с ограниченным набором функций. Мы не будем принимать новые функции, за исключением исправлений безопасности. Для более продвинутого кэширования и автономных возможностей мы рекомендуем изучать и использовать нативные API браузера напрямую.
Service Worker-ы дополняют традиционную модель развертывания веб-приложений и позволяют приложениям обеспечивать пользовательский опыт, надежность и производительность которого сопоставимы с кодом, написанным для работы в вашей операционной системе и на вашем оборудовании. Добавление Service Worker-а в Angular-приложение — это один из шагов по превращению приложения в Progressive Web App (также известное как PWA).
В простейшем случае Service Worker — это скрипт, который выполняется в веб-браузере и управляет кэшированием приложения.
Service Worker-ы работают как сетевой прокси.
Они перехватывают все исходящие HTTP-запросы, сделанные приложением, и могут выбирать, как на них отвечать.
Например, они могут запросить локальный кэш и предоставить кэшированный ответ, если он доступен.
Проксирование не ограничивается запросами, выполняемыми через программные API, такие как fetch; оно также включает
ресурсы, на которые есть ссылки в HTML, и даже начальный запрос к index.html.
Таким образом, кэширование на основе Service Worker полностью программируемо и не зависит от заголовков кэширования,
заданных сервером.
В отличие от других скриптов, составляющих приложение (например, бандла Angular-приложения), Service Worker сохраняется после того, как пользователь закрывает вкладку. В следующий раз, когда браузер загружает приложение, Service Worker загружается первым и может перехватывать каждый запрос ресурсов для загрузки приложения. Если Service Worker спроектирован соответствующим образом, он может полностью обеспечить загрузку приложения без необходимости использования сети.
Даже в быстрой и надежной сети задержки при передаче данных (round-trip) могут создавать значительные задержки при загрузке приложения. Использование Service Worker-а для снижения зависимости от сети может значительно улучшить пользовательский опыт.
Service Worker-ы в Angular
Angular-приложения, как SPA (одностраничные приложения), находятся в идеальном положении, чтобы воспользоваться преимуществами Service Worker-ов. Angular поставляется с реализацией Service Worker. Разработчики Angular могут использовать этот Service Worker и получать выгоду от повышенной надежности и производительности, которую он обеспечивает, без необходимости писать код для низкоуровневых API.
Angular Service Worker разработан для оптимизации опыта конечного пользователя при использовании приложения в медленной или ненадежной сети, при этом минимизируя риски предоставления устаревшего контента.
Для достижения этого Angular Service Worker следует следующим принципам:
Кэширование приложения похоже на установку нативного приложения. Приложение кэшируется как единое целое, и все файлы обновляются вместе.
Запущенное приложение продолжает работать с той же версией всех файлов. Оно не начинает внезапно получать кэшированные файлы из более новой версии, которые, вероятно, несовместимы.
Когда пользователи обновляют страницу, они видят последнюю полностью кэшированную версию. Новые вкладки загружают последний кэшированный код.
Обновления происходят в фоновом режиме, относительно быстро после публикации изменений. Предыдущая версия приложения обслуживается до тех пор, пока обновление не будет установлено и готово к использованию.
Service Worker экономит пропускную способность, когда это возможно. Ресурсы загружаются только в том случае, если они изменились.
Для поддержки такого поведения Angular Service Worker загружает файл манифеста с сервера.
Файл с именем ngsw.json (не путать с манифестом веб-приложения)
описывает ресурсы для кэширования и включает хэши содержимого каждого файла.
Когда развертывается обновление приложения, содержимое манифеста меняется, сообщая Service Worker-у, что следует
загрузить и кэшировать новую версию приложения.
Этот манифест создается на основе сгенерированного CLI конфигурационного файла под названием ngsw-config.json.
Установка Angular Service Worker так же проста, как выполнение команды Angular CLI. Помимо регистрации Angular Service Worker в браузере, это также делает доступными для внедрения несколько сервисов, которые взаимодействуют с Service Worker-ом и могут использоваться для управления им. Например, приложение может попросить уведомить его о появлении нового обновления, или приложение может попросить Service Worker проверить сервер на наличие доступных обновлений.
Перед началом работы
Чтобы использовать все возможности Angular Service Worker, используйте последние версии Angular и Angular CLI.
Для регистрации Service Worker-ов доступ к приложению должен осуществляться по протоколу HTTPS, а не HTTP. Браузеры игнорируют Service Worker-ы на страницах, обслуживаемых через небезопасное соединение. Причина в том, что Service Worker-ы довольно мощные, поэтому требуется особая осторожность, чтобы гарантировать, что скрипт Service Worker-а не был подделан.
Существует одно исключение из этого правила: чтобы упростить локальную разработку, браузеры не требуют безопасного
соединения при доступе к приложению на localhost.
Поддержка браузерами
Чтобы воспользоваться преимуществами Angular Service Worker, ваше приложение должно работать в веб-браузере, который поддерживает Service Worker-ы в целом. В настоящее время Service Worker-ы поддерживаются в последних версиях Chrome, Firefox, Edge, Safari, Opera, UC Browser ( версия для Android) и Samsung Internet. Браузеры, такие как IE и Opera Mini, не поддерживают Service Worker-ы.
Если пользователь заходит в ваше приложение через браузер, который не поддерживает Service Worker-ы, Service Worker не регистрируется, и связанное с ним поведение, такое как управление офлайн-кэшем и push-уведомления, не работает. Более конкретно:
- Браузер не загружает скрипт Service Worker-а и файл манифеста
ngsw.json. - Активные попытки взаимодействия с Service Worker-ом, такие как вызов
SwUpdate.checkForUpdate(), возвращают отклоненные промисы (rejected promises). - Observable-события связанных сервисов, такие как
SwUpdate.available, не срабатывают.
Настоятельно рекомендуется убедиться, что ваше приложение работает даже без поддержки Service Worker в браузере.
Хотя неподдерживаемый браузер игнорирует кэширование Service Worker-а, он все равно сообщает об ошибках, если приложение
пытается взаимодействовать с Service Worker-ом.
Например, вызов SwUpdate.checkForUpdate() возвращает отклоненные промисы.
Чтобы избежать такой ошибки, проверьте, включен ли Angular Service Worker, используя SwUpdate.isEnabled.
Чтобы узнать больше о других браузерах, готовых к работе с Service Worker, посетите страницу Can I Use и документацию MDN.
Связанные ресурсы
Остальные статьи в этом разделе посвящены конкретно реализации Service Worker в Angular.
Для получения дополнительной информации о Service Worker-ах в целом см. Service Workers: an Introduction.
Для получения дополнительной информации о поддержке браузерами см. раздел browser support в статье Service Workers: an Introduction, статью Джейка Арчибальда Is Serviceworker ready? и Can I Use.
Дополнительные рекомендации и примеры см. здесь:
Следующий шаг
Чтобы начать использовать Angular Service Worker, см. Начало работы с Service Worker.