Добрый вечер!
Разбираюсь с sw, настраиваю кэш.
В оффлайне работает, все подтягивается из кэша, но когда статику обновляю, то sw не подхватывает изменения.
Что я делаю не так?
Делал вот по этому
туториалу
Подключаю в index.js:
function swLoader() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('./sw.js', {scope: './'})
.then(registration)
.catch(registrationError)
}
}
function registration(e) {
if (e.installing) {
// console.info('[sw loader] Установка');
} else if (e.waiting) {
// console.info('[sw loader] Установлен');
} else if (e.active) {
// console.info('[sw loader] Активен');
}
}
function registrationError(err) {
console.error(`[sw] Ошибка регистрации: ${err}`);
}
Рядом лежит sw.js:
const
cacheName = 'v2',
cacheFiles = [
'./',
'./index.css',
'./index.js'
];
function install(e) {
// console.info('[sw] Установка sw');
e.waitUntil(
caches.open(cacheName)
.then(cachedFiles)
.catch(cachedError)
);
}
function cachedFiles(cache) {
// console.info('[sw] Кэширование данных');
return cache.addAll(cacheFiles);
}
function cachedError(error) {
console.error(`[sw] Ошибка кэширования: ${error}`);
}
function activate(e) {
// console.info('[sw] Активация sw');
e.waitUntil(
caches.keys()
.then(cacheActual)
)
}
function cacheActual(cacheNames) {
return Promise.all(cacheNames.map(outdatedCache));
}
function outdatedCache(thisCacheName) {
if (thisCacheName !== cacheName) {
// console.info('[sw] Удаление кэшированных файлов:', thisCacheName);
return caches.delete(thisCacheName);
}
}
function fetched(e) {
// console.info('[sw] Получение данных', e.request.url);
e.respondWith(
caches.match(e.request)
.then(response => {
if (response) {
// console.info("[sw] Найдено в кэше: ", e.request.url, response);
return response;
}
let requestClone = e.request.clone();
fetch(requestClone)
.then(response => {
if (!response) {
// console.info("[sw] Нет ответа из кэша");
return response;
}
let responseClone = response.clone();
caches.open(cacheName)
.then(cache => {
cache.put(e.request, responseClone);
// console.info('[sw] Кэширование новых данных: ', e.request.url);
return response;
});
})
.catch(fetchError);
})
)
}
function fetchError(error) {
console.error(`[sw] Ошибка получения & кэширования новых данных: ${error}`);
}
self.addEventListener('install', install);
self.addEventListener('activate', activate);
self.addEventListener('fetch', fetched);