Enabled workbox replacing SW-Precache

Author: shivanshs9

package-lock.json

@@ -29,7 +29,6 @@
     "@pwa/cli": "latest",
     "@pwa/plugin-brotli": "latest",
     "@pwa/plugin-gzip": "latest",
-    "@pwa/plugin-sw-precache": "latest",
     "@pwa/preset-vue": "latest",
     "babel-cli": "^6.26.0",
     "babel-preset-env": "^1.7.0",
@@ -39,7 +38,8 @@
     "stylus": "^0.54.0",
     "stylus-loader": "^3.0.0",
     "ts-loader": "^5.3.3",
-    "typescript": "^3.3.1"
+    "typescript": "^3.3.1",
+    "workbox-webpack-plugin": "^5.1.2"
   },
   "browserslist": [
     ">0.25%",

package.json

@@ -1,11 +1,20 @@
+const { InjectManifest } = require("workbox-webpack-plugin");
 const { join } = require("path");
 
 exports.webpack = function(config, env) {
+  // Add module aliases
   const src = config.context;
   config.resolve.alias["@styles"] = join(src, "styles");
   config.resolve.alias["@js"] = join(src, "js");
   config.resolve.alias["@store"] = join(src, "store");
   config.devServer.host = "0.0.0.0";
+
+  // Add Workbox plugin
+  config.plugins.push(
+    new InjectManifest({
+      swSrc: join(src, "sw.js"),
+    })
+  );
 };
 
 exports.brotli = {
@@ -17,6 +26,6 @@ exports.brotli = {
     size_hint: 0,
     lgblock: 0,
     lgwin: 22,
-    mode: 0
-  }
+    mode: 0,
+  },
 };

pwa.config.js

@@ -14,27 +14,28 @@ import App from "./App";
 import router from "./router";
 import filters from "./plugins/filters";
 import store from "./store";
+import wb from "./registerServiceWorker";
 
 import "./styles/index.styl";
 
 Vue.config.productionTip = false;
