JavaScript Academy · Урок

Регистрация Service Worker

Устанавливайте и активируйте сервис-воркер.

«Регистрация Service Worker» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Что такое сервисный воркер

Сервисный воркер — это скрипт, который браузер запускает в фоновом режиме отдельно от страницы. Он действует как программируемый сетевой прокси: может перехватывать запросы, отдавать кэшированные ответы и обеспечивать работу приложения без подключения к сети.

Определение поддержки функций

Не всякая среда поддерживает сервисные воркеры. Перед регистрацией проверьте наличие navigator.serviceWorker, чтобы в старых браузерах приложение продолжало работать в ограниченном режиме.

if ('serviceWorker' in navigator) {
  // safe to register
}

Регистрация

Зарегистрируйте сервисный воркер, передав URL его скрипта в navigator.serviceWorker.register. Метод возвращает промис, который разрешается объектом регистрации.

navigator.serviceWorker.register('/sw.js')
  .then(reg => console.log('registered, scope:', reg.scope))
  .catch(err => console.log('registration failed:', err));

Область регистрации

Область действия — это набор URL, которыми управляет воркер. По умолчанию это каталог, в котором находится скрипт. Воркер в /sw.js управляет всем сайтом, а воркер в /app/sw.js — только каталогом /app/.

navigator.serviceWorker.register('/app/sw.js');
// Controls pages under /app/ only.

Явная настройка области действия

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

navigator.serviceWorker.register('/sw.js', {
  scope: '/dashboard/'
});

Требование HTTPS

Сервисным воркерам нужен защищённый контекст: в рабочей среде — HTTPS. Для разработки localhost считается защищённым. Это не позволяет злоумышленникам перехватить сетевой прокси.

Событие установки

При первой регистрации воркер запускает событие install. Обычно здесь заранее кэшируют необходимые ресурсы, чтобы приложение работало без подключения к сети.

// sw.js
self.addEventListener('install', (event) => {
  console.log('service worker installing');
});

Событие активации

После установки воркер запускает событие activate. Здесь следует удалить старые кэши предыдущих версий, прежде чем воркер начнёт управлять страницами.

// sw.js
self.addEventListener('activate', (event) => {
  console.log('service worker activated');
});

Жизненный цикл

Сервисный воркер проходит следующие состояния:

установка — выполняется обработчик установки
установлен/ожидает — готов, но ожидает возможности начать работу
активация / активирован — теперь управляет страницами

По умолчанию новый воркер ждёт закрытия старых страниц перед активацией.

Перехват запросов

После активации воркер получает каждый сетевой запрос из своей области действия через событие fetch. Вы можете ответить из кэша, из сети или объединить оба источника.

// sw.js
self.addEventListener('fetch', (event) => {
  // event.request describes the outgoing request
  console.log('intercepted', event.request.url);
});

Итоги регистрации

Регистрация сервисного воркера включает проверку поддержки функций, вызов register с URL скрипта, учёт области действия и требования HTTPS, а также обработку событий install, activate и fetch внутри скрипта воркера.

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете регистрацию сервисного воркера.

Итоги

Вы научились регистрировать сервисный воркер:

Проверяйте поддержку функций с помощью 'serviceWorker' in navigator.
register(url, { scope }) возвращает промис.
По умолчанию область действия совпадает с каталогом скрипта; требуется HTTPS.
Обрабатывайте события install, activate и fetch в воркере.

Далее — API кэширования.

Часто задаваемые вопросы

Урок «Регистрация Service Worker» бесплатный?

Да — полный текст урока «Регистрация Service Worker» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Регистрация Service Worker»?

Устанавливайте и активируйте сервис-воркер. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Регистрация Service Worker»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy