Обновление служебных сил новыми активами
Я читал статью html5rocks Introduction to service worker и создал базового сотрудника службы, который кэширует страницу, JS и CSS, которая работает так, как ожидалось:
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
'/'
];
// Set the callback for the install step
self.addEventListener('install', function (event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
// IMPORTANT: Clone the request. A request is a stream and
// can only be consumed once. Since we are consuming this
// once by cache and once by the browser for fetch, we need
// to clone the response
var fetchRequest = event.request.clone();
return fetch(fetchRequest).then(
function(response) {
// Check if we received a valid response
if(!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
// IMPORTANT: Clone the response. A response is a stream
// and because we want the browser to consume the response
// as well as the cache consuming the response, we need
// to clone it so we have 2 stream.
var responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(function(cache) {
cache.put(event.request, responseToCache);
});
return response;
}
);
})
);
});
Когда я вношу изменения в CSS, это изменение не подбирается, так как рабочий-сервис правильно возвращает CSS из кэша.
Где я застрял, если бы я изменил HTML, JS или CSS, как бы я удостоверился, что сервис-работник загружает более новую версию с сервера, если это возможно, а не из кеша? Я пробовал использовать штампы версий для импорта CSS, но это, похоже, не работает.
Ответы
Ответ 1
Один из вариантов заключается в том, чтобы использовать кеш сервис-работника в качестве резервной копии и всегда пытаться выполнить в сети в первую очередь через fetch()
. Однако вы теряете прирост производительности, который предлагает стратегия, ориентированная на кеш.
Альтернативным подходом было бы использовать sw-precache
для создания рабочего-сервиса script как часть процесса сборки сайта.
Служащий службы, который он создает, будет использовать хэш содержимого файла для обнаружения изменений и автоматически обновлять кеш при развертывании новой версии. Он также будет использовать параметр запроса URL-адреса для кэширования, чтобы убедиться, что вы случайно не заполнили кеш сервис-работника устаревшей версией из кеша HTTP.
На практике вы получите работника службы, который использует стратегию кэширования, ориентированную на производительность, но кеш будет обновляться "в фоновом режиме" после загрузки страницы, чтобы в следующий раз, когда он посетил, все является свежим. Если вы хотите, можно показать сообщение пользователю, сообщив им, что имеется обновленный контент и запрос на перезагрузку.
Ответ 2
Один из способов недействительности кеша - обнулить версию CACHE_NAME
всякий раз, когда вы меняете что-либо в кэшированных файлах. Поскольку это изменение изменится, браузер service-worker.js
загрузит более новую версию, и у вас будет возможность удалить старые кеши и создать новые. И вы можете удалить старый кеш в обработчике activate
. Это стратегия, описанная в примере предварительной выборки.
Если вы уже используете какие-либо штампы версий в файлах CSS, убедитесь, что они нашли свой путь в обслуживающий рабочий script.
Это, конечно, не изменяет тот факт, что заголовки кеша в файле CSS должны быть установлены правильно. В противном случае сервисный работник просто загрузит файл, который уже кэшируется в кеше браузера.