diff --git a/README.md b/README.md index 8996db07b..175740a01 100644 --- a/README.md +++ b/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. diff --git a/sw.js b/sw.js index 7e6d97fd9..94e4953da 100644 --- a/sw.js +++ b/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); }); }); -}); - - - +}); \ No newline at end of file