SPAアプリケーションでjs、CSS、およびstuffをキャッシュするために、 "プリフェッチ"とフェッチ "コレクト"テクニックを使用しようとしています。サービスワーカーのプリフェッチとナビゲーション間のフェッチを組み合わせるにはどうすればよいですか?
私は非常にこのスニペットのようなコードを試してみましたが、プリフェッチスクリプトに:
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)は、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;
}
);
})
);
}
});
どちらも非常にうまく動作していますが、期待どおりではありません。 2回目のフェッチで再びキャッシュに追加されます。caches.match(event.request)
が実際には一致しないためです。そこで、私は、プリフェッチによって作成された合成とフェッチからクローン化された両方のリクエストオブジェクトを見るためのコンソールを配置しました。
だから、私は私がそれを行うことができ、私は合成にこれらのプロパティを上書きするクローン化されたのと同じことができるかどうかわからないんだけど、安全に?それをどうすれば解決できますか?
PS:このコードは共通のスクリプトとして実行されません。スニペットは整理するだけだった。