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

<template>
  <CreateMessageDeliveryOption :label :method v-model="model" @change="handleSelection()" />

  <!-- Ошибка разрешений -->
  <p v-if="permissionError && model === method" class="text-red-500 mb-2">
    Не удалось получить разрешение на отправку уведомлений.<br />
    <button @click="retryPushSubscription" 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 { ref } from 'vue'

import { 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']>()

// Локальное состояние для уведомлений и ошибок
const permissionError = ref(false)

// Обработчик выбора
async function handleSelection() {
  permissionError.value = false
  const permission = await requestNotificationPermission()
  if (permission) {
    emit('change')
  } else {
    permissionError.value = true
  }
}

// Функция запроса разрешений и подписки
async function requestNotificationPermission(): Promise<boolean> {
  if (!('Notification' in window)) {
    console.error('Уведомления не поддерживаются этим браузером.')
    return false
  }

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

    const registration = await navigator.serviceWorker.ready
    const subscription = await registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey:
        'BMPwpR1Q24ZOFxy2T9M-I-Y6F6bucsHFVZKP8QYslgD_4hGCDv16qnZnji-ldngcZ_vBWVBwJ6OIfknVBnCxLsY',
    })

    await saveWebPushSubscription(subscription)
    return true
  } catch (err) {
    console.error('Ошибка при создании Push-подписки:', err)
    return false
  }
}

// Повторный запрос разрешений
function retryPushSubscription() {
  permissionError.value = false
  handleSelection()
}
</script>