Feature: Add PWA settings

pinry-spa/.eslintrc.js

@@ -11,7 +11,7 @@ module.exports = {
     // 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'max-len': 'off',
-    "no-console": "off",
+    'no-console': 'off',
   },
   parserOptions: {
     parser: 'babel-eslint',

pinry-spa/package.json

@@ -11,6 +11,7 @@
     "axios": "^0.19.0",
     "buefy": "^0.8.8",
     "core-js": "^3.3.2",
+    "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
     "vue-masonry": "^0.11.8",
     "vue-router": "^3.1.3"
@@ -18,6 +19,7 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",
     "@vue/cli-plugin-eslint": "^4.0.0",
+    "@vue/cli-plugin-pwa": "^4.1.1",
     "@vue/cli-plugin-router": "^4.0.5",
     "@vue/cli-service": "^4.0.0",
     "@vue/eslint-config-airbnb": "^4.0.0",

pinry-spa/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

pinry-spa/src/main.js

@@ -4,6 +4,7 @@ import { VueMasonryPlugin } from 'vue-masonry';
 import App from './App.vue';
 import router from './router';
 import setUpAxiosCsrfConfig from './components/utils/csrf';
+import './registerServiceWorker';
 
 Vue.config.productionTip = false;
 Vue.use(Buefy);

pinry-spa/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);
+    },
+  });
+}

pinry-spa/vue.config.js

@@ -16,4 +16,19 @@ module.exports = {
       },
     },
   },
+  pwa: {
+    name: 'Pinry Mobile',
+    appleMobileWebAppCapable: 'yes',
+    appleMobileWebAppStatusBarStyle: 'black',
+    // configure the workbox plugin
+    workboxPluginMode: 'GenerateSW',
+    iconPaths: {
+      favicon32: 'favicon.png',
+      favicon16: 'favicon.png',
+      appleTouchIcon: 'favicon.png',
+      // FIXME(winkidney): Add svg file for safari
+      // maskIcon: 'img/icons/safari-pinned-tab.svg',
+      msTileImage: 'favicon.png',
+    },
+  },
 };