fix: multiple push notifications susbscriptions on multiple account servers (#1069)

components/notification/NotificationPreferences.client.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { PushSubscriptionError } from '~/composables/push-notifications/types'
+
 defineProps<{ show?: boolean }>()
 
 const {
@@ -76,8 +78,13 @@ const doSubscribe = async () => {
     }
   }
   catch (err) {
-    console.error(err)
+    if (err instanceof PushSubscriptionError) {
-    subscribeError = t('settings.notifications.push_notifications.subscription_error.request_error')
+      subscribeError = t(`settings.notifications.push_notifications.subscription_error.${err.code}`)
+    }
+    else {
+      console.error(err)
+      subscribeError = t('settings.notifications.push_notifications.subscription_error.request_error')
+    }
     showSubscribeError = true
   }
   finally {

composables/push-notifications/createPushSubscription.ts

@@ -4,6 +4,7 @@ import type {
   PushManagerSubscriptionInfo,
   RequiredUserLogin,
 } from '~/composables/push-notifications/types'
+import { PushSubscriptionError } from '~/composables/push-notifications/types'
 
 export const createPushSubscription = async (
   user: RequiredUserLogin,
@@ -41,8 +42,11 @@ export const createPushSubscription = async (
       )
     })
     .catch((error) => {
-      if (error.code === 20 && error.name === 'AbortError')
+      let useError: PushSubscriptionError | Error = error
-        console.warn('Your browser supports Web Push Notifications, but does not seem to implement the VAPID protocol.')
+      if (error.code === 11 && error.name === 'InvalidStateError')
+        useError = new PushSubscriptionError('too_many_registrations', 'Too many registrations')
+      else if (error.code === 20 && error.name === 'AbortError')
+        console.error('Your browser supports Web Push Notifications, but does not seem to implement the VAPID protocol.')
       else if (error.code === 5 && error.name === 'InvalidCharacterError')
         console.error('The VAPID public key seems to be invalid:', vapidKey)
 
@@ -54,6 +58,9 @@ export const createPushSubscription = async (
           console.error(e)
           return Promise.resolve(undefined)
         })
+        .finally(() => {
+          return Promise.reject(useError)
+        })
     })
 }
 

composables/push-notifications/types.ts

@@ -24,3 +24,12 @@ export interface CustomEmojisInfo {
   lastUpdate: number
   emojis: mastodon.v1.CustomEmoji[]
 }
+
+export type PushSubscriptionErrorCode = 'too_many_registrations'
+export class PushSubscriptionError extends Error {
+  code: PushSubscriptionErrorCode
+  constructor(code: PushSubscriptionErrorCode, message?: string) {
+    super(message)
+    this.code = code
+  }
+}

locales/en-GB.json

@@ -238,7 +238,8 @@
           "clear_error": "Clear error",
           "permission_denied": "Permission denied: enable notifications in your browser.",
           "request_error": "An error occurred while requesting the subscription, try again and if the error persists, please report the issue to the Elk repository.",
-          "title": "Could not subscribe to push notifications"
+          "title": "Could not subscribe to push notifications",
+          "too_many_registrations": "Due to browser limitations, Elk cannot use the push notifications service for multiple accounts on different servers. You should unsubscribe from push notifications on another accounts and try again."
         },
         "undo_settings": "Undo changes",
         "unsubscribe": "Disable push notifications",

locales/en-US.json

@@ -302,7 +302,8 @@
           "clear_error": "Clear error",
           "permission_denied": "Permission denied: enable notifications in your browser.",
           "request_error": "An error occurred while requesting the subscription, try again and if the error persists, please report the issue to the Elk repository.",
-          "title": "Could not subscribe to push notifications"
+          "title": "Could not subscribe to push notifications",
+          "too_many_registrations": "Due to browser limitations, Elk cannot use the push notifications service for multiple accounts on different servers. You should unsubscribe from push notifications on another accounts and try again."
         },
         "title": "Push notifications settings",
         "undo_settings": "Undo changes",

locales/es-ES.json

@@ -294,7 +294,8 @@
           "clear_error": "Limpiar error",
           "permission_denied": "Permiso denegado: habilita las notificaciones en tu navegador.",
           "request_error": "Se produjo un error al solicitar la suscripción, inténtalo de nuevo y si el error persiste, notifica la incidencia en el repositorio de Elk.",
-          "title": "No se pudo suscribir a las notificaciones push"
+          "title": "No se pudo suscribir a las notificaciones push",
+          "too_many_registrations": "Debido a las limitaciones del navegador, Elk no puede habilitar las notificaciones push para múltiples cuentas en diferentes servidores. Deberá cancelar las subscripciones a notificaciones push en las otras cuentas e intentarlo de nuevo."
         },
         "title": "Ajustes de notificaciones push",
         "undo_settings": "Deshacer cambios",