diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html index d58bf69..ed1323e 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 5c056c1..174203a 100644 --- a/source/assets/scripts/ReviewDetails.js +++ b/source/assets/scripts/ReviewDetails.js @@ -102,6 +102,7 @@ function setupUpdate(){ while (tagContainer.firstChild) { tagContainer.removeChild(tagContainer.firstChild); } + for (let i = 0; i < currReview["tags"].length; i++) { let tagSetVal = currReview["tags"][i].toLowerCase() tagSet.add(tagSetVal); diff --git a/source/assets/scripts/main.js b/source/assets/scripts/main.js index f012cb9..955da0a 100644 --- a/source/assets/scripts/main.js +++ b/source/assets/scripts/main.js @@ -40,3 +40,14 @@ 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/static/Form.css b/source/static/Form.css index 584826a..283cc0d 100644 --- a/source/static/Form.css +++ b/source/static/Form.css @@ -17,6 +17,7 @@ border: 2px solid rgb(31 41 32); border-radius: 8px; background-color: #f7dfd5; + word-break: break-all; } #d-meal-img { diff --git a/source/sw.js b/source/sw.js new file mode 100644 index 0000000..4899a7c --- /dev/null +++ b/source/sw.js @@ -0,0 +1,62 @@ +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" +]; + +/** + * 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) => { + // 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()); + // return the network response + return fetchedResponse; + }).catch(() => { + // 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/120122-serviceworker-netfirst.md b/specs/adrs/120122-serviceworker-netfirst.md new file mode 100644 index 0000000..d60844f --- /dev/null +++ b/specs/adrs/120122-serviceworker-netfirst.md @@ -0,0 +1,19 @@ +# Use a network first cache second for service worker architecture + +- Status: in consideration +- Deciders: Arthur Lu, Kara Hoagland, Rhea Bhutada, George Dubinin +- Date: 12 / 01 / 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: Network first for automatic app updating. \ No newline at end of file