From 3580941207b48295badb5e53f962a01f2670472c Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Wed, 30 Nov 2022 16:18:18 -0800 Subject: [PATCH 1/6] Add functional service worker caching towards local first functionality, fix favicon link issue in ReviewDetails.html Co-authored-by: rheabhutada02 Signed-off-by: Arthur Lu --- source/ReviewDetails.html | 2 +- source/assets/scripts/ReviewDetails.js | 2 +- source/assets/scripts/main.js | 13 ++++++++ source/sw.js | 45 ++++++++++++++++++++++++++ 4 files changed, 60 insertions(+), 2 deletions(-) create mode 100644 source/sw.js diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html index 3e71c32..b526516 100644 --- a/source/ReviewDetails.html +++ b/source/ReviewDetails.html @@ -7,7 +7,7 @@ Food Journal - + diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js index c9e05a0..7908fde 100644 --- a/source/assets/scripts/ReviewDetails.js +++ b/source/assets/scripts/ReviewDetails.js @@ -99,7 +99,7 @@ function setupUpdate(){ while (tagContainer.firstChild) { tagContainer.removeChild(tagContainer.firstChild); } - let tagSetVal = currReview["tags"][i].toLowerCase() + let tagSetVal = currReview["tags"][i].toLowerCase(); for (let i = 0; i < currReview["tags"].length; i++) { tagSet.add(tagSetVal); let newTag = document.createElement("label"); diff --git a/source/assets/scripts/main.js b/source/assets/scripts/main.js index f012cb9..710cb16 100644 --- a/source/assets/scripts/main.js +++ b/source/assets/scripts/main.js @@ -40,3 +40,16 @@ function initFormHandler() { window.location.assign("./CreatePage.html"); }); } + +const registerServiceWorker = async () => { + if ("serviceWorker" in navigator) { + try { + const registration = await navigator.serviceWorker.register("./sw.js", { + scope: "./", + }); + } catch (error) { + console.error(`Registration failed with ${error}`); + } + } +}; +registerServiceWorker(); \ No newline at end of file diff --git a/source/sw.js b/source/sw.js new file mode 100644 index 0000000..2f9f21a --- /dev/null +++ b/source/sw.js @@ -0,0 +1,45 @@ +const CACHE_NAME = "food-journal-v1"; +const ASSETS = [ + "index.html", + "ReviewDetails.html", + "CreatePage.html", + "static/CoveredByYourGrace-Regular.ttf", + "static/CreatePage.css", + "static/Form.css", + "static/homepage.css", + "static/ReviewDetails.css", + "assets/images/0-star.svg", + "assets/images/1-star.svg", + "assets/images/2-star.svg", + "assets/images/3-star.svg", + "assets/images/4-star.svg", + "assets/images/5-star.svg", + "assets/images/default_plate.png", + "assets/images/delete_icon_for_interface.png", + "assets/images/edit_button_for_interface.png", + "assets/images/Grouppink.png", + "assets/images/home_button_for_interface.png", + "assets/images/favicon.ico", + "assets/images/Logo.png", + "assets/scripts/CreatePage.js", + "assets/scripts/localStorage.js", + "assets/scripts/main.js", + "assets/scripts/ReviewCard.js", + "assets/scripts/ReviewDetails.js", +]; + +self.addEventListener("install", async () => { + const cache = await caches.open(CACHE_NAME); + await cache.addAll(ASSETS); +}); + +self.addEventListener("fetch", (event) => { + event.respondWith(caches.open(CACHE_NAME).then((cache) => { + return fetch(event.request).then((fetchedResponse) => { + cache.put(event.request, fetchedResponse.clone()); + return fetchedResponse; + }).catch(() => { + return cache.match(event.request); + }); + })); +}); From d95f0036ac2941f8e7eab33a4b2ea40fd6612476 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Thu, 1 Dec 2022 07:36:19 +0000 Subject: [PATCH 2/6] clean up some styling --- source/assets/scripts/main.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/source/assets/scripts/main.js b/source/assets/scripts/main.js index 710cb16..955da0a 100644 --- a/source/assets/scripts/main.js +++ b/source/assets/scripts/main.js @@ -44,9 +44,7 @@ function initFormHandler() { const registerServiceWorker = async () => { if ("serviceWorker" in navigator) { try { - const registration = await navigator.serviceWorker.register("./sw.js", { - scope: "./", - }); + const registration = await navigator.serviceWorker.register("./sw.js", {scope: "./"}); } catch (error) { console.error(`Registration failed with ${error}`); } From 1ed46b8ade610cd0dfc69683798a3b3b4cfca526 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Thu, 1 Dec 2022 08:09:22 +0000 Subject: [PATCH 3/6] implement fix for strange first load cache behavior --- source/sw.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/source/sw.js b/source/sw.js index 2f9f21a..7410aae 100644 --- a/source/sw.js +++ b/source/sw.js @@ -34,12 +34,15 @@ self.addEventListener("install", async () => { }); self.addEventListener("fetch", (event) => { + console.log(`fetching: ${event.request.url}`); event.respondWith(caches.open(CACHE_NAME).then((cache) => { return fetch(event.request).then((fetchedResponse) => { cache.put(event.request, fetchedResponse.clone()); + console.log(typeof(fetchedResponse)); return fetchedResponse; }).catch(() => { - return cache.match(event.request); + console.log(cache.match(event.request, {ignoreVary: true})); + return cache.match(event.request, {ignoreVary: true}); }); })); }); From 7cb90e23c07ad307a7370ddc03aa6f2951fb1a1e Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Thu, 1 Dec 2022 08:37:49 +0000 Subject: [PATCH 4/6] add comments and docs to sw.js, add service worker ADR --- source/sw.js | 22 +++++++++++++++++---- specs/adrs/120222-serviceworker-netfirst.md | 19 ++++++++++++++++++ 2 files changed, 37 insertions(+), 4 deletions(-) create mode 100644 specs/adrs/120222-serviceworker-netfirst.md diff --git a/source/sw.js b/source/sw.js index 7410aae..416494e 100644 --- a/source/sw.js +++ b/source/sw.js @@ -28,21 +28,35 @@ const ASSETS = [ "assets/scripts/ReviewDetails.js", ]; +/** + * Adds the install listener where the app assets are added to the cache + */ self.addEventListener("install", async () => { + // open the cace const cache = await caches.open(CACHE_NAME); + // add all elements in ASSETS to the cache, these are all the files requried for the app to run await cache.addAll(ASSETS); }); +/** + * Adds an event listener on fetch events to serve cached resources while offline + * Uses a network first structure to prioritize fetching from network in case of app updates. + * If there are important updates, we want the user to get those if possible. + */ self.addEventListener("fetch", (event) => { - console.log(`fetching: ${event.request.url}`); + // add a response to the fetch event event.respondWith(caches.open(CACHE_NAME).then((cache) => { + // try to return a network fetch response return fetch(event.request).then((fetchedResponse) => { + // if there is a response, add it to the cache cache.put(event.request, fetchedResponse.clone()); - console.log(typeof(fetchedResponse)); + // return the network response return fetchedResponse; }).catch(() => { - console.log(cache.match(event.request, {ignoreVary: true})); - return cache.match(event.request, {ignoreVary: true}); + // If there is not a network response, return the cached response + // The ignoreVary option is used here to fix an issue where the service worker + // would not serve certain requests unless the page was refreshed at least once + return cache.match(event.request, {ignoreVary: true}); }); })); }); diff --git a/specs/adrs/120222-serviceworker-netfirst.md b/specs/adrs/120222-serviceworker-netfirst.md new file mode 100644 index 0000000..f1f87a2 --- /dev/null +++ b/specs/adrs/120222-serviceworker-netfirst.md @@ -0,0 +1,19 @@ +# Use a network first cache second for service worker architecture + +- Status: in consideration +- Deciders: Arthur Lu +- Date: 12 / 02 / 22 + +## Decision Drivers + +- Need to balance the need for user ease of use and local first priority +- Users should expect to update their app easily when they have network, but may not be expected to know how to perform a hard refresh +- Local first priority means we should avoid unnecessary network activity when possible + +## Considered Options +- Network first cache second +- Cache first network second + +## Decision Outcome + +Chosen Option: TBD \ No newline at end of file From 730f904a58b8f5479286666862aa5155808e0090 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Thu, 1 Dec 2022 22:32:50 +0000 Subject: [PATCH 5/6] fix style Signed-off-by: Arthur Lu --- source/sw.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/sw.js b/source/sw.js index 416494e..4899a7c 100644 --- a/source/sw.js +++ b/source/sw.js @@ -25,7 +25,7 @@ const ASSETS = [ "assets/scripts/localStorage.js", "assets/scripts/main.js", "assets/scripts/ReviewCard.js", - "assets/scripts/ReviewDetails.js", + "assets/scripts/ReviewDetails.js" ]; /** From 1a1f5d8e1f2a5a275a668080fcbdb03c3f993ecf Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Thu, 1 Dec 2022 22:35:48 +0000 Subject: [PATCH 6/6] finalize ADR Signed-off-by: Arthur Lu --- ...eworker-netfirst.md => 120122-serviceworker-netfirst.md} | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) rename specs/adrs/{120222-serviceworker-netfirst.md => 120122-serviceworker-netfirst.md} (78%) diff --git a/specs/adrs/120222-serviceworker-netfirst.md b/specs/adrs/120122-serviceworker-netfirst.md similarity index 78% rename from specs/adrs/120222-serviceworker-netfirst.md rename to specs/adrs/120122-serviceworker-netfirst.md index f1f87a2..d60844f 100644 --- a/specs/adrs/120222-serviceworker-netfirst.md +++ b/specs/adrs/120122-serviceworker-netfirst.md @@ -1,8 +1,8 @@ # Use a network first cache second for service worker architecture - Status: in consideration -- Deciders: Arthur Lu -- Date: 12 / 02 / 22 +- Deciders: Arthur Lu, Kara Hoagland, Rhea Bhutada, George Dubinin +- Date: 12 / 01 / 22 ## Decision Drivers @@ -16,4 +16,4 @@ ## Decision Outcome -Chosen Option: TBD \ No newline at end of file +Chosen Option: Network first for automatic app updating. \ No newline at end of file