-const render = h => h(App);
+const render = (h) => h(App);
 
 Vue.use(Toasted, {
   position: "bottom-center",
   duration: 3000,
   iconPack: "fontawesome",
   action: {
     icon: "times",
-    onClick: (e, toastObject) => toastObject.goAway(0)
+    onClick: (e, toastObject) => toastObject.goAway(0),
   },
   fitToScreen: true,
-  singleton: true
+  singleton: true,
 });
 
 Vue.toasted.register(
   "error_post",
-  payload => {
+  (payload) => {
     const msg = payload.message || "Something went wrong!";
     return `Oops... ${msg}`;
   },
@@ -43,7 +44,7 @@ Vue.toasted.register(
 
 Vue.toasted.register(
   "success",
-  payload => {
+  (payload) => {
     const msg = payload.message || "Success!";
     return `Yay! ${msg}`;
   },
@@ -60,21 +61,21 @@ Vue.use(vueMq, {
     md: 991,
     lg: 1367,
     xl: 1920,
-    xxl: Infinity
-  }
+    xxl: Infinity,
+  },
 });
 
 Vue.use(scrollSpy, {
-  easing: Easing.Cubic.In
+  easing: Easing.Cubic.In,
 });
 
 Vue.use(VueYoutube);
 
 Vue.use(VueReCaptcha, {
   siteKey: "6LepxJ0UAAAAAMGBO1-1PxqQ_Y3TuJGt5DHp5cHk",
   loaderOptions: {
-    useRecaptchaNet: true
-  }
+    useRecaptchaNet: true,
+  },
 });
 
 Vue.use(filters);
@@ -85,31 +86,29 @@ Vue.use(filters);
 const app = new Vue({
   router,
   store,
-  render
+  render,
 }).$mount("#app", true);
 
 if (process.env.NODE_ENV === "production") {
   window.ga = new GAnalytics("UA-72222745-1");
 
-  router.afterEach(nxt => {
+  router.afterEach((nxt) => {
     ga.send("pageview", {
-      dp: nxt.path
+      dp: nxt.path,
     });
   });
 }
 
 // Service Worker registration
-if ("serviceWorker" in navigator) {
-  navigator.serviceWorker.register("./sw.js");
-}
+Vue.prototype.$workbox = wb;
 
 const config = {
   apiKey: "AIzaSyDgx3hMDrBTQ6ci9hKg0MMmbR36rBaH6Bo",
   authDomain: "codefest19.firebaseapp.com",
   databaseURL: "https://codefest19.firebaseio.com",
   projectId: "codefest19",
   storageBucket: "codefest19.appspot.com",
-  messagingSenderId: "800543243585"
+  messagingSenderId: "800543243585",
 };
 
 firebase.initializeApp(config);

src/index.js

@@ -0,0 +1,17 @@
+import { Workbox } from "workbox-window";
+
+let wb;
+
+if ("serviceWorker" in navigator) {
+  wb = new Workbox(`/sw.js`);
+
+  wb.addEventListener("controlling", () => {
+    window.location.reload();
+  });
+
+  wb.register();
+} else {
+  wb = null;
+}
+
+export default wb;

src/registerServiceWorker.js

@@ -1 +1,7 @@
-self.addEventListener("install", event => {});
+importScripts("./workbox-v4.3.1.js");
+
+if (workbox) {
+  workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
+} else {
+  console.warn("Boo! Workbox did not load!");
+}

src/sw.js

@@ -0,0 +1,70 @@
+!(function() {
+  "use strict";
+  try {
+    self["workbox:sw:4.3.1"] && _();
+  } catch (t) {}
+  const t = "https://storage.googleapis.com/workbox-cdn/releases/4.3.1",
+    e = {
+      backgroundSync: "background-sync",
+      broadcastUpdate: "broadcast-update",
+      cacheableResponse: "cacheable-response",
+      core: "core",
+      expiration: "expiration",
+      googleAnalytics: "offline-ga",
+      navigationPreload: "navigation-preload",
+      precaching: "precaching",
+      rangeRequests: "range-requests",
+      routing: "routing",
+      strategies: "strategies",
+      streams: "streams",
+    };
+  self.workbox = new (class {
+    constructor() {
+      return (
+        (this.v = {}),
+        (this.t = {
+          debug: "localhost" === self.location.hostname,
+          modulePathPrefix: null,
+          modulePathCb: null,
+        }),
+        (this.s = this.t.debug ? "dev" : "prod"),
+        (this.o = !1),
+        new Proxy(this, {
+          get(t, s) {
+            if (t[s]) return t[s];
+            const o = e[s];
+            return o && t.loadModule(`workbox-${o}`), t[s];
+          },
+        })
+      );
+    }
+    setConfig(t = {}) {
+      if (this.o)
+        throw new Error(
+          "Config must be set before accessing workbox.* modules"
+        );
+      Object.assign(this.t, t), (this.s = this.t.debug ? "dev" : "prod");
+    }
+    loadModule(t) {
+      const e = this.i(t);
+      try {
+        importScripts(e), (this.o = !0);
+      } catch (s) {
+        throw (console.error(`Unable to import module '${t}' from '${e}'.`), s);
+      }
+    }
+    i(e) {
+      if (this.t.modulePathCb) return this.t.modulePathCb(e, this.t.debug);
+      let s = [t];
+      const o = `${e}.${this.s}.js`,
+        r = this.t.modulePathPrefix;
+      return (
+        r &&
+          "" === (s = r.split("/"))[s.length - 1] &&
+          s.splice(s.length - 1, 1),
+        s.push(o),
+        s.join("/")
+      );
+    }
+  })();
+})();

src/workbox-v4.3.1.js

@@ -1,6 +1,6 @@
 module.exports = {
   productionSourceMap: false,
   devServer: {
-    host: "0.0.0.0"
-  }
+    host: "0.0.0.0",
+  },
 };