134 lines
4.7 KiB
Vue
134 lines
4.7 KiB
Vue
<template>
|
|
<CreateMessageDeliveryOption :isLoading :label :method v-model="model" />
|
|
|
|
<!-- Инструкции для iOS -->
|
|
<div
|
|
v-if="showRequireStandaloneInstructionsForIOS"
|
|
class="bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-300 p-4 rounded my-4"
|
|
>
|
|
<p class="mb-2 dark:text-yellow-200">
|
|
Чтобы включить уведомления, добавьте это приложение на главный экран:
|
|
</p>
|
|
<ul class="list-disc pl-5">
|
|
<li class="mb-1 dark:text-yellow-200">
|
|
Нажмите
|
|
<strong class="font-semibold">
|
|
"<img
|
|
src="@/assets/icons/apple-share.svg?url"
|
|
alt="Поделиться"
|
|
class="h-7 -mt-2 inline-block"
|
|
/>"
|
|
</strong>
|
|
внизу экрана
|
|
</li>
|
|
<li class="mb-1 dark:text-yellow-200">
|
|
Выберите
|
|
<strong class="inline-flex items-baseline font-semibold">
|
|
<span class="me-1">"На экран «Домой»</span>
|
|
<img
|
|
src="@/assets/icons/apple-system-plus.svg?url"
|
|
alt=""
|
|
class="h-4 inline-block self-center"
|
|
/>"
|
|
</strong>
|
|
</li>
|
|
<li class="dark:text-yellow-200">
|
|
Откройте приложение с главного экрана и повторите попытку.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Ошибка разрешений -->
|
|
<p v-else-if="isError && model === method" class="text-red-500 dark:text-red-400 mb-2">
|
|
{{ error }}.<br />
|
|
<button @click="retry()" class="text-blue-500 dark:text-blue-400 underline">Повторить</button>
|
|
</p>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { type QRCodeDocument } from '@hereconnect/types'
|
|
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'
|
|
|
|
// Проверки iOS и запуска из главного экрана
|
|
const isIOS = computed(
|
|
() => /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window && window.MSStream),
|
|
)
|
|
const isStandalone = computed(() => 'standalone' in window.navigator && window.navigator.standalone)
|
|
|
|
// Пропсы
|
|
type DeliveryOptionWebPush = Extract<DeliveryOption, { method: typeof DELIVERY_METHOD_WEB_PUSH }>
|
|
const props = 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(
|
|
isIOS.value && !isStandalone.value
|
|
? 'Добавьте приложение на главный экран, чтобы использовать уведомления.'
|
|
: 'Уведомления не поддерживаются этим браузером.',
|
|
)
|
|
}
|
|
|
|
try {
|
|
const subscribeOptionsPromise = getVapidPublicKey().then((applicationServerKey) => ({
|
|
userVisibleOnly: true,
|
|
applicationServerKey,
|
|
}))
|
|
|
|
const permission = await Notification.requestPermission()
|
|
if (permission !== 'granted') {
|
|
throw new Error('Разрешение на уведомления не предоставлено.')
|
|
}
|
|
|
|
const registration = await navigator.serviceWorker.ready
|
|
|
|
const subscription = await registration.pushManager
|
|
.subscribe(await subscribeOptionsPromise)
|
|
.catch(async (error) => {
|
|
const oldSubscription = await registration.pushManager.getSubscription()
|
|
if (!oldSubscription) {
|
|
throw error
|
|
}
|
|
await oldSubscription.unsubscribe()
|
|
return registration.pushManager.subscribe(await subscribeOptionsPromise)
|
|
})
|
|
|
|
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,
|
|
})
|
|
|
|
const showRequireStandaloneInstructionsForIOS = computed(
|
|
() => isError.value && isIOS.value && !isStandalone.value && model.value === props.method,
|
|
)
|
|
</script>
|