add checkbox to disable web push

build/webpack.base.conf.js

@@ -2,6 +2,7 @@ var path = require('path')
 var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
+var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
 
 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@@ -91,5 +92,10 @@ module.exports = {
         browsers: ['last 2 versions']
       })
     ]
-  }
+  },
+  plugins: [
+    new ServiceWorkerWebpackPlugin({
+      entry: path.join(__dirname, '..', 'src/sw.js')
+    })
+  ]
 }

package.json

@@ -88,6 +88,7 @@
     "raw-loader": "^0.5.1",
     "selenium-server": "2.53.1",
     "semver": "^5.3.0",
+    "serviceworker-webpack-plugin": "0.2.3",
     "shelljs": "^0.7.4",
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",

src/components/settings/settings.js

@@ -45,6 +45,7 @@ const settings = {
       scopeCopyLocal: user.scopeCopy,
       scopeCopyDefault: this.$t('settings.values.' + instance.scopeCopy),
       stopGifs: user.stopGifs,
+      webPushNotificationsLocal: user.webPushNotifications,
       loopSilentAvailable:
         // Firefox
         Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
@@ -134,6 +135,10 @@ const settings = {
     },
     stopGifs (value) {
       this.$store.dispatch('setOption', { name: 'stopGifs', value })
+    },
+    webPushNotificationsLocal (value) {
+      this.$store.dispatch('setOption', { name: 'webPushNotifications', value })
+      if (value) this.$store.dispatch('registerPushNotifications')
     }
   }
 }

src/components/settings/settings.vue

@@ -128,6 +128,18 @@
             </li>
           </ul>
         </div>
+
+       <div class="setting-item">
+          <h2>{{$t('settings.notifications')}}</h2>
+          <ul class="setting-list">
+            <li>
+              <input type="checkbox" id="webPushNotifications" v-model="webPushNotificationsLocal">
+              <label for="webPushNotifications">
+                {{$t('settings.enable_web_push_notifications')}}
+              </label>
+            </li>
+          </ul>
+        </div>
       </div>
 
       <div :label="$t('settings.theme')" >

src/i18n/en.json

@@ -175,7 +175,9 @@
     "values": {
       "false": "no",
       "true": "yes"
-    }
+    },
+    "notifications": "Notifications",
+    "enable_web_push_notifications": "Enable web push notifications"
   },
   "timeline": {
     "collapse": "Collapse",

src/services/push/push.js

@@ -1,3 +1,5 @@
+import runtime from 'serviceworker-webpack-plugin/lib/runtime'
+
 function urlBase64ToUint8Array (base64String) {
   const padding = '='.repeat((4 - base64String.length % 4) % 4)
   const base64 = (base64String + padding)
@@ -13,7 +15,7 @@ function isPushSupported () {
 }
 
 function registerServiceWorker () {
-  return navigator.serviceWorker.register('/static/sw.js')
+  return runtime.register()
     .catch((err) => console.error('Unable to register service worker.', err))
 }
 

src/sw.js

@@ -1,5 +1,12 @@
 /* eslint-env serviceworker */
 
+import localForage from 'localforage'
+
+function isEnabled () {
+  return localForage.getItem('vuex-lz')
+    .then(data => data.config.webPushNotifications)
+}
+
 function getWindowClients () {
   return clients.matchAll({ includeUncontrolled: true })
     .then((clientList) => clientList.filter(({ type }) => type === 'window'))
@@ -7,10 +14,12 @@ function getWindowClients () {
 
 self.addEventListener('push', (event) => {
   if (event.data) {
-    event.waitUntil(getWindowClients().then((list) => {
+    event.waitUntil(isEnabled().then((isEnabled) => {
+      return isEnabled && getWindowClients().then((list) => {
         const data = event.data.json()
 
         if (list.length === 0) return self.registration.showNotification(data.title, data)
+      })
     }))
   }
 })