fix offline caching

Author: edencoder

bundles/serviceworker/controllers/serviceworker.js renamed to bundles/serviceworker/controllers/serviceworker.ts

@@ -1,12 +1,13 @@
 // Require local class dependencies
-const Controller = require('controller');
+import config from 'config';
+import Controller from 'controller';
 
 /**
  * Create Serviceworker Controller
  *
  * @mount /
  */
-class ServiceworkerController extends Controller {
+export default class ServiceworkerController extends Controller {
   /**
    * Construct Admin Controller class
    */
@@ -33,11 +34,17 @@ class ServiceworkerController extends Controller {
     // render offline page
     res.render();
   }
-}
 
-/**
- * Exports Admin Controller class
- *
- * @type {ServiceworkerController}
- */
-module.exports = ServiceworkerController;
+  /**
+   * config action
+   * @route {get} /sw/config.json
+   *
+   * @param req 
+   * @param res 
+   * @param next 
+   */
+  configAction(req, res, next) {
+    // get config
+    res.json(config.get('serviceworker.config') || {});
+  }
+}

bundles/serviceworker/public/js/serviceworker.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-globals */
 
 // Require events
 const Events = require('events');
@@ -21,6 +22,7 @@ class EdenServiceworker extends Events {
     // Bind methods
     this.send = this.send.bind(this);
     this.build = this.build.bind(this);
+    this.config = this.config.bind(this);
     this.endpoint = this.endpoint.bind(this);
 
     // Build this
@@ -32,20 +34,41 @@ class EdenServiceworker extends Events {
    */
   build() {
     // Emit on message
-    // eslint-disable-next-line no-restricted-globals
     self.addEventListener('message', (event) => {
       // On message
       this.emit(event.data.type, event.ports[0], ...(event.data.args || []));
     });
 
     // require offline
-    // eslint-disable-next-line no-restricted-globals
-    if ((self.config || {}).offline) {
+    if (self.config.offline) {
       // require offline
       this.offline = new EdenOffline(this);
     }
   }
 
+  /**
+   * return config
+   *
+   * @param {*} noCache 
+   */
+  async config(noCache = false) {
+    // return config
+    if (!noCache && self.config) return self.config;
+
+    // await fetch
+    const res = await fetch(`https://${self.config.domain}/sw/config.json`);
+    const data = await res.json();
+
+    // keys
+    Object.keys(data).forEach((key) => {
+      // set config
+      self.config[key] = data[key];
+    });
+
+    // return config
+    return self.config;
+  }
+
   /**
    * log message
    *

bundles/serviceworker/public/js/serviceworker/offline.js

@@ -40,14 +40,18 @@ class EdenOffline extends Events {
 
     // build routes
     this._routes = [];
+    this._installing = false;
 
     // loop routes
-    for (const route of self.config.routes) {
+    for (const route of self.config.routes || []) {
       // test route
-      route.test = toRegex(route.route);
+      const test = toRegex(route);
 
       // push route
-      this._routes.push(route);
+      this._routes.push({
+        route,
+        test,
+      });
     }
 
     // Adding `install` event listener
@@ -65,11 +69,14 @@ class EdenOffline extends Events {
     // Adding `fetch` event listener
     self.addEventListener('fetch', (event) => {
       // await install
-      event.respondWith(this.fetch(event));
+      if (!this._installing) event.respondWith(this.fetch(event));
     });
 
     // install offline cache
     this.eden.log('info', 'enabled offline');
+
+    // install
+    this.install();
   }
 
   /**
@@ -82,8 +89,9 @@ class EdenOffline extends Events {
   async fetch(event) {
     // get request
     const { request } = event;
+
     // eslint-disable-next-line max-len
-    const path = request.url.includes(self.config.domain) ? request.url.split(self.config.domain).pop() : null;
+    const path = request.url.includes(self.config.domain) ? request.url.split(self.config.domain).pop() : request.url;
 
     // match cache
     let response = await caches.match(request);
@@ -96,7 +104,7 @@ class EdenOffline extends Events {
       // find offline route
       const offline = this._routes.find((route) => {
         // test route
-        return route.test.test(path);
+        return route.route === path ? true : route.test.test(path);
       });
 
       // create offline response
@@ -105,7 +113,7 @@ class EdenOffline extends Events {
           url    : path,
           page   : offline ? offline.view : 'offline-page',
           path   : offline ? offline.path : path,
-          layout : `${(offline || {}).layout || 'main'}-layout`,
+          layout : 'main-layout',
         },
         page : {
           title : offline ? offline.title : 'Offline',
@@ -136,27 +144,36 @@ class EdenOffline extends Events {
    * @param  {Event} event
    */
   async install() {
-    // install offline cache
-    this.eden.log('info', 'installing offline cache');
+    // check installing
+    if (this._installing) return;
 
-    // open cache
-    const cache = await caches.open(self.config.version);
-    const files = self.config.offline.files || [];
+    // installing
+    this._installing = true;
 
-    // unshift files
-    files.unshift('/');
-    files.unshift('/offline');
-    files.unshift(`/public/js/app.min.js?v=${self.config.version}`);
-    files.unshift(`/public/css/app.min.css?v=${self.config.version}`);
+    // try/catch
+    try {
+      // skip waiting
+      self.skipWaiting();
 
-    // add all
-    await cache.addAll(files);
+      // config
+      const config = await this.eden.config(true);
 
-    // skip waiting
-    self.skipWaiting();
+      // install offline cache
+      this.eden.log('info', 'installing offline cache');
 
-    // install offline cache
-    this.eden.log('info', 'installed offline cache');
+      // open cache
+      const cache = await caches.open(config.version);
+      const files = config.routes || [];
+
+      // add all
+      await cache.addAll(files);
+
+      // install offline cache
+      this.eden.log('info', 'installed offline cache');
+    } catch (e) {}
+
+    // installing
+    this._installing = false;
   }
 
   /**
@@ -167,20 +184,50 @@ class EdenOffline extends Events {
    * @return {Promise}
    */
   async activate() {
+    // config
+    const config = await this.eden.config(true);
+
+    // build routes
+    this._routes = [];
+
+    // loop routes
+    for (const route of self.config.routes || []) {
+      // test route
+      const test = toRegex(route);
+
+      // push route
+      this._routes.push({
+        route,
+        test,
+      });
+    }
+
+    // install
+    await this.install();
+
     // install offline cache
-    this.eden.log('info', 'removing depricated offline cache');
+    this.eden.log('info', 'checking offline cache');
 
     // get cache keys
     const keys = await caches.keys();
 
     // loop keys
     for (const key of keys) {
       // delete cache
-      if (key !== self.config.version) await caches.delete(key);
+      if (key !== config.version) {
+        // install offline cache
+        this.eden.log('info', `removing offline cache ${key}`);
+
+        // delete
+        await caches.delete(key);
+
+        // install offline cache
+        this.eden.log('info', `removed offline cache ${key}`);
+      }
     }
 
     // install offline cache
-    this.eden.log('info', 'removed depricated offline cache');
+    this.eden.log('info', 'checked offline cache');
 
     // claim clients
     self.clients.claim();