hereconnect/apps/frontend/src/components/create/CreateMessageDeliveryOptionWebPush.vue

<template>
  <CreateMessageDeliveryOption :isLoading :label :method v-model="model" />

  <!-- Ошибка разрешений -->
  <p v-if="isError && model === method" class="text-red-500 mb-2">
    {{ error }}.<br />
    <button @click="retry()" class="text-blue-500 underline">Повторить</button>
  </p>
</template>

<script setup lang="ts">
import { type QRCodeDocument } from '@/types/DBDocumentTypes'
import { type DeliveryOption, DELIVERY_METHOD_WEB_PUSH } from '@/constants/deliveryOptions'
import { computed } from 'vue'
import { useQuery } from '@tanstack/vue-query'

import { getVapidPublicKey, saveWebPushSubscription } from '@/api/webPush'

type DeliveryOptionWebPush = Extract<DeliveryOption, { method: typeof DELIVERY_METHOD_WEB_PUSH }>

defineProps<{
  label: DeliveryOptionWebPush['label']
  method: DeliveryOptionWebPush['method']
}>()

const emit = defineEmits<{
  (e: 'change'): void
}>()

const model = defineModel<null | QRCodeDocument['messageDeliveryMethod']>()

// Функция запроса разрешений и подписки
async function requestNotificationPermission() {
  if (!('Notification' in window)) {
    throw new Error('Уведомления не поддерживаются этим браузером.')
  }

  try {
    const applicationServerKeyPromise = getVapidPublicKey()

    const permission = await Notification.requestPermission()
    if (permission !== 'granted') {
      throw new Error('Разрешение на уведомления не предоставлено.')
    }

    const registration = await navigator.serviceWorker.ready

    const subscription = await registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: await applicationServerKeyPromise,
    })

    const webPushSubscriptionDoc = await saveWebPushSubscription(subscription)
    emit('change')

    return webPushSubscriptionDoc
  } catch (err) {
    throw new Error('Ошибка при создании Push-подписки: ' + (err as Error).message)
  }
}

const {
  isLoading,
  isError,
  error,
  refetch: retry,
} = useQuery({
  enabled: computed(() => model.value === DELIVERY_METHOD_WEB_PUSH),
  queryKey: ['createPushSubscription'],
  queryFn: () => requestNotificationPermission(),
  retry: false,
})
</script>