Service Workers

Service Worker — это скрипт, который браузер запускает в фоновом режиме, отдельно от веб-страницы, что позволяет управлять сетевыми запросами, кэшированием ресурсов и обеспечивать работу приложения в офлайн-режиме. Service Worker действует как промежуточный слой между веб-приложением и сетью, что дает полный контроль над обработкой запросов.

Ключевые свойства Service Worker:

  • Работает отдельно от основного потока страницы.
  • Имеет доступ к кэшу через Cache API.
  • Может перехватывать и модифицировать сетевые запросы через fetch событие.
  • Поддерживает push-уведомления и фоновые синхронизации.

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

Для использования Service Worker его необходимо зарегистрировать из основного JavaScript-файла страницы. Регистрация выполняется только при наличии поддержки в браузере.

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
        .then(registration => {
            console.log('Service Worker зарегистрирован с областью:', registration.scope);
        })
        .catch(error => {
            console.error('Ошибка регистрации Service Worker:', error);
        });
}

Пояснение:

  • navigator.serviceWorker.register() — метод для регистрации скрипта Service Worker.
  • registration.scope — область действия Service Worker. По умолчанию совпадает с расположением файла.

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

Жизненный цикл состоит из нескольких стадий, каждая из которых имеет свои особенности:

  1. Installing (Установка) Событие install вызывается при первой установке Service Worker. Здесь обычно происходит кэширование статических ресурсов.
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('static-v1').then(cache => {
            return cache.addAll([
                '/',
                '/index.html',
                '/styles.css',
                '/script.js'
            ]);
        })
    );
});
  1. Activating (Активация) Событие activate вызывается после установки и позволяет очищать старые версии кэша.
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(keys => {
            return Promise.all(
                keys.filter(key => key !== 'static-v1')
                    .map(key => caches.delete(key))
            );
        })
    );
});
  1. Fetching (Перехват запросов) Событие fetch позволяет контролировать ответы на сетевые запросы и использовать кэшированные данные.
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            return response || fetch(event.request);
        })
    );
});

Кэширование и стратегия работы с сетью

Кэширование — одна из ключевых функций Service Worker. Можно использовать несколько стратегий:

  • Cache First — сначала проверяется кэш, если ресурс найден — возвращается, иначе идет сетевой запрос.
  • Network First — сначала выполняется сетевой запрос, если он неудачен — берется кэш.
  • Stale-While-Revalidate — возвращает кэш сразу, но обновляет его в фоне.
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.open('dynamic-v1').then(cache => {
            return fetch(event.request).then(response => {
                cache.put(event.request, response.clone());
                return response;
            }).catch(() => caches.match(event.request));
        })
    );
});

Push-уведомления и фоновые задачи

Service Worker поддерживает работу с push-уведомлениями и фоновыми синхронизациями:

  • Push — позволяет получать уведомления даже при закрытом браузере.
  • Background Sync — обеспечивает выполнение задач, когда устройство снова онлайн.
self.addEventListener('push', event => {
    const data = event.data.json();
    event.waitUntil(
        self.registration.showNotification(data.title, {
            body: data.body,
            icon: '/icon.png'
        })
    );
});

Ограничения и безопасность

Service Worker работает только через HTTPS (за исключением localhost для разработки) и не имеет доступа к DOM напрямую. Все взаимодействие происходит через события и сообщения (postMessage). Это обеспечивает высокий уровень безопасности и предотвращает утечки данных.

Инструменты и отладка

  • Chrome DevTools — вкладка Application → Service Workers позволяет просматривать зарегистрированные воркеры, управлять кэшем и тестировать офлайн-режим.
  • Lighthouse — проверяет использование Service Worker и офлайн-поддержку, выдавая рекомендации по улучшению производительности и надежности.

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

Оглавление