Автор оригинала: Flavio Copes.
Работники обслуживания в ядре Прогрессивные веб-приложения . Они позволяют кэшировать ресурсы и толкающие уведомления, которые являются двумя основными отличительными функциями, которые находятся нативные приложения друг от друга до этого момента.
Сервисский работник – это Программируемый прокси Между вашей веб-страницей и сетью, которая предоставляет возможность перехватить и кэшировать сетевые запросы. Это эффективно позволяет вам Создайте оффлайн-первый опыт для вашего приложения Отказ
Работники обслуживания являются специальным видом веб-рабочих: файл JavaScript, связанный с веб-страницей, которая работает на контексте работника, отдельно от основного потока. Это дает выгоду от неблокирования – поэтому вычисления могут быть сделаны, не жертвуя отзывчивостью пользовательского интерфейса.
Поскольку он находится на отдельной резьбе, у него нет доступа DOM. У него нет доступа к локальному хранению API и API XHR. Это может только общаться обратно только к основной нити, используя Обмен сообщениями канала API Отказ
Сервисные работники сотрудничают с другими недавними веб-API:
- Обещания
- Fetch API.
- Cache API
И они Доступно только на HTTPS Страницы протокола (кроме локальных запросов, которые не требуют безопасного подключения. Это облегчает тестирование.).
Фоновая обработка
Сервисные работники работают независимо от приложения, с которыми они связаны, и они могут получать сообщения, когда они не активны.
Например, они могут работать:
- Когда ваше мобильное приложение это На заднем плане , не активен
- Когда ваше мобильное приложение это закрыто и даже не бегать на заднем плане
- Когда браузер закрыт С Если приложение работает в браузере
Основные сценарии, где работники обслуживания очень полезны:
- Они могут быть использованы в качестве Кэширующий слой Чтобы обрабатывать сетевые запросы и контент кэширования, который будет использоваться при внедрении в автономном режиме
- Они могут разрешить всплывающие уведомления
Сервисный работник работает только при необходимости, и он остановлен, когда не используется.
Оффлайн поддержка
Традиционно опыт в автономном режиме для веб-приложений был очень плохой. Без сети часто мобильные веб-приложения просто не будут работать. Нативные мобильные приложения, с другой стороны, имеют возможность предлагать либо рабочую версию, либо какое-то хорошее сообщение.
Это не хорошее сообщение, но это то, что веб-страницы выглядят в Chrome без сетевого подключения:
Возможно, единственная хорошая вещь в том, что вы играете в бесплатную игру, щелкнув на динозавр – но это становится скучным довольно быстро.
В недавнем прошлом HTML5 AppCache уже обещал позволить веб-приложениям кэшировать ресурсы и работать в автономном режиме. Но его отсутствие гибкости и запутанного поведения дало понять, что это не было достаточно хорошей для работы (и это было прекращено ).
Сервисные работники являются новым стандартом для офлайн-кэширования.
Какой вид кэширования возможен?
Активы предотвращают активы во время установки
Активы, которые используются на протяжении всего приложения, такие как изображения, CSS, файлы JavaScript, могут быть установлены в первый раз, когда приложение открывается.
Это дает основание того, что называется Архитектура приложения Shell Отказ
Кэширование сетевых запросов
Используя Fetch API, Мы можем редактировать ответ от сервера, определение, если сервер не доступен и предоставляет ответ от кэша вместо этого.
Срок службы обслуживания
Сервисный работник проходит через три шага, чтобы стать полностью функциональным:
- Регистрация
- Установка
- Активация
Регистрация
Регистрация сообщает браузеру, где является работник сервера, и он запускает установку на заднем плане.
Пример код для регистрации сервисного работника, размещенного в рабочий.js :
if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/worker.js') .then((registration) => { console.log('Service Worker registration completed with scope: ', registration.scope) }, (err) => { console.log('Service Worker registration failed', err) }) })} else { console.log('Service Workers not supported') }Даже если этот код называется несколько раз, браузер будет выполнять только регистрацию, только если обслуживающий рабочий только новый и не зарегистрирован ранее, или если он был обновлен.
Сфера
Регистрация () Вызов также принимает параметр области охвата, который является путь, который определяет, какая часть вашего приложения может контролироваться сервисным работником.
По умолчанию обозначает все файлы и подпапки, содержащиеся в папке, содержащем файл сервисного работника, поэтому, если вы поместите его в корневую папку, он будет контролировать все приложение. В подпапке он будет только контрольными страницами, доступными под этим маршрутом.
Пример ниже регистрирует работник, указав /Уведомления/ Область папки.
navigator.serviceWorker.register('/worker.js', { scope: '/notifications/' }) / Важно: в этом случае страница /Уведомления не будет вызвать сервис-служба, а если область
{ scope: '/notifications' }Это было бы сработать.
ЗАМЕТКА: Сервисский работник не может «встать» из папки: если его файл положен под /Уведомления это не может контролировать / путь или любой другой путь, который не под /Уведомления .
Установка
Если браузер определяет, что сервисный работник устарел или никогда не был зарегистрирован ранее, он будет продолжаться, чтобы установить его.
self.addEventListener('install', (event) => { //... });Это прекрасное время для подготовки работника услуг, который будет использоваться Инициализация кеша. Тогда Кэш приложение Shell и статические активы, использующие Cache API Отказ
Активация
После успешного зарегистрированного работника службы успешно зарегистрирован, третий шаг – активация.
На данный момент обслуживающий работник сможет работать с новыми нагрузками страницы.
Он не может взаимодействовать со страницами, уже загруженными, поэтому работник услуг полезен только во второй раз, когда пользователь взаимодействует с приложением или перезагружает одну из страниц, уже открытых.
self.addEventListener('activate', (event) => { //... });Хорошим применением для этого события является очистка старых кэшей и вещей, связанных со старой версией, которая не используется в новой версии сервисного работника.
Обновление сервисного работника
Чтобы обновить сервисный работник, вам просто нужно изменить один байт в нем. Когда код регистра запускается, он будет обновлен.
Как только сервисный работник обновляется, он не будет доступен до тех пор, пока все страницы не будут загружены с прикрепленными рабочей работой старого сервиса, закрыты.
Это гарантирует, что ничто не сломается на приложениях/страницах, которые уже работают.
Освежая страницу недостаточно, так как старый работник все еще работает, и он не был удален.
Извлечь события
А Fetch Event уволен, когда ресурс запрашивается в сеть.
Это предлагает нам возможность Посмотри в кэш прежде чем делать сетевые запросы.
Например, фрагмент ниже использует Cache API Чтобы проверить, был ли запрошенный URL уже хранится в кэшированных ответах. Если это так, он возвращает кэшированный ответ. В противном случае он выполняет запрос Fetch и возвращает его.
self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request) .then((response) => { if (response) { //entry found in cache return response } return fetch(event.request) } ) ) })Фон синхронизация
Фон синхронизация позволяет отложить исходящие соединения до тех пор, пока пользователь не имеет рабочей сетевой связи.
Это ключ, чтобы убедиться, что пользователь может использовать приложение в автономном режиме, предпринимать на нем на него действия и обновления на стороне очереди, когда появляется открытие соединения (вместо того, чтобы отображать бесконечное вращающееся колесо, пытаясь получить сигнал).
navigator.serviceWorker.ready.then((swRegistration) => { return swRegistration.sync.register('event1') });Этот код слушает событие на сервисном работнике:
self.addEventListener('sync', (event) => { if (event.tag == 'event1') { event.waitUntil(doSomething()) } })dosomething () возвращает обещание. Если он не удается, другое событие синхронизации будет запланировано автоматически повторить попытку, пока он не будет успешным.
Это также позволяет приложение для обновления данных с сервера, как только доступно рабочее соединение.
Толкать события
Работники обслуживания позволяют веб-приложениям предоставлять пользователю нативные Push-уведомления.
Push и Уведомления на самом деле являются двумя разными концепциями и технологиями, которые объединяются, чтобы обеспечить то, что мы знаем как Push-уведомления Отказ Нажмите, предоставляет механизм, который позволяет серверу отправлять информацию на сервисный работник, и уведомления – это способ, которым работники обслуживания могут отображать информацию пользователю.
Поскольку обслуживание работников работает, даже когда приложение не работает, они могут слушать наступающие события. Затем они либо предоставляют уведомления пользователя, либо обновляют состояние приложения.
Push Events инициируются бэкэндом, через Push-браузер Push-сервис, подобный тому, который предоставлен Firebase Отказ
Вот пример того, как веб-работник может слушать входящие толкающие события:
self.addEventListener('push', (event) => { console.log('Received a push event', event) const options = { title: 'I got a message for you!', body: 'Here is the body of the message', icon: '/img/icon-192x192.png', tag: 'tag-for-this-notification', } event.waitUntil( self.registration.showNotification(title, options) ) })
Примечание о консольных журналах:
Если у вас есть какие-либо оператор журнала консоли ( Console.log и друзья) на сервисном работнике, убедитесь, что вы включаете Сохранить журнал Функция, предоставляемая Chrome devtools (или эквивалентом).
В противном случае, поскольку сервисный работник действует до того, как страница загружается, и консоль очищена перед загрузкой страницы, вы не увидите журнал в консоли.
Оригинал: “https://www.freecodecamp.org/news/service-workers-the-little-heroes-behind-progressive-web-apps-431cc22d0f16/”