101 lines
3.6 KiB
Vue
101 lines
3.6 KiB
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'
|
||
|
|
|
||
|
|
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',
|
||
|
|
})
|
||
|
|
|
||
|
|
console.log('Push-подписка создана:', subscription)
|
||
|
|
console.log(JSON.stringify(subscription))
|
||
|
|
// subscription = {
|
||
|
|
// endpoint:
|
||
|
|
// 'https://jmt17.google.com/fcm/send/eFYnP7qxt8A:APA91bHYGItzGpnzhXkfKzgMhAXgwcQXaLuRLqq9mt9RPS0VgGpEvVASxW8AF_fJmtSBtK-po0V3mM7fGWSN6tMCrImZqgZG14kGv0chQoghOLuWgHTUQYtQEqhd6f89eVonJdtjAlDN',
|
||
|
|
// expirationTime: null,
|
||
|
|
// keys: {
|
||
|
|
// p256dh:
|
||
|
|
// 'BAIGLAQ5cZg6e8psnK6vy_MJ1kUJbs2Tymjc38-_6zM1VQXWP2Yj-604uPMye4smHosNKmBEPRDJJOH6Wxr1MLQ',
|
||
|
|
// auth: '1k48wvT0U3pK_xaXW95Ekw',
|
||
|
|
// },
|
||
|
|
// }
|
||
|
|
// subscription = {
|
||
|
|
// endpoint:
|
||
|
|
// 'https://jmt17.google.com/fcm/send/eFYnP7qxt8A:APA91bHYGItzGpnzhXkfKzgMhAXgwcQXaLuRLqq9mt9RPS0VgGpEvVASxW8AF_fJmtSBtK-po0V3mM7fGWSN6tMCrImZqgZG14kGv0chQoghOLuWgHTUQYtQEqhd6f89eVonJdtjAlDN',
|
||
|
|
// expirationTime: null,
|
||
|
|
// keys: {
|
||
|
|
// p256dh:
|
||
|
|
// 'BAIGLAQ5cZg6e8psnK6vy_MJ1kUJbs2Tymjc38-_6zM1VQXWP2Yj-604uPMye4smHosNKmBEPRDJJOH6Wxr1MLQ',
|
||
|
|
// auth: '1k48wvT0U3pK_xaXW95Ekw',
|
||
|
|
// },
|
||
|
|
// }
|
||
|
|
|
||
|
|
// Здесь вы можете сохранить подписку на сервере
|
||
|
|
return true
|
||
|
|
} catch (err) {
|
||
|
|
console.error('Ошибка при создании Push-подписки:', err)
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Повторный запрос разрешений
|
||
|
|
function retryPushSubscription() {
|
||
|
|
permissionError.value = false
|
||
|
|
handleSelection()
|
||
|
|
}
|
||
|
|
</script>
|