cache bg sync response

src/lib/request.js

@@ -1,3 +1,5 @@
+import { cacheName } from '../sw';
+
 const BASE_API_ENDPOINT = `https://resepku-api.herokuapp.com`;
 
 export function getRecipes() {
@@ -9,3 +11,17 @@ export function getRecipe(id) {
   return fetch(`${BASE_API_ENDPOINT}/recipes/${id}`)
     .then(response => response.json());
 }
+
+export async function getRecipeAndCache(id) {
+  const request = new Request(`${BASE_API_ENDPOINT}/recipes/${id}`, {
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    }
+  });
+  const response = await fetch(request);
+  const cache = await caches.open(cacheName);
+
+  await cache.put(request, response.clone());
+
+  return response.json();
+}

src/sw.js

@@ -1,8 +1,8 @@
 import storage from 'localforage';
-import { getRecipe } from './lib/request';
+import { getRecipeAndCache } from './lib/request';
 
 const version = 'v1';
-const cacheName = `background-sync-demo-${version}`;
+export const cacheName = `background-sync-demo-${version}`;
 
 const filesToCache = [
   '/',
@@ -67,7 +67,7 @@ self.addEventListener('activate', (event) => {
 const handleLoadRecipeSync = (event) => {
   const getAllItems = (payloads) => {
     const promises = payloads.map(async (payload) => {
-      const data = await getRecipe(payload.recipeId);
+      const data = await getRecipeAndCache(payload.recipeId);
 
       registration.showNotification(`${data.title} is ready!`, {
         body: 'View recipe article',