Загрузка...
Загрузка...
Продолжая работу с платформой, вы принимаете условия Политики конфиденциальности и использование файлов cookie.
👋 Привет! Я Дастан, автор Hack Frontend. Всегда рад профессиональному нетворкингу => добавляйся в LinkedIn.
Service Worker — это фоновый скрипт, который работает отдельно от основного потока браузера, перехватывает сетевые запросы, управляет кэшированием и обеспечивает офлайн-работу веб-приложений.
Он не имеет доступа к DOM, но может:
Service Workers используются для:
install) — сервис-воркер загружается и подготавливает кэш.activate) — очищаются старые данные, создаётся новый кэш.fetch) — перехват и обработка всех запросов, управление кэшем.if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW зарегистрирован:', reg))
.catch(err => console.error('SW ошибка:', err));
});
}
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v1').then((cache) => {
return cache.addAll(['/index.html', '/styles.css', '/script.js']);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((cached) => {
return cached || fetch(event.request);
})
);
});
localhost в dev-режиме).window, document, localStorage.Открой DevTools → Application → Service Workers Там можно:
Service Worker — ключевой элемент Progressive Web App:
Важно:
Service Workers — мощный, но потенциально опасный инструмент. Всегда обеспечивайте верную стратегию обновления, чтобы не кешировать устаревшие данные!