Part 1 finished some of part 2 done

README.md

@@ -1 +1,4 @@
 # Lab 7 - Starter
+Ricardo Aguilar
+Chirstian Velasquez
+https://aricky3.github.io/Lab7_Starter/

assets/scripts/main.js

@@ -1,5 +1,7 @@
 // main.js
 
+
+
 // CONSTANTS
 const RECIPE_URLS = [
   'https://introweb.tech/assets/json/1_50-thanksgiving-side-dishes.json',
@@ -45,7 +47,31 @@ function initializeServiceWorker() {
   // We first must register our ServiceWorker here before any of the code in
   // sw.js is executed.
   // B1. TODO - Check if 'serviceWorker' is supported in the current browser
+  const registerServiceWorker = async () => {
+    if ("serviceWorker" in navigator) {
+      try {
+        const registration = await navigator.serviceWorker.register("./sw.js", {
+          scope: "./",
+        });
+        if (registration.installing) {
+          console.log("Service worker installing");
+        } else if (registration.waiting) {
+          console.log("Service worker installed");
+        } else if (registration.active) {
+          console.log("Service worker active");
+        }
+      } catch (error) {
+        console.error(`Registration failed with ${error}`);
+      }
+    }
+  };
+
+  // …
+
+   registerServiceWorker();
+
   // B2. TODO - Listen for the 'load' event on the window object.
+  //window.addEventListener('load',registerServiceWorker);
   // Steps B3-B6 will be *inside* the event listener's function created in B2
   // B3. TODO - Register './sw.js' as a service worker (The MDN article
   //            "Using Service Workers" will help you here)
@@ -68,15 +94,47 @@ async function getRecipes() {
   // EXPOSE - START (All expose numbers start with A)
   // A1. TODO - Check local storage to see if there are any recipes.
   //            If there are recipes, return them.
+  if(JSON.parse(localStorage.getItem('recipes'))){
+    return JSON.parse(localStorage.getItem('recipes'));
+  }
   /**************************/
   // The rest of this method will be concerned with requesting the recipes
   // from the network
   // A2. TODO - Create an empty array to hold the recipes that you will fetch
+  const rep = [];
   // A3. TODO - Return a new Promise. If you are unfamiliar with promises, MDN
   //            has a great article on them. A promise takes one parameter - A
   //            function (we call these callback functions). That function will
   //            take two parameters - resolve, and reject. These are functions
   //            you can call to either resolve the Promise or Reject it.
+
+  async function reqRecipies() {
+    return new Promise((resolve,reject) => {
+      for (let i =0 ;i < RECIPE_URLS.length; i++ ) {
+        try{
+          console.log(RECIPE_URLS[i]);
+          // wtfffffffffffffffffff
+          fetch(`${RECIPE_URLS[i]}`).then(response => response.json()).then(data => {
+            console.log(data);
+            rep.push(data);
+            if (RECIPE_URLS.length == rep.length) {
+              console.log("here");
+              saveRecipesToStorage(rep);
+              resolve(rep);
+            }
+          });
+          //console.log(`Rep size: ${rep.length}`);
+          //console.log(`og size: ${RECIPE_URLS.length}`);
+        }
+        catch{
+          console.error();
+          reject(error);
+        }
+      }
+    });
+  }
+
+  reqRecipies();
   /**************************/
   // A4-A11 will all be *inside* the callback function we passed to the Promise
   // we're returning

sw.js

@@ -9,7 +9,13 @@ self.addEventListener('install', function (event) {
     caches.open(CACHE_NAME).then(function (cache) {
       // B6. TODO - Add all of the URLs from RECIPE_URLs here so that they are
       //            added to the cache when the ServiceWorker is installed
-      return cache.addAll([]);
+
+      return cache.addAll(['https://introweb.tech/assets/json/1_50-thanksgiving-side-dishes.json',
+      'https://introweb.tech/assets/json/2_roasting-turkey-breast-with-stuffing.json',
+      'https://introweb.tech/assets/json/3_moms-cornbread-stuffing.json',
+      'https://introweb.tech/assets/json/4_50-indulgent-thanksgiving-side-dishes-for-any-holiday-gathering.json',
+      'https://introweb.tech/assets/json/5_healthy-thanksgiving-recipe-crockpot-turkey-breast.json',
+      'https://introweb.tech/assets/json/6_one-pot-thanksgiving-dinner.json',]);
     })
   );
 });
@@ -34,6 +40,15 @@ self.addEventListener('fetch', function (event) {
   /*******************************/
   // B7. TODO - Respond to the event by opening the cache using the name we gave
   //            above (CACHE_NAME)
+  event.respondWith(caches.open(CACHE_NAME).then( (cache) => {
+    return cache.match(event.request).then( (cachedResponse)  => {
+      return cachedResponse || fetch(event.request).then( (fetchedResponse) => {
+        cache.put(event.request,fetchedResponse.clone());
+
+        return fetchedResponse;
+      });
+    });
+  }));
   // B8. TODO - If the request is in the cache, return with the cached version.
   //            Otherwise fetch the resource, add it to the cache, and return
   //            network response.