NotificationSettings based on permission

okTurtles · Nov 21, 2024 · 63caf86 · 63caf86
1 parent 78c77a7
commit 63caf86
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 12 deletions.
diff --git a/frontend/model/notifications/nativeNotification.js b/frontend/model/notifications/nativeNotification.js
@@ -83,6 +83,7 @@ export function makeNotification ({ title, body, icon, path }: {
   // If not running on a SW
   if (typeof window === 'object') {
     try {
+      // $FlowFixMe[incompatible-type]
       if (navigator.vendor === 'Apple Computer, Inc.') {
         throw new Error('Safari requires a service worker for the notification to be displayed')
       }

diff --git a/frontend/views/containers/user-settings/NotificationSettings.vue b/frontend/views/containers/user-settings/NotificationSettings.vue
@@ -7,12 +7,16 @@
         .c-text-content
           i18n.c-smaller-title(tag='h3') Allow browser notifications
           i18n.c-description(tag='p') Get notifications to find out what's going on when you're not on Group Income. You can turn them off anytime.
+          p
+            i18n.c-description(v-if='!pushNotificationSupported' tag='strong') Your browser doesn't support push notifications
+            i18n.c-description(v-else-if='pushNotificationGranted !== null' tag='strong') Once set, the notification permission can only be adjusted by the browser in the browser settings.
         .switch-wrapper
           input.switch(
             type='checkbox'
             name='switch'
-            :checked='pushNotificationGranted'
-            @change='handleNotificationSettings'
+            :checked='!!pushNotificationGranted'
+            :disabled='pushNotificationGranted !== null'
+            @click.prevent='handleNotificationSettings'
           )
 </template>
 
@@ -28,11 +32,50 @@ export default ({
   name: 'NotificationSettings',
   data () {
     return {
-      pushNotificationGranted: false
+      pushNotificationSupported: false,
+      pushNotificationGranted: null,
+      cancelListener: () => {}
     }
   },
-  mounted () {
-    this.pushNotificationGranted = Notification?.permission === 'granted' && this.notificationEnabled
+  beforeMount () {
+    if (typeof Notification !== 'function' || typeof PushManager !== 'function' || !navigator.serviceWorker) {
+      this.pushNotificationGranted = false
+      return
+    }
+    this.pushNotificationSupported = true
+    const handler = (permissionState) => {
+      if (permissionState === 'granted') {
+        this.pushNotificationGranted = true
+      } else if (permissionState === 'denied') {
+        this.pushNotificationGranted = false
+      } else {
+        this.pushNotificationGranted = null
+      }
+    }
+    const fallback = () => {
+      handler(Notification.permission)
+      const intervalId = setInterval(() => {
+        handler(Notification.permission)
+      }, 100)
+      this.cancelListener = () => clearInterval(intervalId)
+    }
+    if (
+      typeof navigator.permissions === 'object' &&
+      // $FlowFixMe[method-unbinding]
+      typeof navigator.permissions.query === 'function'
+    ) {
+      navigator.permissions.query({ name: 'notifications' }).then((status) => {
+        const listener = () => handler(status.state)
+        listener()
+        status.addEventListener('change', listener, false)
+        this.cancelListener = () => status.removeEventListener('change', listener, false)
+      }, fallback)
+    } else {
+      fallback()
+    }
+  },
+  destroyed () {
+    this.cancelListener()
   },
   computed: {
     notificationEnabled () {
@@ -44,17 +87,19 @@ export default ({
       'setNotificationEnabled'
     ]),
     async handleNotificationSettings (e) {
-      let permission = Notification?.permission
+      if (typeof Notification !== 'function') return
+      let permission = Notification.permission
 
-      if (permission === 'default' && e.target.checked) {
+      if (permission === 'default') {
         permission = await requestNotificationPermission(true)
-      } else if (permission === 'denied') {
+      } else if (permission) {
         alert(L('Sorry, you should reset browser notification permission again.'))
       }
-
-      e.target.checked = this.pushNotificationGranted = e.target.checked && permission === 'granted'
-      this.setNotificationEnabled(this.pushNotificationGranted)
-      if (this.pushNotificationGranted) {
+      const granted = (Notification.permission === 'granted')
+      e.target.checked = granted
+      this.setNotificationEnabled(granted)
+      if (granted) {
+        this.pushNotificationGranted = true
         makeNotification({
           title: L('Congratulations'),
           body: L('You have granted browser notification!')