У меня проблема с pwa моего сайта. Мне нужно обновить кеш-память с помощью сервисного работника, и я нахожу много кодов в Интернете, но ни один из них не работает. Я должен что-то пропустить.
Я хочу, чтобы после простой перезагрузки страницы обновление было выполнено, также, когда мы нажимаем на ярлык PWA, чтобы все обновлялось автоматически. Вот мой манифест и мой сервис-воркер с кодом, который я использую.
Как вы думаете ?
заранее спасибо
//Manifest -----
{
"name": "Test",
"short_name": "Test",
"lang": "en",
"start_url": "./index.html",
"display": "standalone",
"background_color": "white",
"theme_color": "white",
"icons": [{
"src": "/img/icon-128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "/img/icon-144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "/img/icon-152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "/img/icon-192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "/img/icon-256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "/img/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}]
}
-
//Service-Worker -----
var cacheName = 'Test';
var filesToCache = [
'/',
'/index.html',
'/css/style.css',
...
];
/* Start the service worker and cache all of the app's content */
self.addEventListener('install', function(e) {
e.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(filesToCache);
})
);
});
/* Serve cached content when offline */
self.addEventListener('fetch', function(e) {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});
self.addEventListener('activate', function(event) {
var cacheKeeplist = ['cacheName'];
event.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (cacheKeeplist.indexOf(key) === -1) {
return caches.delete(key);
}
}));
})
);
});



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Проблема очень проста: ваш код Service Worker не обновляет кеш.
Если вы посмотрите на обработчик fetch, он либо возвращает ответ из кеша, либо из сети. И если он возвращает ответ из сети, он НЕ кладет новую версию в кеш.
Если вы посмотрите на обработчик install, он кэширует все перечисленные файлы. Эти файлы (по крайней мере, так кажется) названы так, что имена остаются одинаковыми от версии к другой. Значение: ваш style.css — это всегдаstyle.css, и когда SW закэширует его, он будет доволен кешированной версией до конца времен. Он понятия не имеет, что есть новая версия, потому что имя такое же.
Как это исправить?
Вы можете изменить код ПО, чтобы он всегда проверял сеть на наличие новых обновлений файлов (примеры здесь: https://serviceworke.rs/strategy-cache-and-update.html). Вы также можете иметь уникальные имена для файлов, которые меняются при каждом развертывании.
Другим способом может быть использование библиотеки, которая обрабатывает все это за вас. Workbox имеет несколько различных стратегий кэширования на выбор (https://developers.google.com/web/tools/workbox/modules/workbox-strategies).
Обновлено: Как обновить приложение, которое было добавлено на рабочий стол?
Я не совсем понимаю, почему ваше приложение, добавленное на главный экран, не обновляется, когда вы снова открываете его. Возможно, на нем работает какая-то более старая версия, которая все еще имеет более старую версию того или иного. Однако вы можете вручную заставить Service Worker проверять наличие обновлений. Вы можете использовать registration.update(), чтобы запустить проверку новой версии скрипта SW, и, если она будет найдена, принудительно обновить страницу (location.reload()) или показать пользователю уведомление и запросить обновление. Документация здесь: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update
Если у вас есть приложение, которое пользователь держит открытым в течение длительного времени (в мобильном телефоне или на вкладке браузера), было бы неплохо автоматически запрашивать обновления ПО, например. раз в день что ли. Вы даже можете проверять наличие обновлений каждый раз, когда вкладка / приложение активируется / фокусируется. Частота, конечно, зависит от вашего приложения, варианта использования и т. д. :)
@Valentin Валентин, я немного добавил об этом. Надеюсь, это поможет!
@pate Можете ли вы сказать, что мне нужно изучить, чтобы реализовать этот показать пользователю уведомление и попросить обновить.?
Привет, большое спасибо за ваш очень четкий ответ. Я смог решить свою проблему, в следующий раз, когда я буду использовать workboxe, я предпочитаю делать это «вручную» для этого проекта;). Небольшой вопрос по установке приложения. Код в браузере обновляется благодаря обновлению, но не коду приложения (домашний экран), даже когда я выхожу из приложения. У вас есть трек для этого?