Merge pull request #26 from bstavroulakis/develop

bstavroulakis · web-flow · commit d6a60647ef66 · 2017-10-22T20:30:06.000-07:00
Improve offline experience
diff --git a/index.html b/index.html
@@ -13,15 +13,15 @@
     <meta name="apple-mobile-web-app-title" content="Full Stack Weekly">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="theme-color" content="#287ab1">
-    <link rel="apple-touch-icon" sizes="180x180" href="{{ CDN }}/app-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/app-icon.png">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimal-ui">
     <link rel="manifest" href="/assets/manifest.json" />
-    {{ STYLES }}
-    {{ STATE }}
+    <link rel="stylesheet" href="/assets/styles.css" media="all">
+    <meta name="vue-state" />
   </head>
   <body>
-    {{ APP }}
-    {{ SCRIPTS }}
+    <div id="app"></div>
+    <script defer src="/assets/js/vendor.js"></script><script defer src="/assets/js/app.js"></script>
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/server.js b/server.js
@@ -2,7 +2,6 @@
 
 process.env.VUE_ENV = 'server'
 const isProd = !(process.env.NODE_ENV === 'development')
-const cdnClient = (isProd) ? 'https://fullstackweekly-client.azureedge.net' : '/assets'
 const fs = require('fs')
 const path = require('path')
 const resolve = file => path.resolve(__dirname, file)
