From d8abea75aab1f2e4a286806b60904f07b97c311f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= Date: Sun, 1 Jan 2023 20:24:22 +0100 Subject: [PATCH] fix: push notification request permission (#677) --- ...ificationEnablePushNotification.client.vue | 8 ++- .../NotificationPreferences.client.vue | 53 ++++++++++++++----- ...ficationSubscribePushNotificationError.vue | 40 ++++++++++++++ composables/push-notifications/types.ts | 2 +- .../push-notifications/usePushManager.ts | 37 ++++++------- locales/en-GB.json | 6 +++ locales/en-US.json | 6 +++ locales/es-ES.json | 6 +++ 8 files changed, 123 insertions(+), 35 deletions(-) create mode 100644 components/notification/NotificationSubscribePushNotificationError.vue diff --git a/components/notification/NotificationEnablePushNotification.client.vue b/components/notification/NotificationEnablePushNotification.client.vue index 88bd781a..4bedd0b9 100644 --- a/components/notification/NotificationEnablePushNotification.client.vue +++ b/components/notification/NotificationEnablePushNotification.client.vue @@ -7,11 +7,16 @@ defineProps<{ }>() defineEmits(['hide', 'subscribe']) + +defineSlots<{ + error: {} +}>() + const isLegacyAccount = computed(() => !currentUser.value?.vapidKey) diff --git a/components/notification/NotificationPreferences.client.vue b/components/notification/NotificationPreferences.client.vue index c8bac6da..c608bc35 100644 --- a/components/notification/NotificationPreferences.client.vue +++ b/components/notification/NotificationPreferences.client.vue @@ -1,10 +1,8 @@ + + diff --git a/composables/push-notifications/types.ts b/composables/push-notifications/types.ts index bd649efb..53cba5a1 100644 --- a/composables/push-notifications/types.ts +++ b/composables/push-notifications/types.ts @@ -2,7 +2,7 @@ import type { Emoji, PushSubscription as MastoPushSubscription, PushSubscription import type { UserLogin } from '~/types' -export type SubscriptionResult = 'subscribed' | 'notification-denied' | 'invalid-state' +export type SubscriptionResult = 'subscribed' | 'notification-denied' | 'not-supported' | 'invalid-vapid-key' | 'no-user' export interface PushManagerSubscriptionInfo { registration: ServiceWorkerRegistration subscription: PushSubscription | null diff --git a/composables/push-notifications/usePushManager.ts b/composables/push-notifications/usePushManager.ts index 32bbafd3..defa87e7 100644 --- a/composables/push-notifications/usePushManager.ts +++ b/composables/push-notifications/usePushManager.ts @@ -59,33 +59,28 @@ export const usePushManager = () => { } }, { immediate: true, flush: 'post' }) - const subscribe = async (notificationData?: CreatePushNotification, policy?: SubscriptionPolicy, force?: boolean): Promise => { - if (!isSupported || !currentUser.value) - return 'invalid-state' + const subscribe = async ( + notificationData?: CreatePushNotification, + policy?: SubscriptionPolicy, + force?: boolean, + ): Promise => { + if (!isSupported) + return 'not-supported' + + if (!currentUser.value) + return 'no-user' const { pushSubscription, server, token, vapidKey, account: { acct } } = currentUser.value if (!token || !server || !vapidKey) - return 'invalid-state' + return 'invalid-vapid-key' - let permission: PermissionState | undefined + // always request permission, browsers should remember user decision + const permission = await Promise.resolve(Notification.requestPermission()).then((p) => { + return p === 'default' ? 'prompt' : p + }) - if (!notificationPermission.value || (notificationPermission.value === 'prompt' && !hiddenNotification.value[acct])) { - // safari 16 does not support navigator.permissions.query for notifications - // try { - // permission = (await navigator.permissions?.query({ name: 'notifications' }))?.state - // } - // catch { - permission = await Promise.resolve(Notification.requestPermission()).then((p: NotificationPermission) => { - return p === 'default' ? 'prompt' : p - }) - // } - } - else { - permission = notificationPermission.value - } - - if (!permission || permission === 'denied') { + if (permission === 'denied') { notificationPermission.value = permission return 'notification-denied' } diff --git a/locales/en-GB.json b/locales/en-GB.json index 6fb81121..79be69d8 100644 --- a/locales/en-GB.json +++ b/locales/en-GB.json @@ -179,6 +179,12 @@ }, "save_settings": "Save settings changes", "show_btn": "Show push notifications settings", + "subscription_error": { + "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": "Push notifications settings", "undo_settings": "Undo settings changes", "unsubscribe": "Disable push notifications", diff --git a/locales/en-US.json b/locales/en-US.json index 10fdb626..3d1f45f2 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -179,6 +179,12 @@ }, "save_settings": "Save settings changes", "show_btn": "Show push notifications settings", + "subscription_error": { + "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": "Push notifications settings", "undo_settings": "Undo settings changes", "unsubscribe": "Disable push notifications", diff --git a/locales/es-ES.json b/locales/es-ES.json index 32dc8e92..d42d53ac 100644 --- a/locales/es-ES.json +++ b/locales/es-ES.json @@ -174,6 +174,12 @@ }, "save_settings": "Guardar cambios", "show_btn": "Mostrar ajustes de las notificaciones push", + "subscription_error": { + "clear_error": "Limpiar error", + "permission_denied": "Permiso denegado: habilite las notificaciones en su navegador.", + "request_error": "Se produjo un error al solicitar la suscripción, inténtalo de nuevo y si el error persiste, notifique la incidencia en el repositorio de Elk.", + "title": "No se pudo suscribir a las notificaciones push" + }, "title": "Ajustes de notificaciones push", "undo_settings": "Deshacer cambios", "unsubscribe": "Cancelar notificaciones push",