Commit 82e8c3da authored by Julien Enselme's avatar Julien Enselme

Split fetch event callback into multiple functions

This make the code more readable and will ease the implementation of
the timeout.
parent 26fee966
......@@ -27,44 +27,64 @@ self.addEventListener('fetch', (event) => {
}
event.respondWith(
caches.match(event.request)
.then((response) => {
console.log(`[SW] Requesting ${event.request.url}.`)
// If we have the response in the cache, we return it.
// If not, we try to fetch it.
if (response) {
console.log(`[SW] Served response to ${event.request.url} from the cache.`);
return response;
}
getFromCache(event)
.then(
(response) => response,
() => tryToFetchAndSaveInCache(event, dynamicCacheName),
),
);
});
return fetch(event.request)
.then(res => {
const requestSucceeded = res.status >= 200 && res.status <= 300;
if (!requestSucceeded) {
return res;
}
function getFromCache(event) {
return caches.match(event.request)
.then((response) => {
console.log(`[SW] Requesting ${event.request.url}.`);
// If we have the response in the cache, we return it.
// If not, we try to fetch it.
if (response) {
console.log(`[SW] Served response to ${event.request.url} from the cache.`);
return response;
}
return caches.open(dynamicCacheName)
.then(cache => {
// We can read a response only once. So if we don't clone it here,
// we won't be able to see anything in the browser.
cache.put(event.request.url, res.clone());
return res;
})
})
.catch(err => {
console.warn('[SW] Network request failed, app is probably offline', err);
return caches.open(staticCacheName)
.then((cache) => {
// If the request expects an HTML response, we display the offline page.
if (event.request.headers.get('accept').includes('text/html')) {
return cache.match('/offline/');
}
return Promise.reject();
});
}
return Promise.reject();
})
.catch(err => console.warn('[SW] failed to get response from network and cache.', err));
});
}),
);
});
function tryToFetchAndSaveInCache(event, cacheName) {
return fetchAndSaveInCache(event, cacheName)
.catch(err => {
console.warn('[SW] Network request failed, app is probably offline', err);
return provideOfflineFallback(event)
.catch(err => console.warn('[SW] failed to get response from network and cache.', err));
});
}
function fetchAndSaveInCache(event, cacheName) {
return fetch(event.request)
.then(res => {
const requestSucceeded = res.status >= 200 && res.status <= 300;
if (!requestSucceeded) {
return res;
}
return caches.open(cacheName)
.then(cache => {
// We can read a response only once. So if we don't clone it here,
// we won't be able to see anything in the browser.
cache.put(event.request.url, res.clone());
return res;
});
});
}
function provideOfflineFallback(event) {
return caches.open(staticCacheName)
.then((cache) => {
// If the request expects an HTML response, we display the offline page.
if (event.request.headers.get('accept').includes('text/html')) {
return cache.match('/offline/');
}
return Promise.reject();
});
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment