used async/syntax for better readability & performance

README.md

@@ -43,7 +43,6 @@ Additional background on why we combine music and programming can be found
 - [Running Music Blocks](#RUNNING-MUSIC-BLOCKS)
 - [How to set up a local server](#HOW-TO-SET-UP-A-LOCAL-SERVER)
 - [Using Music Blocks](#USING-MUSIC-BLOCKS)
-
 If you are a developer (beginner, experienced, or pro), you are very
 welcome to participate in the evolution of Music Blocks.
 

sw.js

@@ -1,130 +1,96 @@
 /*
-  global
-
-  offlineFallbackPage, divInstall
+  global offlineFallbackPage, divInstall
 */
 
 // This is the "Offline page" service worker
-
 const CACHE = "pwabuilder-precache";
-const precacheFiles = [
-    /* Add an array of files to precache for your app */
-    "./index.html"
-];
+const precacheFiles = ["./index.html"];
 
-self.addEventListener("install", function (event) {
-    // eslint-disable-next-line no-console
+// Install event
+self.addEventListener("install", event => {
     console.log("[PWA Builder] Install Event processing");
-
-    // eslint-disable-next-line no-console
-    console.log("[PWA Builder] Skip waiting on install");
     self.skipWaiting();
-
     event.waitUntil(
-        caches.open(CACHE).then(function (cache) {
-            // eslint-disable-next-line no-console
+        caches.open(CACHE).then(cache => {
             console.log("[PWA Builder] Caching pages during install");
             return cache.addAll(precacheFiles);
         })
     );
 });
 
-// Allow sw to control of current page
-self.addEventListener("activate", function (event) {
-    // eslint-disable-next-line no-console
+// Activate event
+self.addEventListener("activate", event => {
     console.log("[PWA Builder] Claiming clients for current page");
     event.waitUntil(self.clients.claim());
 });
 
-function updateCache(request, response) {
+// Helper functions
+const updateCache = async (request, response) => {
     if (response.status === 206) {
         console.log("Partial response is unsupported for caching.");
-        return Promise.resolve();
+        return;
     }
-    return caches.open(CACHE).then(function (cache) {
-        return cache.put(request, response);
-    });
-}
-
-function fromCache(request) {
-    // Check to see if you have it in the cache
-    // Return response
-    // If not in the cache, then return
-    return caches.open(CACHE).then(function (cache) {
-        return cache.match(request).then(function (matching) {
-            if (!matching || matching.status === 404) {
-                return Promise.reject("no-match");
-            }
-
-            return matching;
-        });
-    });
-}
+    const cache = await caches.open(CACHE);
+    return cache.put(request, response);
+};
+
+const fromCache = async request => {
+    const cache = await caches.open(CACHE);
+    const matching = await cache.match(request);
+    if (!matching || matching.status === 404) {
+        throw "no-match";
+    }
+    return matching;
+};
 
-// If any fetch fails, it will look for the request in the cache and
-// serve it from there first
-self.addEventListener("fetch", function (event) {
+// Fetch event
+self.addEventListener("fetch", event => {
     if (event.request.method !== "GET") return;
 
-    event.respondWith(
-        fromCache(event.request).then(
-            function (response) {
-                // The response was found in the cache so we responde
-                // with it and update the entry
-
-                // This is where we call the server to get the newest
-                // version of the file to use the next time we show view
-                event.waitUntil(
-                    fetch(event.request).then(function (response) {
-                        if (response.ok) {
-                            return updateCache(event.request, response);
-                        }
-                    })
-                );
-
-                return response;
-            },
-            async function () {
-                // The response was not found in the cache so we look
-                // for it on the server
-                try {
-                    const response = await fetch(event.request);
-                    // If request was success, add or update it in the cache
+    event.respondWith((async () => {
+        try {
+            // Try to get from cache first
+            const cachedResponse = await fromCache(event.request);
+
+            // Update cache in background
+            event.waitUntil(
+                fetch(event.request).then(response => {
                     if (response.ok) {
-                        event.waitUntil(updateCache(event.request, response.clone()));
+                        return updateCache(event.request, response);
                     }
-                    return response;
-                } catch (error) {
-                    // eslint-disable-next-line no-console
-                    console.log("[PWA Builder] Network request failed and no cache." + error);
+                })
+            );
+
+            return cachedResponse;
+        } catch {
+            // Network fetch if not in cache
+            try {
+                const response = await fetch(event.request);
+                if (response.ok) {
+                    event.waitUntil(updateCache(event.request, response.clone()));
                 }
+                return response;
+            } catch (error) {
+                console.log("[PWA Builder] Network request failed and no cache." + error);
             }
-        )
-    );
+        }
+    })());
 });
 
-self.addEventListener("beforeinstallprompt", (event) => {
-    // eslint-disable-next-line no-console
+// Install prompt
+self.addEventListener("beforeinstallprompt", event => {
     console.log("done", "beforeinstallprompt", event);
-    // Stash the event so it can be triggered later.
     window.deferredPrompt = event;
-    // Remove the "hidden" class from the install button container
     divInstall.classList.toggle("hidden", false);
 });
 
-// This is an event that can be fired from your page to tell the SW to
-// update the offline page
-self.addEventListener("refreshOffline", function () {
+// Offline page update
+self.addEventListener("refreshOffline", () => {
     const offlinePageRequest = new Request(offlineFallbackPage);
-
-    return fetch(offlineFallbackPage).then(function (response) {
-        return caches.open(CACHE).then(function (cache) {
-            // eslint-disable-next-line no-console
+    return fetch(offlineFallbackPage).then(response => {
+        return caches.open(CACHE).then(cache => {
             console.log("[PWA Builder] Offline page updated from refreshOffline event: " + response.url);
             return cache.put(offlinePageRequest, response);
         });
     });
-});
-
-
-
+});