Пользователи ожидают, что приложения будут запускаться при медленном или нестабильном сетевом соединении или даже в автономном режиме. Они ожидают, что контент, с которым они в последний раз взаимодействовали, например медиа-треки, билеты и маршруты, будет доступен и пригоден для использования. Когда запрос невозможен, они ожидают, что приложение сообщит им об этом, а не просто выдаст ошибку или выйдет из строя. И пользователи хотят сделать все это быстро. Как мы видим в этом исследовании , миллисекунды приносят миллионы , даже улучшение времени загрузки на 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-уведомления и обработка платежей. Мы обсудим эти дополнения в главе о возможностях .