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

Service worker по сути является прокси-сервером между сетью и вашей веб-страницей. Что ты с этим делаешь? Множество вещей. Очевидным является просто кеширование ресурсов для автономного доступа. Но мы можем пойти дальше этого. У нас может быть изображение по умолчанию, так как, если оно не найдено на сервере (а не просто обычный значок сломанного изображения), мы можем заменять изображения на лету в зависимости от браузера (например, используя WebP, если он поддерживается, и возвращаясь к PNG, если нет).

Сервис-воркеры также поддерживают push-уведомления. Традиционно одна из основных причин перехода к нативному или гибридному приложению через веб-страницу.

Так каковы же ограничения?

  • Поскольку сервис-воркер работает в совершенно другом потоке по сравнению с основным потоком JavaScript, это означает, что у нас нет доступа к DOM, что также означает, что глобальные переменные недопустимы, поскольку они обычно находятся в объекте окна.
  • Сервис-воркеры поддерживают только вызовы в асинхронном стиле (подумайте об обещаниях), а не синхронные (например, XHR и LocalStorage).
  • Service worker изначально загружается только после загрузки первой страницы, поэтому, если вы перехватываете звонки, вы пропустите первые.

Поэтому следует учитывать еще кое-что: служебный воркер будет загружаться каждые 24 часа или раньше, в зависимости от ситуации. Сервис-воркеры работают только по https-соединениям или через localhost (что отлично подходит для разработки)

Хватит писать, давайте рассмотрим несколько примеров.

Некоторая начальная настройка. Я предполагаю, что вы уже включили JavaScript, который создали сами (т. Е. Код вашего приложения).

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

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

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

Здесь немного сложнее, но легко объяснимо. Мы обрабатываем два события. «Установить» и «получить».

Установка происходит, когда сервис-воркер загружается с сервера и устанавливается в браузер. Это вызывается каждый раз, когда сервис-воркер обновляется (т. Е. Каждые 24 часа или раньше).

В обработчике установки мы определяем локальный асинхронный метод onInstall, открываем именованный кеш (или создаем, если он не существует) и добавляем массив имен файлов для получения с сервера. Это основная часть вашего предварительного кэширования.

Обработчик выборки так же прост. Выборка происходит при каждом вызове сервера. Это ваша основная функция прокси.

А теперь давайте немного повеселимся.

Поэтому каждый раз, когда мы запрашиваем Cat.jpg, мы возвращаем Dog.jpg (потому что собаки явно лучше кошек), который мы уже предварительно кэшировали.

Обратной стороной этого действия в сервис-воркере является то, что при первой загрузке страницы будет загружен файл Cat.jpg, так как сервис-воркер еще не установлен.

Хорошо, что-то более практичное, как насчет отображения вашего собственного изображения с отсутствующим логотипом для любых битых изображений?

Немного больше, но очень похоже на предыдущий пример.

Мы определяем наш резервный образ, в этом случае мы встраиваем SVG в нашего сервис-воркера.

Наша функция установки все та же, и кеш здесь можно удалить, если мы захотим.

Затем мы изменили нашу функцию выборки. Сначала мы смотрим на сеть, поэтому у нас есть самая последняя информация, затем кеш, если он не найден в сети (мы можем быть в автономном режиме), а затем, если это не удается, мы выдаем ошибку и возвращаем наш встроенный SVG.

Это лишь малая часть того, что мы можем сделать с сервис-воркерами. В Интернете есть множество ресурсов, чтобы продолжить с этим, один из моих любимых - https://serviceworke.rs, где есть несколько хороших заранее написанных рецептов для использования.

Если хотите узнать больше, приходите пообщаться с командой Momenton.