very basic offline page working

vue/src/sw.js

@@ -14,21 +14,29 @@ self.addEventListener('install', async (event) => {
     );
 });
 
+// since the mode is inject manifest this needs to be present but because
+// precacheAndRoute is cache first and i currently dont really know how to
+// do versioning i will only pre cache the offline page and its required assets
+self.__WB_MANIFEST
+
+const OFFLINE_PAGE_REVISION = '1'
+precacheAndRoute([
+    {url: '/offline/', revision: OFFLINE_PAGE_REVISION},
+    {url: '/static/vue/js/offline_view.js', revision: OFFLINE_PAGE_REVISION},
+]);
+
 // default handler if everything else fails
 setCatchHandler(({event}) => {
     switch (event.request.destination) {
         case 'document':
             console.log('Triggered fallback HTML')
             return caches.match(OFFLINE_PAGE_URL);
-
         default:
             console.log('Triggered response ERROR')
             return Response.error();
     }
 });
 
-precacheAndRoute(self.__WB_MANIFEST);
-
 registerRoute(
     ({request}) => request.destination === 'image',
     new CacheFirst({
@@ -49,12 +57,31 @@ registerRoute(
 )
 
 registerRoute(
-    new RegExp('jsi18n/'),
+    new RegExp('jsreverse'),
     new StaleWhileRevalidate({
         cacheName: 'assets'
     })
 )
 
+registerRoute(
+    new RegExp('jsi18n'),
+    new StaleWhileRevalidate({
+        cacheName: 'assets'
+    })
+)
+
+registerRoute(
+    new RegExp('api/recipe/([0-9]+)'),
+    new NetworkFirst({
+        cacheName: 'api-recipe',
+        plugins: [
+            new ExpirationPlugin({
+                maxEntries: 50,
+            }),
+        ],
+    })
+)
+
 registerRoute(
     new RegExp('api/*'),
     new NetworkFirst({
@@ -68,41 +95,15 @@ registerRoute(
 )
 
 registerRoute(
-    new RegExp('api/recipe/([0-9]+)'),
+    ({request}) => request.destination === 'document',
     new NetworkFirst({
-        cacheName: 'api-recipe',
+        cacheName: 'html',
         plugins: [
             new ExpirationPlugin({
+                maxAgeSeconds: 60 * 60 * 24 * 30,
                 maxEntries: 50,
             }),
         ],
     })
 )
 
-const matchHtml = ({url, request, event}) => {
-    if (request.destination === 'document') {
-        if (RegExp('view/recipe/*').test(url)) {
-            return true
-        }
-        if (RegExp('search/*').test(url)) {
-            return true
-        }
-        if (RegExp('plan/*').test(url)) {
-            return true
-        }
-    }
-    return false;
-};
-
-registerRoute(
-    matchHtml,
-    new NetworkFirst({
-        cacheName: 'html',
-        plugins: [
-            new ExpirationPlugin({
-                maxAgeSeconds: 60 * 60 * 24 * 30,
-            }),
-        ],
-    })
-)
-

vue/vue.config.js

@@ -32,6 +32,12 @@ module.exports = {
         workboxOptions: {
             swSrc: './src/sw.js',
             swDest: '../../templates/sw.js',
+            manifestTransforms: [
+                originalManifest => {
+                    const result = originalManifest.map(entry => new Object({url: 'static/vue/' + entry.url}))
+                    return {manifest: result, warnings: []};
+                }
+            ],
         }
     },
     chainWebpack: config => {
@@ -47,6 +53,7 @@ module.exports = {
             },
         });
 
+        //TODO somehow remov them as they are also added to the manifest config of the service worker
         /*
         Object.keys(pages).forEach(page => {
             config.plugins.delete(`html-${page}`);