Я создаю PWA с ограниченными автономными возможностями, я использую этот код для сохранения содержимого страницы в динамический кэш каждый раз, когда пользователь посещает новый URL:
self.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request)
.then(function(res) {
return caches.open('cache')
.then(function(cache) {
cache.put(event.request.url, res.clone());
return res;
})
})
.catch(function(err) {
console.log( err );
return caches.match(event.request);
})
);
});
Это прекрасно работает послестраница загружена, все ее ресурсы кэшированы и могут быть просмотрены в автономном режиме.
Но я также хотел бы добавить опцию для автоматического кэширования некоторых наиболее важных URL-адресов, когда пользователь возвращается в сеть.
Я делаю это, помещая список URL-адресов в массив, перебирая его и отправляя запрос на выборку для каждого URL-адреса, чтобы эти страницы можно было кэшировать без посещения / повторного посещения пользователем страницы.
Проблема в том, что когда я делаю так, что некоторые ресурсы на некоторых страницах не кэшируются, например, карта Google на одной странице, есть ли способ имитировать реальное посещение страницы, который получает все ресурсы из URL с запросом на выборку?
Код извлечения:
function fillDynamicCache(user_id = false) {
let urls = [
'/homepage',
'/someotherpage',
'/thirdpage',
'/...',
];
urls.map((url, id) => (
fetch(url)
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
console.log( 'in fetch: ' + url );
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
})
));
}
self.addEventListener('message', (event) => {
// refresh cache when user comes back online
if (event.data == 'is_online') {
fillDynamicCache();
} else if (event.data == 'is_updated') {
self.skipWaiting();