firebase implementation

src/components/PushEnable.vue

@@ -0,0 +1,40 @@
+<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>