Использование сервисного работника для веб-страниц

Доступно в Baseline в статусе «Widely Available» с 2020-10-30

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

Чтобы начать, нужно зарегистрировать сервисного работника в основном скрипте:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('Сервисный работник зарегистрирован:', registration);
    });
}

В файле sw.js пишут обработчики событий, например, для кэширования:

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache').then(cache => cache.addAll(['/index.html', '/styles.css']))
  );
});
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cachedResponse => {
      return cachedResponse || fetch(event.request);
    })
  );
});

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.