@@ -47,16 +46,11 @@ const indexHTML = (() => {
   let template = ''
   if (isProd) {
     template = fs.readFileSync(resolve('./dist/index.html'), 'utf-8')
-    template = template.replace(/{{ SCRIPTS }}/gmi, '')
-    template = template.replace('{{ STYLES }}', '')
-    template = template.replace('<link href="/assets/styles', '<link rel="stylesheet" href="{{ CDN }}/styles media="all" ')
-    template = template.replace(/<script type="text\/javascript" src="\/assets/gmi, '<script type="text/javascript" src="{{ CDN }}/')
+    template = template.replace('<link rel="stylesheet" href="/assets/styles.css" media="all">', '')
+    template = template.replace('<script defer src="/assets/js/vendor.js"></script><script defer src="/assets/js/app.js"></script>', '')
   } else {
     template = fs.readFileSync(resolve('./index.html'), 'utf-8')
-    template = template.replace('{{ STYLES }}', '<link rel="stylesheet" href="{{ CDN }}/styles.css" media="all">')
-    template = template.replace(/{{ SCRIPTS }}/gmi, '<script defer src="{{ CDN }}/js/vendor.js"></script><script defer src="{{ CDN }}/js/app.js"></script>')
   }
-  template = template.replace(/{{ CDN }}/gmi, cdnClient)
   return template
 })()
 
@@ -76,6 +70,8 @@ if (isProd) {
   app.use(favicon(path.resolve(__dirname, './dist/favicon.ico')))
 } else {
   app.use('/dist', express.static(resolve('./dist')))
+  app.use('/service-worker.js', express.static(resolve('./src/service-worker.js')))
+  app.use('/sw_config.js', express.static(resolve('./src/assets/sw-config.js')))
   app.use(favicon(path.resolve(__dirname, 'src/assets/favicon.ico')))
 }
 
@@ -103,8 +99,8 @@ app.get('*', (req, res) => {
       console.log(err.message)
       return res.status(200).send('Server Error')
     }
-    html = indexHTML.replace('{{ APP }}', html)
-    html = html.replace('{{ STATE }}', `<script>window.__INITIAL_STATE__=${serialize(context.initialState, { isJSON: true })}</script>`)
+    html = indexHTML.replace('<div id="app"></div>', html)
+    html = html.replace('<meta name="vue-state" />', `<script>window.__INITIAL_STATE__=${serialize(context.initialState, { isJSON: true })}</script>`)
     res.setHeader('Content-Length', Buffer.byteLength(html))
     res.write(html)
     res.end()
diff --git a/src/app.service.cache.js b/src/app.service.cache.js
@@ -4,45 +4,54 @@ import Config from './app.config.js'
 import request from 'axios'
 import localforage from 'localforage'
 
-request.defaults.baseURL = Config.wpDomain
+// request.defaults.baseURL = Config.wpDomain
 
 const cacheService = {
   store: '',
   storeCacheTime: '',
   currentTime: '',
   isBrowser: false,
+  networkRequest: (path, cacheTime, resolve, reject) => {
+    cacheService
+      .networkFirstStrategy(path, cacheTime)
+      .then(response => resolve(response))
+      .catch(err => reject(err))
+  },
   networkFirstStrategy: (path, cacheTime) => {
     return new Promise((resolve, reject) => {
       request
         .get(path)
         .then(response => {
           // Response returned, cache it and return it
           if (response.status === 200) {
-            if (cacheService.isBrowser) {
-              cacheService.storeCacheTime.setItem(
-                path,
-                cacheService.currentTime + cacheTime
-              )
-              cacheService.store
-                .setItem(path, {
-                  data: response.data,
-                  headers: response.headers
-                })
-                .then(response => resolve(response))
-                .catch(err => reject(err))
-            } else {
+            if (!cacheService.isBrowser) {
               resolve(response)
+              return
             }
-          } else {
-            if (cacheService.isBrowser) {
-              cacheService.store
-                .getItem(path)
-                .then(response => resolve(response))
-                .catch(err => reject(err))
-            } else {
-              reject(new Error('Cannot get ' + path))
-            }
+            cacheService.storeCacheTime.setItem(
+              path,
+              cacheService.currentTime + cacheTime
+            )
+            cacheService.store
+              .setItem(path, {
+                data: response.data,
+                headers: response.headers
+              })
+              .then(response => resolve(response))
+              .catch(err => reject(err))
+
+            return
+          }
+
+          if (!cacheService.isBrowser) {
+            reject(new Error('Cannot get ' + path))
+            return
           }
+
+          cacheService.store
+            .getItem(path)
+            .then(response => resolve(response))
+            .catch(err => reject(err))
         })
         .catch(error => {
           console.log(error)
@@ -56,52 +65,42 @@ const cacheService = {
         .then(function (timeLastCached) {
           // Cache has expired
           if (timeLastCached < cacheService.currentTime) {
-            cacheService
-              .networkFirstStrategy(path, cacheTime)
-              .then(response => {
+            cacheService.networkRequest(path, cacheTime, resolve, reject)
+
+            return
+          }
+
+          cacheService.store
+            .getItem(path)
+            .then(response => {
+              if (response) {
+                // Is in cache perfect!
                 resolve(response)
-              })
-              .catch(err => reject(err))
-          } else {
-            // Get item from cache
-            cacheService.store
-              .getItem(path)
-              .then(response => {
-                if (response) {
-                  // Is in cache perfect!
-                  resolve(response)
-                } else {
-                  // Doesn't exist in cache try network
-                  cacheService
-                    .networkFirstStrategy(path, cacheTime)
-                    .then(response => resolve(response))
-                    .catch(err => reject(err))
-                }
-              })
-              .catch(error => {
-                console.log(error)
+              } else {
                 // Doesn't exist in cache try network
-                cacheService
-                  .networkFirstStrategy(path, cacheTime)
-                  .then(response => resolve(response))
-                  .catch(err => reject(err))
-              })
-          }
+                cacheService.networkRequest(path, cacheTime, resolve, reject)
+              }
+            })
+            .catch(error => {
+              console.log(error)
+              // Doesn't exist in cache try network
+              cacheService.networkRequest(path, cacheTime, resolve, reject)
+            })
         })
         .catch(error => {
           console.log(error)
           // Doesn't exist in cache timeouts try network
-          cacheService
-            .networkFirstStrategy(path, cacheTime)
-            .then(response => resolve(response))
-            .catch(err => reject(err))
+          cacheService.networkRequest(path, cacheTime, resolve, reject)
         })
     })
   },
   get: function (path, cacheTime) {
+    // path = Config.wpDomain + path
+
     return new Promise((resolve, reject) => {
       cacheService.currentTime = Math.floor(Date.now() / 1000)
       cacheService.isBrowser = typeof window !== 'undefined'
+
       if (cacheService.isBrowser) {
         cacheService.store = localforage.createInstance({
           name: Config.loadDbName
@@ -110,15 +109,12 @@ const cacheService = {
           name: Config.loadDbName + '_cacheTime'
         })
       }
+
       if (!cacheTime || cacheTime === 0) {
         cacheService
           .networkFirstStrategy(path, 0)
           .then(response => {
-            if (!response) {
-              resolve('')
-            } else {
-              resolve(response)
-            }
+            resolve(response || '')
           })
           .catch(err => {
             reject(err)
@@ -127,11 +123,7 @@ const cacheService = {
         cacheService
           .offlineFirstStrategy(path, cacheTime)
           .then(response => {
-            if (!response) {
-              resolve('')
-            } else {
-              resolve(response)
-            }
+            resolve(response || '')
           })
           .catch(err => reject(err))
       }
diff --git a/src/assets/robots.txt b/src/assets/robots.txt
@@ -1,2 +1,2 @@
 User-agent: *
-Allow: /
+Disallow: /
diff --git a/src/assets/sw-config.js b/src/assets/sw-config.js
@@ -0,0 +1,24 @@
+var config = {
+  "assets": [
+    "/favicon.ico",
+    "/robots.txt",
+    "/index.html",
+    "/assets/app-icon.png",
+    "/assets/fontello.svg",
+    "/assets/styles.css",
+    "/assets/styles.css.map",
+    "/assets/styles.css",
+    "/assets/js/app.js",
+    "/assets/js/vendor.js",
+    "/"
+  ],
+  "paths": {
+    "api": "https://fullstackweekly.azureedge.net/wp-json",
+    "remote": "https://fullstackweekly.azureedge.net/",
+    "client": "http://localhost:3000/"
+  },
+  "cacheNames": {
+    "assetCache": "vwpCacheAsset",
+    "remoteCache": "vwpCacheRemote"
+  }
+}
diff --git a/src/service-worker.js b/src/service-worker.js
diff --git a/src/theme/AppFooter.vue b/src/theme/AppFooter.vue

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`	`User-agent: *`
`2`		`-Allow: /`
	`2`	`+Disallow: /`