Split fetch event callback into multiple functions

This make the code more readable and will ease the implementation of
the timeout.

djangopwa/templates/sw.js

@@ -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();
+        });
+}