improve offline exprience

Author: bstavroulakis

build/build.serviceWorker.js

@@ -48,7 +48,7 @@ const generateSwConfigFile = () => {
   return new Promise((resolve, reject) => {
     var swConfigFilename = 'sw_config_' + self.assetCacheHash + '.js';
     fs.outputFile( (dirPath + "/" + swConfigFilename), 'var config = ' +  JSON.stringify({
-      assets: self.assetFiles.concat('/'),
+      assets: self.assetFiles.concat('/offline-redirect/'),
       paths:{api:config.wpDomain + 'wp-json', remote:config.wpDomain, client: config.client},
       cacheNames:{assetCache:`vwpCacheAsset-${self.assetCacheHash}`, remoteCache:`vwpCacheRemote-${self.assetCacheHash}`}
     }), () => {

src/assets/sw-config.js

@@ -10,7 +10,7 @@ var config = {
     "/assets/styles.css",
     "/assets/js/app.js",
     "/assets/js/vendor.js",
-    "/"
+    "/offline-redirect/"
   ],
   "paths": {
     "api": "https://fullstackweekly.azureedge.net/wp-json",

src/router/index.js

@@ -5,6 +5,7 @@ import ThemePagePage from '../theme/Page.vue'
 import ThemePageCategoryNewsletter from '../theme/Category-Newsletter.vue'
 import ThemePageCategoryLearningPaths from '../theme/Category-LearningPaths.vue'
 import ThemePageSingleLearningPaths from '../theme/Single-LearningPaths.vue'
+import OfflineRedirect from '../theme/OfflineRedirect.vue'
 import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
@@ -22,6 +23,7 @@ const router = new VueRouter({
     { path: '/category/:id/page/:page', component: ThemePageCategory },
     { path: '/category/:categorySlug/:id', component: ThemePageSingle },
     { path: '/category/:id', component: ThemePageCategory, params: { page: 1 } },
+    { path: '/offline-redirect', component: OfflineRedirect },
     { path: '/:id', component: ThemePageSingle },
     { path: '/', name: 'Home', redirect: '/category/blog/' }
   ]

src/service-worker.js

@@ -30,14 +30,14 @@ self.addEventListener('fetch', function (event) {
   var requestUrl = new URL(event.request.url)
   var requestPath = requestUrl.pathname
 
-  if (stringContains(requestUrl.href, config.paths.api)) {
+  if (stringContains(event.request.url, config.paths.api)) {
     // console.log("network only");
     event.respondWith(fetch(event.request))
   } else if (config.assets.indexOf(requestPath) > -1) {
     // console.log("cache first:", requestUrl.href);
     event.respondWith(cacheFirstStrategy(event.request))
-  } else if (stringContains(requestUrl.href, config.paths.remote) ||
-           stringContains(requestUrl.href, config.paths.client)) {
+  } else if (stringContains(event.request.url, config.paths.remote) ||
+           stringContains(event.request.url, config.paths.client)) {
     // console.log("network first:", requestUrl.href, " current",currentDomain, "requestPath:", requestPath);
     event.respondWith(networkFirstStrategy(event.request))
   } else {
@@ -54,8 +54,15 @@ function cacheFirstStrategy (request) {
 function networkFirstStrategy (request) {
   return fetchRequestAndCache(request).catch(function (response) {
     return caches.match(request).then(function (cacheResponse) {
-      console.log('not found in cache or network')
-      return cacheResponse || caches.match('/')
+      if (!cacheResponse) {
+        var requestUrl = new URL(request.url)
+        var requestPath = requestUrl.pathname
+
+        if (stringContains(request.url, config.paths.client)) {
+          return caches.match('/offline-redirect/#' + requestPath)
+        }
+      }
+      return cacheResponse
     })
   })
 }

src/theme/OfflineRedirect.vue

@@ -0,0 +1,8 @@
+<template></template>
+<script>
+export default {
+  beforeMount () {
+    this.$router.push(this.$route.hash.replace('#', ''))
+  }
+}
+</script>

src/theme/Page.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="vwp-single">
+  <div class="vwp-single">
     <div v-if="!single || (single && !single.content)">
       <h1>Loading Page...</h1>
       <div class="single-content card fake-single-content"></div>
@@ -44,7 +44,7 @@ export default {
 </script>
 
 <style lang="scss">
-  #vwp-single .single-content{
+  .vwp-single .single-content{
     background-color: #ffffff;
     padding:20px;
     display:inline-block;