basic offline page working

vue/package.json

@@ -28,9 +28,10 @@
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^7.0.0-0",
     "webpack-bundle-tracker": "0.4.3",
-    "workbox-strategies": "^6.0.2",
+    "workbox-navigation-preload": "^6.0.2",
     "workbox-precaching": "^6.0.2",
-    "workbox-routing": "^6.0.2"
+    "workbox-routing": "^6.0.2",
+    "workbox-strategies": "^6.0.2"
   },
   "eslintConfig": {
     "root": true,

vue/src/sw.js

@@ -1,8 +1,46 @@
 // These JavaScript module imports need to be bundled:
 import {precacheAndRoute} from 'workbox-precaching';
-import {registerRoute} from 'workbox-routing';
+import {registerRoute, setCatchHandler} from 'workbox-routing';
 import {CacheFirst, NetworkFirst, StaleWhileRevalidate} from 'workbox-strategies';
 
+
+const CACHE_NAME = 'offline-html';
+// This assumes /offline.html is a URL for your self-contained
+// (no external images or styles) offline page.
+const FALLBACK_HTML_URL = '/offline/';
+// Populate the cache with the offline HTML page when the
+// service worker is installed.
+self.addEventListener('install', async (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then((cache) => cache.add(new Request(FALLBACK_HTML_URL, {cache: "reload"})))
+  );
+});
+
+// default handler if everything else fails
+setCatchHandler(({event}) => {
+  // The FALLBACK_URL entries must be added to the cache ahead of time, either
+  // via runtime or precaching. If they are precached, then call
+  // `matchPrecache(FALLBACK_URL)` (from the `workbox-precaching` package)
+  // to get the response from the correct cache.
+  //
+  // Use event, request, and url to figure out how to respond.
+  // One approach would be to use request.destination, see
+  // https://medium.com/dev-channel/service-worker-caching-strategies-based-on-request-types-57411dd7652c
+  switch (event.request.destination) {
+    case 'document':
+      // If using precached URLs:
+      // return matchPrecache(FALLBACK_HTML_URL);
+        console.log('Triggered fallback HTML')
+      return caches.match(FALLBACK_HTML_URL);
+
+    default:
+      // If we don't have a fallback, just return an error response.
+         console.log('Triggered response ERROR')
+      return Response.error();
+  }
+});
+
 precacheAndRoute(self.__WB_MANIFEST);
 
 registerRoute(
@@ -37,3 +75,4 @@ registerRoute(
         cacheName: 'html'
     })
 )
+

vue/yarn.lock

@@ -8882,6 +8882,13 @@ workbox-navigation-preload@^5.1.4:
   dependencies:
     workbox-core "^5.1.4"
 
+workbox-navigation-preload@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-6.0.2.tgz#bfd9c61096be921b830153a3004b7212220748dc"
+  integrity sha512-7+ojLrjXmTFZBfGmUQIcBWB+xrFgXLMJGNQAtxT7Ta9A23rEWo8jqAgeuwAylebcORUlM+ztgYTV7eGp+AD+Yg==
+  dependencies:
+    workbox-core "^6.0.2"
+
 workbox-precaching@^5.1.4:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-5.1.4.tgz#874f7ebdd750dd3e04249efae9a1b3f48285fe6b"