41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { usePushNotifications } from '@/composables/usePushNotifications.ts'
|
|
|
|
const status = ref<NotificationPermission | 'unsupported'>(
|
|
'Notification' in window ? Notification.permission : 'unsupported',
|
|
)
|
|
const loading = ref(false)
|
|
const push = usePushNotifications()
|
|
|
|
async function onClick() {
|
|
loading.value = true
|
|
try {
|
|
status.value = await push.enable()
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
if (!navigator.permissions) return
|
|
const perm = await navigator.permissions.query({ name: 'notifications' })
|
|
perm.onchange = () => {
|
|
status.value = Notification.permission
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mr-2">
|
|
<span v-if="status === 'granted' && push.installationId.value">Уведомления включены</span>
|
|
<button v-else-if="status === 'default' || status === 'granted'" :disabled="loading" @click="onClick">
|
|
Включить уведомления
|
|
</button>
|
|
<span v-else-if="status === 'denied'">Уведомления заблокированы.</span>
|
|
<span v-else>Браузер не поддерживает уведомления</span>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|