Я пытаюсь использовать «Pre-fetching» и извлекать методы «собрать» для кэширования js, CSS и материалов в SPA-приложении.Как совместить служебного работника Предварительная выборка с помощью навигации по навигации?
Чтобы упреждающее чтение сценариев я попробовал код очень нравится этот фрагмент кода:
self.addEventListener('install', function(event) {
var now = Date.now();
var urlsToPrefetch = [
'static/pre_fetched.txt',
'static/pre_fetched.html'
];
event.waitUntil(
caches.open(CURRENT_CACHES.prefetch).then(function(cache) {
var cachePromises = urlsToPrefetch.map(function(urlToPrefetch) {
var url = new URL(urlToPrefetch, location.href);
url.search += (url.search ? '&' : '?') + 'cache-bust=' + now;
var request = new Request(url, {mode: 'no-cors'});
return fetch(request).then(function(response) {
if (response.status >= 400) {
throw new Error('request for ' + urlToPrefetch +
' failed with status ' + response.statusText);
}
return cache.put(urlToPrefetch, response);
}).catch(function(error) {
console.error('Not caching ' + urlToPrefetch + ' due to ' + error);
});
});
return Promise.all(cachePromises).then(function() {
console.log('Pre-fetching complete.');
});
}).catch(function(error) {
console.error('Pre-fetching failed:', error);
})
);
});Полный код можно проверить here
После предварительной выборки, у меня есть почти все критические сценарии в кеше (например, angular.js, модули и контроллеры и, возможно, некоторые jqueries), поэтому я делаю событие fetch для сбора всех других скриптов, которые загружаются с помощью require.js асинхронно.
self.addEventListener('fetch', function (event) {
if (event.request.method === "GET" && testes_to_know_if_it_area_a_js_or_css) {
event.respondWith(
caches.match(event.request)
.then(function (response) {
if (response) {
loggger && console.log('From Cache', event.request.url);
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(CURRENT_CACHES['general-cache'])
.then(function (cache) {
try {
loggger && console.log('Add to Cache', event.request.url);
cache.put(event.request, responseToCache);
} catch (e) {
console.error(e);
}
});
return response;
}
);
})
);
}
});Оба, работают очень хорошо, но не так, как ожидалось. Вторая выборка снова добавляет его в кеш, я думаю, это потому, что caches.match(event.request) не соответствует действительности. Итак, я помещал консоль, чтобы видеть как объекты запроса, так и синтез, созданный с помощью предварительной выборки и клонированный из выборки.
- Синтетические:
- клонированные:
Таким образом, я не уверен, если я могу переписать эти свойства синтетического такие же, как клонировать, я могу это сделать безопасно ? Как я могу это решить?
PS: Этот код не запускается как обычные скрипты. Фрагмент был просто организован.