improve web push notifications

src/lib/push_notifications_plugin.js

@@ -0,0 +1,22 @@
+export default (store) => {
+  store.subscribe((mutation, state) => {
+    const vapidPublicKey = state.instance.vapidPublicKey
+    const webPushNotification = state.config.webPushNotifications
+    const permission = state.interface.notificationPermission === 'granted'
+    const user = state.users.currentUser
+
+    const isUserMutation = mutation.type === 'setCurrentUser'
+    const isVapidMutation = mutation.type === 'setInstanceOption' && mutation.payload.name === 'vapidPublicKey'
+    const isPermMutation = mutation.type === 'setNotificationPermission' && mutation.payload === 'granted'
+    const isUserConfigMutation = mutation.type === 'setOption' && mutation.payload.name === 'webPushNotifications'
+    const isVisibilityMutation = mutation.type === 'setOption' && mutation.payload.name === 'notificationVisibility'
+
+    if (isUserMutation || isVapidMutation || isPermMutation || isUserConfigMutation || isVisibilityMutation) {
+      if (user && vapidPublicKey && permission && webPushNotification) {
+        return store.dispatch('registerPushNotifications')
+      } else if (isUserConfigMutation && !webPushNotification) {
+        return store.dispatch('unregisterPushNotifications')
+      }
+    }
+  })
+}

src/main.js

@@ -15,6 +15,7 @@ import VueTimeago from 'vue-timeago'
 import VueI18n from 'vue-i18n'
 
 import createPersistedState from './lib/persisted_state.js'
+import pushNotifications from './lib/push_notifications_plugin.js'
 
 import messages from './i18n/messages.js'
 
@@ -51,28 +52,6 @@ const persistedStateOptions = {
   ]
 }
 
-const registerPushNotifications = store => {
-  store.subscribe((mutation, state) => {
-    const vapidPublicKey = state.instance.vapidPublicKey
-    const webPushNotification = state.config.webPushNotifications
-    const permission = state.interface.notificationPermission === 'granted'
-    const user = state.users.currentUser
-
-    const isUserMutation = mutation.type === 'setCurrentUser'
-    const isVapidMutation = mutation.type === 'setInstanceOption' && mutation.payload.name === 'vapidPublicKey'
-    const isPermMutation = mutation.type === 'setNotificationPermission' && mutation.payload === 'granted'
-    const isUserConfigMutation = mutation.type === 'setOption' && mutation.payload.name === 'webPushNotifications'
-
-    if (isUserMutation || isVapidMutation || isPermMutation || isUserConfigMutation) {
-      if (user && vapidPublicKey && permission && webPushNotification) {
-        return store.dispatch('registerPushNotifications')
-      } else if (isUserConfigMutation && !webPushNotification) {
-        return store.dispatch('unregisterPushNotifications')
-      }
-    }
-  })
-}
-
 createPersistedState(persistedStateOptions).then((persistedState) => {
   const store = new Vuex.Store({
     modules: {
@@ -85,7 +64,7 @@ createPersistedState(persistedStateOptions).then((persistedState) => {
       chat: chatModule,
       oauth: oauthModule
     },
-    plugins: [persistedState, registerPushNotifications],
+    plugins: [persistedState, pushNotifications],
     strict: false // Socket modifies itself, let's ignore this for now.
     // strict: process.env.NODE_ENV !== 'production'
   })

src/modules/users.js

@@ -113,8 +113,9 @@ const users = {
       const token = store.state.currentUser.credentials
       const vapidPublicKey = store.rootState.instance.vapidPublicKey
       const isEnabled = store.rootState.config.webPushNotifications
+      const notificationVisibility = store.rootState.config.notificationVisibility
 
-      registerPushNotifications(isEnabled, vapidPublicKey, token)
+      registerPushNotifications(isEnabled, vapidPublicKey, token, notificationVisibility)
     },
     unregisterPushNotifications (store) {
       const token = store.state.currentUser.credentials

src/services/push/push.js

@@ -51,7 +51,7 @@ function deleteSubscriptionFromBackEnd (token) {
   })
 }
 
-function sendSubscriptionToBackEnd (subscription, token) {
+function sendSubscriptionToBackEnd (subscription, token, notificationVisibility) {
   return window.fetch('/api/v1/push/subscription/', {
     method: 'POST',
     headers: {
@@ -62,10 +62,10 @@ function sendSubscriptionToBackEnd (subscription, token) {
       subscription,
       data: {
         alerts: {
-          follow: true,
-          favourite: true,
-          mention: true,
-          reblog: true
+          follow: notificationVisibility.follows,
+          favourite: notificationVisibility.likes,
+          mention: notificationVisibility.mentions,
+          reblog: notificationVisibility.repeats
         }
       }
     })
@@ -78,11 +78,11 @@ function sendSubscriptionToBackEnd (subscription, token) {
   })
 }
 
-export function registerPushNotifications (isEnabled, vapidPublicKey, token) {
+export function registerPushNotifications (isEnabled, vapidPublicKey, token, notificationVisibility) {
   if (isPushSupported()) {
     getOrCreateServiceWorker()
       .then((registration) => subscribePush(registration, isEnabled, vapidPublicKey))
-      .then((subscription) => sendSubscriptionToBackEnd(subscription, token))
+      .then((subscription) => sendSubscriptionToBackEnd(subscription, token, notificationVisibility))
       .catch((e) => console.warn(`Failed to setup Web Push Notifications: ${e.message}`))
   }
 }