feat: pwa (epicmaxco#668)

* feat: pwa
* update lock

.eslintrc.js

@@ -16,4 +16,7 @@ module.exports = {
   parserOptions: {
     parser: 'babel-eslint',
   },
+  globals: {
+    'workbox': 'readonly'
+  }
 }

package.json

@@ -33,6 +33,7 @@
     "medium-editor": "^5.23.3",
     "normalize.css": "^8.0.1",
     "popper.js": "^1.15.0",
+    "register-service-worker": "^1.6.2",
     "v-tooltip": "^2.0.0-rc.30",
     "vue": "^2.6.10",
     "vue-bulma-expanding": "0.0.1",
@@ -53,6 +54,7 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.10.0",
     "@vue/cli-plugin-eslint": "^3.10.0",
+    "@vue/cli-plugin-pwa": "^3.11.0",
     "@vue/cli-plugin-unit-jest": "^3.10.0",
     "@vue/cli-service": "^3.10.0",
     "@vue/eslint-config-standard": "^4.0.0",

public/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "vuestic-admin",
+  "short_name": "vuestic-admin",
+  "icons": [
+    {
+      "src": "./img/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "./img/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "background_color": "#000000",
+  "theme_color": "#4DBA87"
+}

src/app/main.js

@@ -15,6 +15,7 @@ import VueClipboard from 'vue-clipboard2'
 import VeeValidate from 'vee-validate'
 
 import '../metrics'
+import '../registerServiceWorker'
 
 // NOTE: workaround for VeeValidate + vuetable-2
 Vue.use(VeeValidate, { fieldsBagName: 'formFields' })

src/registerServiceWorker.js

@@ -0,0 +1,32 @@
+/* eslint-disable no-console */
+
+import { register } from 'register-service-worker'
+
+if (process.env.NODE_ENV === 'production') {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready () {
+      console.log(
+        'App is being served from cache by a service worker.\n' +
+        'For more details, visit https://goo.gl/AFskqB'
+      )
+    },
+    registered () {
+      console.log('Service worker has been registered.')
+    },
+    cached () {
+      console.log('Content has been cached for offline use.')
+    },
+    updatefound () {
+      console.log('New content is downloading.')
+    },
+    updated () {
+      console.log('New content is available; please refresh.')
+    },
+    offline () {
+      console.log('No internet connection found. App is running in offline mode.')
+    },
+    error (error) {
+      console.error('Error during service worker registration:', error)
+    },
+  })
+}

src/service-worker.js

@@ -0,0 +1,13 @@
+self.__precacheManifest = [].concat(self.__precacheManifest || [])
+workbox.precaching.suppressWarnings()
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {})
+
+workbox.routing.registerRoute(
+  /\.(?:png|gif|jpg|jpeg|svg)$/,
+  workbox.strategies.staleWhileRevalidate(0),
+)
+
+workbox.routing.registerRoute(
+  new RegExp('https://reqres.in'),
+  workbox.strategies.networkFirst(),
+)

vue.config.js

@@ -49,6 +49,13 @@ if (!process.env.VUE_APP_BOOK) {
         },
       },
     },
+    pwa: {
+      workboxPluginMode: 'InjectManifest',
+      workboxOptions: {
+        swSrc: './src/service-worker.js',
+        importWorkboxFrom: 'local',
+      },
+    },
   }
 }