caching

app/javascript/components/TheLogCreator.vue

@@ -56,8 +56,7 @@
 
     created() {
       this.loadResource(
-        api.getRecipe(this.recipeId)
+        api.getRecipe(this.recipeId, data => this.log.recipe = data)
-          .then(data => { this.log.recipe = data; return data; })
       );
     },
 

app/javascript/components/TheRecipe.vue

@@ -59,8 +59,7 @@
     methods: {
       refreshData() {
         this.loadResource(
-          api.getRecipe(this.recipeId, this.scale, this.system, this.unit)
+          api.getRecipe(this.recipeId, this.scale, this.system, this.unit, data => this.recipe = data)
-            .then(data => { this.recipe = data; return data; })
         );
       }
     },

app/javascript/components/TheRecipeEditor.vue

@@ -48,8 +48,7 @@
 
     created() {
       this.loadResource(
-        api.getRecipe(this.recipeId)
+        api.getRecipe(this.recipeId, data => { this.recipe = data; return data; })
-          .then(data => { this.recipe = data; return data; })
       );
     },
 

app/javascript/components/TheRecipeList.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1 class="title">Recipes 2</h1>
+    <h1 class="title">Recipes</h1>
 
     <router-link v-if="isLoggedIn" :to="{name: 'new_recipe'}" class="button is-primary">Create Recipe</router-link>
 
@@ -142,8 +142,7 @@
 
       getList: debounce(function() {
         this.loadResource(
-          api.getRecipeList(this.search.page, this.search.per, this.search.sortColumn, this.search.sortDirection, this.search.name, this.search.tags)
+          api.getRecipeList(this.search.page, this.search.per, this.search.sortColumn, this.search.sortDirection, this.search.name, this.search.tags, data => this.recipeData = data)
-            .then(data => this.recipeData = data)
         );
       }, 500, {leading: true, trailing: true}),
 

app/javascript/lib/Api.js

@@ -25,19 +25,19 @@ class Api {
     }
   }
 
-  parseJSON(response) {
+  performRequest(url, method, params = {}, headers = {}) {
-    return response.json();
-  }
-
-  performRequest(url, method, params = {}) {
     const hasBody = Object.keys(params || {}).length !== 0;
 
-    const headers = new Headers();
+    const reqHeaders = new Headers();
-    headers.append('Accept', 'application/json');
+    reqHeaders.append('Accept', 'application/json');
-    headers.append('Content-Type', 'application/json');
+    reqHeaders.append('Content-Type', 'application/json');
+
+    for (let key in headers) {
+      reqHeaders.append(key, headers[key]);
+    }
 
     const opts = {
-      headers,
+      headers: reqHeaders,
       method: method,
       credentials: "same-origin"
     };
@@ -67,17 +67,47 @@ class Api {
     return queryParams;
   }
 
-  get(url, params = {}) {
+  buildGetUrl(url, params = {}) {
-
     const queryParams = this.objectToUrlParams(params);
-
     if (queryParams.length) {
       url = url + "?" + queryParams.join("&");
     }
+    return url;
+  }
+
+  get(url, params = {}) {
+    url = this.buildGetUrl(url, params);
 
     return this.performRequest(url, "GET");
   }
 
+  cacheFirstGet(url, params = {}, dataHandler) {
+    url = this.buildGetUrl(url, params);
+    let networkDataReceived = false;
+
+    const networkUpdate = this.performRequest(url, "GET", {}, {"Cache-Then-Network": "true"})
+      .then(data => {
+        networkDataReceived = true;
+        return dataHandler(data);
+      });
+
+    return caches.match(url)
+      .then(response => {
+        if (!response) throw Error("No data");
+        return response.json();
+      })
+      .then(data => {
+        // don't overwrite newer network data
+        if (!networkDataReceived) {
+          dataHandler(data);
+        }
+      })
+      .catch(function() {
+        // we didn't get cached data, the network is our last hope:
+        return networkUpdate;
+      });
+  }
+
   post(url, params = {}) {
     return this.performRequest(url, "POST", params);
   }
@@ -90,7 +120,7 @@ class Api {
     return this.performRequest(url, "DELETE", params);
   }
 
-  getRecipeList(page, per, sortColumn, sortDirection, name, tags) {
+  getRecipeList(page, per, sortColumn, sortDirection, name, tags, dataHandler) {
     const params = {
       criteria: {
         page: page || null,
@@ -102,17 +132,17 @@ class Api {
       }
     };
 
-    return this.get("/recipes", params);
+    return this.cacheFirstGet("/recipes", params, dataHandler);
   }
 
-  getRecipe(id, scale = null, system = null, unit = null) {
+  getRecipe(id, scale = null, system = null, unit = null, dataHandler) {
     const params = {
       scale,
       system,
       unit
     };
 
-    return this.get("/recipes/" + id, params);
+    return this.cacheFirstGet("/recipes/" + id, params, dataHandler);
   }
 
   buildRecipeParams(recipe) {

app/javascript/store/index.js

@@ -9,6 +9,7 @@ export default new Vuex.Store({
   strict: process.env.NODE_ENV !== 'production',
   state: {
     updateAvailable: false,
+    loadingCount: 0,
     loading: false,
     error: null,
     authChecked: false,
@@ -44,7 +45,12 @@ export default new Vuex.Store({
     },
 
     setLoading(state, value) {
-      state.loading = value;
+      if (value) {
+        state.loadingCount = state.loadingCount + 1;
+      } else {
+        state.loadingCount = state.loadingCount - 1;
+      }
+      state.loading = state.loadingCount !== 0;
     },
 
     setError(state, value) {

app/javascript/styles/_variables.scss

@@ -7,6 +7,7 @@ $coolors-green: rgba(121, 167, 54, 1);
 $coolors-red: #ab4c34;
 $coolors-yellow: rgba(240, 162, 2, 1);
 
+//$family-sans-serif: "Verdana", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
 $family-serif: Georgia, "Times New Roman", Times, serif;
 
 // Bluma default overrides

app/views/home/sw.js.erb

@@ -36,8 +36,10 @@ self.addEventListener('activate', function(event) {
 
 self.addEventListener('fetch', function(event) {
   var reqUrl = new URL(event.request.url);
+  var isCacheThenNetwork = event.request.headers.get("Cache-Then-Network") === "true";
   var x, asset;
 
+  // Cache-first response for static assets
   for (x = 0; x < staticAssets.length; x++) {
     asset = staticAssets[x];
     if (asset === reqUrl.pathname) {
@@ -50,7 +52,20 @@ self.addEventListener('fetch', function(event) {
     }
   }
 
+  // If the 'CacheThenNetwork' header is set, hit the network, cache the page, and return the response
+  if (isCacheThenNetwork) {
+    event.respondWith(caches.open(cacheName).then(function (cache) {
+      return fetch(event.request)
+        .then(function (response) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+    }));
 
+    return;
+  }
+
+  // Network, falling back to cache by default to support offline browsing of any cached resources
   event.respondWith(caches.open(cacheName).then(function(cache) {
     return fetch(event.request)
       .then(function(response) {