JavaScript Service Worker — офлайн і кешування

ServiceWorker — скрипт, що стоїть між сторінкою й мережею і перехоплює всі її запити. Основа офлайн-роботи й PWA.

правити

Загальний опис

Це не просто фоновий потік — це посередник із власним життям. Він працює навіть тоді, коли жодної вкладки сайту не відкрито, і саме тому вміє показувати push-сповіщення.

Головна суперсила — подія fetch: робітник бачить кожен запит сторінки й може відповісти сам, із кешу. Звідси й офлайн: мережі немає, а сайт відкривається, бо відповідає він.

Життя робітника йде через фази: install (складаємо кеш), activate (прибираємо старі кеші), fetch (відповідаємо).

Працює лише на HTTPS (і на localhost для розробки) — інакше перехоплення запитів було б готовою зброєю для зловмисника в чужій мережі.

правити

Нотатка

Оновлення робітника — найпідступніша частина: новий скрипт стає в чергу й активується лише коли всі вкладки сайту закриті. Тому «я оновив, а в браузері старе» тут норма, а не баг.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

navigator.serviceWorker.register("/sw.js");

методи

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
ServiceWorker	45+	44+	11.1+	32+	17+	-

Підтримка: мобільні переглядачі

Переглядач
ServiceWorker	45+	yes	yes	11.3+

Приклади

+ запропонувати свій приклад у пісочниці

// --- реєстрація на сторінці ---
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
        .then(reg => console.log('Зареєстровано:', reg.scope))
        .catch(error => console.error(error));
}

// --- sw.js ---
// self.addEventListener('install', event => {
//     event.waitUntil(
//         caches.open('v1').then(cache => cache.addAll([
//             '/', '/css/app.css', '/js/app.js',
//         ]))
//     );
// });
//
// // спершу кеш, потім мережа — сайт відкриється й без інтернету
// self.addEventListener('fetch', event => {
//     event.respondWith(
//         caches.match(event.request)
//             .then(cached => cached || fetch(event.request))
//     );
// });