Введение

Когда я впервые услышал об этих терминах, я подумал: ладно, они делают то же самое в отдельной ветке. Тогда зачем нам нужны эти два термина?

Но, честно говоря, существуют огромные различия между этими двумя терминами и их поведением.

Постараюсь объяснить подробно.

Между этими двумя есть точки соприкосновения

1. Они выполняются в отдельном потоке, не блокируя основной поток Javascript.

Веб-работник

• Здесь рабочий поток может выполнять задачи, не мешая основному потоку.
• Они используются для задач, требующих значительных ресурсов ЦП, таких как манипулирование/обработка изображений, сложные вычисления и обработка данных.
• У него нет доступа к DOM, и они не могут перехватывать сетевые запросы.
• У него нет жизненного цикла

Сотрудник службы

• Это тип веб-работника с дополнительными возможностями.
• Он может работать отдельно от браузера / даже когда браузер закрыт.
• Это основной компонент PWA, поскольку раньше он включал такие функции, как автономная поддержка, фоновая синхронизация и push-уведомления.
• Он действует как прокси-сервер, который находится между браузером и сетью.

Жизненный цикл сервисного работника

1. Регистрация

• Здесь мы сообщаем браузеру, где находится файл JavaScript нашего сервис-воркера.

if ('serviceWorker' in navigator) {
// wrap it in try/catch / promisses
   await navigator.serviceWorker.register('/service-worker.js')
}

2. Установка

• Когда браузер считает сервис-воркера новым, запускается событие установки.

код ниже, который нам нужно написать в service-worker.js

self.addEventListener('install', (event) => {
// do your operations
})

3. Активация

• После установки оно перейдет сюда

 self.addEventListener('activate', (event) => {
// Do your Operation
})

4. Праздный

• Когда сервисный работник ничего не делает, он находится в состоянии ожидания.

5. получить/сообщение

• Каждый раз, когда создается сетевой запрос/сообщение, сервисный работник просыпается и берет на себя управление.

  self.addEventListener('fetch', (event) => {
  // Do your Opeation
})

6. Прекращение действия

• Если он не используется, браузер завершит работу сервис-воркера, чтобы сэкономить память. Но когда мы не знаем.

Это сохранит сервисных работников на очень долгое время.

Пример:-

в Chrome Откройте эту ссылку, и вы увидите множество зависающих сервисных работников, и вы сможете делать множество вещей, например, проверять/запускать и отправлять сообщения.

chrome://serviceworker-internals/

Как мы можем разбудить работников службы, даже если браузер закрыт.

Примечание:-
В этом конкретном случае мы можем использовать push для пробуждения, но для этого использования необходимо предоставить браузеру разрешение на уведомление, иначе нет никакого способа.

Другие способы актуальны, когда браузер все еще открыт

1. получить событие

• Это событие вызывается всякий раз, когда делается запрос на выборку.

  self.addEventListener('fetch', event => {
  // Handle fetch event
});

2. Сообщение

• Это событие вызывается при получении сообщения от другого скрипта. (Происходит общение Service Worker Другие файлы Javascript)

   self.addEventListener('message', (event) => {
// Handle message Event
})

3. Толкать

• Это событие вызывается при получении push-сообщения

  self.addEventListener('push', (event) => {
// Handle Push Event
})

4. Синхронизировать событие

• Это событие запускается при получении фонового события синхронизации.

  self.addEventListener('sync', (event) => {
// handle background Sync Event
})

Ссылка

1. https://frontendmasters.com/courses/background-javascript