Пользователи ожидают, что приложения будут надежно запускаться при медленном или нестабильном сетевом подключении или даже в автономном режиме. Они ожидают, что контент, с которым они недавно взаимодействовали, например медиа-треки, билеты и маршруты, будет доступен и пригоден для использования. Когда запрос невозможен, они ожидают, что приложение сообщит им об этом, а не просто выдаст ошибку или выйдет из строя. И они хотят, чтобы все это произошло быстро. Как видите , улучшение времени загрузки даже на 0,1 секунды может повысить конверсию на 10 %. Сервис-воркеры — это инструмент, который позволяет вашему прогрессивному веб-приложению (PWA) соответствовать ожиданиям ваших пользователей.
Когда приложение запрашивает ресурс, входящий в область действия Service Worker, Service Worker перехватывает запрос и действует как сетевой прокси, даже если пользователь находится в автономном режиме. Затем он может решить, следует ли обслуживать ресурс из кеша с помощью API Cache Storage, обслуживать его из сети, как если бы не было активного сервис-воркера, или создавать его на основе локального алгоритма. Это позволяет вам обеспечить высокое качество работы, как в платформенном приложении, даже если ваше приложение находится в автономном режиме.
Зарегистрируйте сервисного работника
Прежде чем сервисный работник получит контроль над вашей страницей, она должна быть зарегистрирована для вашего PWA. Это означает, что когда пользователь впервые открывает ваш PWA, все его сетевые запросы направляются непосредственно на ваш сервер, поскольку сервисный работник еще не имеет контроля над вашими страницами.
После проверки того, поддерживает ли браузер API Service Worker, ваш PWA может зарегистрировать Service Worker. После загрузки сервис-воркер устанавливается между вашим PWA и сетью, перехватывая запросы и предоставляя соответствующие ответы.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceworker.js");
}
Проверьте, зарегистрирован ли сервисный работник
Чтобы проверить, зарегистрирован ли сервисный работник, используйте инструменты разработчика в своем любимом браузере.
В браузерах Firefox и Chromium (Microsoft Edge, Google Chrome или Samsung Internet):
- Откройте инструменты разработчика, затем перейдите на вкладку «Приложение» .
- На левой панели выберите Service Workers .
- Убедитесь, что URL-адрес сценария сервисного работника отображается со статусом «Активирован». (Дополнительную информацию см. в разделе Жизненный цикл ). В Firefox статус может быть «Работает» или «Остановлен».
В Сафари:
- Нажмите «Разработка » > «Service Workers» .
- Проверьте это меню на наличие записи с текущим источником. Щелкнув эту запись, вы откроете инспектор контекста сервис-воркера.
Объем
Папка, в которой находится ваш сервисный работник, определяет его область действия. Сервисный работник, проживающий по адресу example.com/my-pwa/sw.js может управлять любой навигацией по пути my-pwa или под ним, например example.com/my-pwa/demos/ . Сервисные работники могут управлять только элементами (страницами, рабочими процессами, совместно «клиентами») в своей области действия. Эта область действия применяется к вкладкам браузера и окнам PWA.
В каждой области разрешен только один сервисный работник. Когда сервис-воркер активен и работает, обычно доступен только один экземпляр, независимо от того, сколько клиентов (окна PWA или вкладки браузера) находятся в памяти.
Safari имеет более сложное управление областью действия, известное как разделы, которое влияет на работу областей действия с междоменными iframe. Чтобы узнать больше о реализации WebKit, обратитесь к их сообщению в блоге .
Жизненный цикл
У сервисных работников есть жизненный цикл, определяющий способ их установки, отдельно от установки PWA.
Жизненный цикл сервис-воркера начинается с регистрации сервис-воркера. Затем браузер пытается загрузить и проанализировать рабочий файл службы. Если синтаксический анализ успешен, запускается событие install сервис-воркера. Событие install срабатывает только один раз.
Установка Service Worker происходит автоматически, без разрешения пользователя, даже если пользователь не устанавливает PWA. API Service Worker доступен даже на платформах, которые не поддерживают установку PWA, таких как Safari и Firefox на настольных устройствах.
После установки сервис-воркера необходимо активировать, прежде чем он сможет управлять своими клиентами, включая ваше PWA. Когда работник службы готов управлять своими клиентами, срабатывает событие activate . Однако по умолчанию активированный сервисный работник не может управлять страницей, на которой он был зарегистрирован, до тех пор, пока вы в следующий раз не перейдете на эту страницу, перезагрузив страницу или повторно открыв PWA.
Вы можете прослушивать события в глобальной области сервис-воркера, используя объект self :
сервисворкер.js
// This code executes in its own worker or thread
self.addEventListener("install", event => {
console.log("Service worker installed");
});
self.addEventListener("activate", event => {
console.log("Service worker activated");
});
Обновление сервисного работника
Сервис-воркеры обновляются, когда браузер обнаруживает, что сервис-воркер, управляющий клиентом, и новая версия файла сервис-воркера с сервера различаются по байтам.
После успешной установки новый работник службы ожидает активации до тех пор, пока старый работник службы не перестанет контролировать клиентов. Это состояние называется «ожиданием», и именно так браузер гарантирует, что одновременно работает только одна версия вашего сервис-воркера.
Обновление страницы или повторное открытие PWA не заставит нового сервисного работника взять на себя управление. Пользователь должен закрыть или перейти со всех вкладок и окон с помощью текущего сервис-воркера, а затем вернуться назад, чтобы передать управление новому сервис-воркеру. Дополнительные сведения см. в разделе Жизненный цикл сервисного работника .
Продолжительность жизни сервисного работника
Установленный и зарегистрированный сервис-воркер может управлять всеми сетевыми запросами в пределах своей области действия. Он работает в своем собственном потоке, а его активация и завершение контролируется браузером, что позволяет ему работать даже до того, как PWA будет открыто или после его закрытия. Сервис-воркеры работают в своем собственном потоке, но состояние в памяти может не сохраняться между запусками сервис-воркера, поэтому убедитесь, что все, что вы хотите повторно использовать для каждого запуска, доступно либо в IndexedDB, либо в каком-либо другом постоянном хранилище.
Если он еще не запущен, сервис-воркер запускается всякий раз, когда в его области отправляется сетевой запрос или когда он получает триггерное событие, например периодическую фоновую синхронизацию или push-сообщение.
Рабочие службы прекращают работу, если они бездействовали в течение нескольких секунд или были заняты слишком долго. Время для этого варьируется в зависимости от браузера. Если сервисный работник был прекращен и произошло событие, которое могло его запустить, он перезапускается.
Возможности
Зарегистрированный и активный сервис-воркер использует поток с жизненным циклом выполнения, совершенно отличным от основного потока вашего PWA. Однако по умолчанию сам файл сервисного работника не имеет никакого поведения. Он не будет кэшировать и не обслуживать какие-либо ресурсы; это то, что должен делать ваш код. Вы узнаете, как это сделать, в следующих главах.
Возможности Service Worker предназначены не только для прокси-сервера или обслуживания HTTP-запросов. Помимо него доступны и другие функции для других целей, таких как фоновое выполнение кода, веб-push-уведомления и обработка платежей. Мы обсудим эти дополнения в разделе «Возможности» .