В предыдущем блоге вы узнали, как зарегистрировать сервис-воркер и кэшировать ресурсы в нашем приложении при начальной загрузке. Теперь, когда вы открываете страницу, на которой уже зарегистрирован сервис-воркер. Затем, если вы откроете другую страницу, которая попадает в сферу действия этого сервис-воркера, браузер не раскручивает другого сервис-воркера, он использует тот же самый. Это означает, что если у вас открыто несколько вкладок или открытых окон, существует только один сервисный работник.
Но что происходит, когда вы обновляете сервис-воркер, новый сервис-воркер простаивает, ожидая, пока все окна, использующие предыдущий сервис-воркер, не закроются.
Чтобы избежать этого, мы можем использовать skipWaiting () в событии установки, а клиенты require () в событии активации, чтобы новый сервис-воркер, не дожидаясь, взял на себя управление страницами.
//service-worker.js
var cacheName = 'cache_version2';
self.addEventListener('install',function(e){
console.log("[Service Worker] Installed");
e.waitUntil(
caches.open(cacheName).then(function(cache){
console.log("[ServiceWorker] Caching cacheFiles");
cache.addAll(cacheFiles);
}).then(function() {
return self.skipWaiting();
})
)
})
self.addEventListener('activate', function(e){
console.log("[Service Worker] Activated");
e.waitUntil(self.clients.claim());
})
Но подождите, что произойдет с файлами, ранее хранившимися в кеше, после установки нового?
Браузер не знает, понадобятся вам старые или нет. Вы можете удалить неиспользуемые файлы из кеша. Событие активации - идеальное место для этого.
//service-worker.js
var cacheName = 'cache_version2';
self.addEventListener('activate', function(e){
console.log("[Service Worker] Activated");
e.waitUntil(
caches.keys().then(function(cacheNames){
return Promise.all(cacheNames.map(function(thisCacheName){
if(thisCacheName != cacheName)
{
console.log("[Service Worker] Removing Cached Files from", thisCacheName);
return caches.delete(thisCacheName);
}
}))
}).then(function(){
return self.clients.claim();
})
)
})
Когда запускается событие activate, код получает список текущих ключей кеша и выполняет итерацию по ним с помощью функции карты. Затем он сравнивает ключ с текущим ключом и, если они не равны, удаляет их.
Примечание. Если ваш файл сервис-воркера не обновляется и по-прежнему указывает на старый файл сервис-воркера, убедитесь, что максимальный возраст кеша вашего браузера равен нулю (максимальный возраст кеша: 0)
Чтобы начать работу с Progressive Web App, вы можете просмотреть мои блоги:
1) Зарегистрируйте сервис-воркера и кешируйте ресурсы в нашем приложении при начальной загрузке.
2) Обновите старого сервис-воркера и закэшируйте новый ответ в кеш-хранилище.
4) Сделайте наше веб-приложение доступным для установки через файл манифеста веб-приложения.
SoluteLabs - это высокопроизводительная команда из 25 человек, занимающихся мобильным и веб-дизайном и разработкой; мы создали 10 лучших приложений для Android и iOS, графику, которая стала вирусной, и приложения с миллионами загрузок.
