feat(pwa): add more errors and elk repo link in push notifications subscription errors (#1610)

components/notification/NotificationPreferences.client.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { PushSubscriptionError } from '~/composables/push-notifications/types'
-
 defineProps<{ show?: boolean }>()
 
 const {

components/notification/NotificationSubscribePushNotificationError.vue

@@ -36,5 +36,11 @@ const { modelValue } = defineModel<{
       </CommonTooltip>
     </head>
     <p>{{ message }}</p>
+    <p py-2>
+      <NuxtLink font-bold text-primary href="https://github.com/elk-zone/elk" target="_blank" flex="~ row" items-center gap-x-2>
+        {{ $t('settings.notifications.push_notifications.subscription_error.repo_link') }}
+        <span inline-block aria-hidden="true" i-ri:external-link-line class="rtl-flip" />
+      </NuxtLink>
+    </p>
   </div>
 </template>

composables/push-notifications/createPushSubscription.ts

@@ -46,9 +46,9 @@ export const createPushSubscription = async (
       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.')
+        useError = new PushSubscriptionError('vapid_not_supported', '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)
+        useError = new PushSubscriptionError('invalid_vapid_key', `The VAPID public key seems to be invalid: ${vapidKey}`)
 
       return getRegistration()
         .then(getPushSubscription)

composables/push-notifications/types.ts

@@ -25,7 +25,8 @@ export interface CustomEmojisInfo {
   emojis: mastodon.v1.CustomEmoji[]
 }
 
-export type PushSubscriptionErrorCode = 'too_many_registrations'
+export type PushSubscriptionErrorCode = 'too_many_registrations' | 'vapid_not_supported' | 'invalid_vapid_key'
+
 export class PushSubscriptionError extends Error {
   code: PushSubscriptionErrorCode
   constructor(code: PushSubscriptionErrorCode, message?: string) {

locales/en.json

@@ -370,10 +370,13 @@
         "save_settings": "Save settings",
         "subscription_error": {
           "clear_error": "Clear error",
+          "invalid_vapid_key": "The VAPID public key seems to be invalid.",
           "permission_denied": "Permission denied: enable notifications in your browser.",
+          "repo_link": "Elk's repository in Github",
           "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",
-          "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 account and try again."
+          "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 account and try again.",
+          "vapid_not_supported": "Your browser supports Web Push Notifications, but does not seem to implement the VAPID protocol."
         },
         "title": "Push notifications settings",
         "undo_settings": "Undo changes",

locales/es.json

@@ -370,10 +370,13 @@
         "save_settings": "Guardar cambios",
         "subscription_error": {
           "clear_error": "Limpiar error",
+          "invalid_vapid_key": "La clave pública VAPID parece no ser válida.",
           "permission_denied": "Permiso denegado: habilita las notificaciones en tu navegador.",
+          "repo_link": "Repositorio de Elk en Github",
           "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",
-          "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."
+          "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.",
+          "vapid_not_supported": "Su navegador es compatible con las notificaciones web push, pero no parece implementar el protocolo VAPID."
         },
         "title": "Ajustes de notificaciones push",
         "undo_settings": "Deshacer cambios",