ti/hereconnect
1
0
Fork 0
Code Issues 26 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

add guest subscribe push notification

Browse Source
This commit is contained in:
Vasilii Mikhailovskii
2024-12-02 08:50:25 +02:00
parent 2ae13f6ec4
commit 1231dc26ce
20 changed files with 742 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/api/dbs.ts
+13 -6
View File
@@ -5,6 +5,7 @@ import type {
MessageDocument,
WebPushSubscriptionDocument,
PublicSettingsDocument,
UserChatSettingsDocument,
} from '@hereconnect/types'
export const qrCodeDbRemote = new PouchDB<QRCodeDocument>(`${import.meta.env.VITE_API_URL}/qr`, {
@@ -15,12 +16,11 @@ export const qrCodeDbLocal = new PouchDB<QRCodeDocument>('qr')
export const messagesDbLocal = new PouchDB<MessageDocument>('messages')
export const webPushSubscriptionsDbRemote = new PouchDB<WebPushSubscriptionDocument>(
`${import.meta.env.VITE_API_URL}/web_push_subscriptions`,
{
skip_setup: true,
},
)
export const webPushSubscriptionsDbRemote = new PouchDB<
WebPushSubscriptionDocument<PushSubscriptionJSON>
>(`${import.meta.env.VITE_API_URL}/web_push_subscriptions`, {
skip_setup: true,
})
export const publicSettingsDbRemote = new PouchDB<PublicSettingsDocument>(
`${import.meta.env.VITE_API_URL}/public_settings`,
@@ -35,3 +35,10 @@ export const messagesDbRemote = new PouchDB<MessageDocument>(
skip_setup: true,
},
)
export const userChatSettingsDbRemote = new PouchDB<UserChatSettingsDocument>(
`${import.meta.env.VITE_API_URL}/user_chat_settings`,
{
skip_setup: true,
},
)
apps/frontend/src/api/userChatSettings.ts
+64
View File
@@ -0,0 +1,64 @@
import { getUserUuid } from '@/utils/getUserUuid'
import { getBrowserUuid } from '@/utils/getBrowserUuid'
import { userChatSettingsDbRemote } from '@/api/dbs'
import type { UserChatSettingsDocument } from '@hereconnect/types'
export const getUserChatSettingsDocument = ({
chat,
qr_code_uri,
user_chat_role,
}: {
chat: string
qr_code_uri: string
user_chat_role: UserChatSettingsDocument['user_chat_role']
}) => {
return userChatSettingsDbRemote.get(
`user_chat_settings:${qr_code_uri}:${chat}:${user_chat_role}:${getUserUuid()}`,
)
}
export const saveUserChatSettings = async ({
chat,
qr_code_uri,
user_chat_role,
is_push_notification_enabled,
}: {
chat: string
qr_code_uri: string
user_chat_role: UserChatSettingsDocument['user_chat_role']
is_push_notification_enabled: boolean
}) => {
try {
const user_uuid = getUserUuid()
const browser_uuid = getBrowserUuid()
const _id = `user_chat_settings:${qr_code_uri}:${chat}:${user_chat_role}:${user_uuid}`
const result = await userChatSettingsDbRemote.upsert(
_id,
(doc): UserChatSettingsDocument | false => {
const isNotChanged = doc.is_push_notification_enabled === is_push_notification_enabled
if (isNotChanged) {
return false
}
const updated_at = new Date().toISOString()
return Object.assign(doc, {
_id,
type: 'user_chat_settings',
qr_code_uri,
browser_uuid,
user_uuid,
user_chat_role,
chat,
is_push_notification_enabled,
created_at: doc.created_at ?? updated_at,
updated_at,
} satisfies UserChatSettingsDocument)
},
)
console.log('Настройки успешно сохранены', result)
} catch (error) {
console.error('Ошибка сохранения настроек:', error)
throw error
}
}
apps/frontend/src/api/webPush.ts
+11 -2
View File
@@ -3,13 +3,21 @@ import { publicSettingsDbRemote, webPushSubscriptionsDbRemote } from '@/api/dbs'
import { getUserUuid } from '@/utils/getUserUuid'
import { getBrowserUuid } from '@/utils/getBrowserUuid'
export const getWebPushSubscriptionDocument = async () => {
const type = 'web_push_subscription'
const user_uuid = getUserUuid()
const browser_uuid = getBrowserUuid()
const _id = `${type}:${user_uuid}:${browser_uuid}`
return webPushSubscriptionsDbRemote.get(_id)
}
export const saveWebPushSubscription = async (subscription: PushSubscription) => {
const type = 'web_push_subscription'
const user_uuid = getUserUuid()
const browser_uuid = getBrowserUuid()
const _id = `${type}:${user_uuid}:${browser_uuid}`
const created_at = new Date().toISOString()
const webPushSubscriptionDoc: WebPushSubscriptionDocument = {
const webPushSubscriptionDoc: WebPushSubscriptionDocument<PushSubscriptionJSON> = {
_id,
type,
user_uuid,
@@ -20,7 +28,7 @@ export const saveWebPushSubscription = async (subscription: PushSubscription) =>
try {
const { rev } = await webPushSubscriptionsDbRemote.upsert(
_id,
(doc): WebPushSubscriptionDocument | false => {
(doc): WebPushSubscriptionDocument<PushSubscriptionJSON> | false => {
webPushSubscriptionDoc._rev = doc._rev
const isNotChanged =
JSON.stringify(webPushSubscriptionDoc.subscription) === JSON.stringify(doc.subscription)
@@ -37,6 +45,7 @@ export const saveWebPushSubscription = async (subscription: PushSubscription) =>
return webPushSubscriptionDoc
} catch (error) {
console.error('Ошибка сохранения подписки:', error)
throw error
}
}
apps/frontend/src/components/ChatComponent.vue
+19 -10
View File
@@ -24,16 +24,25 @@
<slot name="endOfMessages" :count="messages.length"></slot>
</div>
<!-- Форма отправки сообщений -->
<form @submit.prevent="sendMessage" class="flex gap-2 items-center p-4" ref="form">
<InputText
id="newMessage"
v-model="newMessage"
class="flex-1"
placeholder="Напишите сообщение"
/>
<Button type="submit" icon="pi pi-send" class="p-button-md" :disabled="!newMessage.trim()" />
</form>
<div class="flex gap-3 p-4 pt-0 flex-col-reverse">
<!-- Форма отправки сообщений -->
<form @submit.prevent="sendMessage" class="flex gap-2 items-center" ref="form">
<InputText
id="newMessage"
v-model="newMessage"
class="flex-1"
placeholder="Напишите сообщение"
/>
<Button
type="submit"
icon="pi pi-send"
class="p-button-md"
:disabled="!newMessage.trim()"
/>
</form>
<ChatSubscribeWebPush :qr_code_uri :chat :user_chat_role="userRole" />
</div>
</div>
</template>
apps/frontend/src/components/ChatSubscribeWebPush.vue
+226
View File
@@ -0,0 +1,226 @@
<template>
<div class="text-sm">
<div class="flex items-center gap-2">
<div v-if="isPending" class="w-5 h-5">
<ProgressSpinner style="width: 100%; height: 100%" strokeWidth="8" fill="transparent" />
</div>
<Checkbox v-else v-model="enabled" inputId="webPush" name="delivery" binary />
<label for="webPush">Показать уведомление, когда придет ответ</label>
</div>
<!-- Инструкции для iOS -->
<div
v-if="showRequireStandaloneInstructionsForIOS"
class="bg-yellow-100 text-yellow-800 p-4 rounded my-4"
>
<p class="mb-2">Чтобы включить уведомления, добавьте это приложение на главный экран:</p>
<ul class="list-disc pl-5">
<li class="mb-1">
Нажмите
<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">
Выберите
<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>Откройте приложение с главного экрана и повторите попытку.</li>
</ul>
</div>
<!-- Ошибка разрешений -->
<p v-else-if="isError" class="text-red-500 mb-2">{{ error?.message || error }}<br /></p>
</div>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useMutation } from '@tanstack/vue-query'
import {
getVapidPublicKey,
getWebPushSubscriptionDocument,
saveWebPushSubscription,
} from '@/api/webPush'
import { getUserChatSettingsDocument } from '@/api/userChatSettings'
import type { UserChatSettingsDocument } from '@hereconnect/types'
import { isNotFoundError } from '@/api/PouchDB'
import { saveUserChatSettings } from '@/api/userChatSettings'
// Проверки 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)
const { qr_code_uri, chat, user_chat_role } = defineProps<{
qr_code_uri: UserChatSettingsDocument['qr_code_uri']
chat: UserChatSettingsDocument['chat']
user_chat_role: UserChatSettingsDocument['user_chat_role']
}>()
const enabled = ref<boolean>(false)
const subscribeOptionsPromise = getVapidPublicKey().then((applicationServerKey) => ({
userVisibleOnly: true,
applicationServerKey,
}))
// Функция запроса разрешений и подписки
async function requestNotificationPermission() {
if (!('Notification' in window)) {
throw new Error(
isIOS.value && !isStandalone.value
? 'Добавьте приложение на главный экран, чтобы использовать уведомления.'
: 'Уведомления не поддерживаются этим браузером.',
)
}
const permission = await Notification.requestPermission()
if (permission !== 'granted') {
throw new Error(`Разрешение на уведомления не предоставлено: ${permission}`)
}
const registration = await navigator.serviceWorker.ready
let subscription: PushSubscription | null = null
try {
subscription = await registration.pushManager.subscribe(await subscribeOptionsPromise)
} catch (error) {
subscription = await registration.pushManager.getSubscription()
if (!subscription) {
throw error
}
await subscription.unsubscribe()
subscription = await registration.pushManager.subscribe(await subscribeOptionsPromise)
}
return saveWebPushSubscription(subscription)
}
const getPushSubscription = async () => {
try {
if ('serviceWorker' in navigator && 'PushManager' in window) {
const registration = await navigator.serviceWorker.ready
const permission = await registration.pushManager.permissionState(
await subscribeOptionsPromise,
)
console.debug('permission', permission)
if (permission === 'prompt') {
return
}
if (permission !== 'granted') {
throw new Error(`Разрешение на уведомления не предоставлено: ${permission}`)
}
const subscription = await registration.pushManager.getSubscription()
if (subscription) {
console.debug('Уже есть активная подписка:', subscription)
return subscription
} else {
console.debug('Нет активной подписки на Push-уведомления.')
}
} else {
console.warn('Push уведомления или Service Worker не поддерживаются в этом браузере.')
}
} catch (error) {
console.error('Произошла ошибка при получении подписки:', error)
throw error
}
}
const stage = ref<'receivePushSubscription' | 'createPushSubscription' | 'removePushSubscription'>(
'receivePushSubscription',
)
// Хуки для состояния запроса
const { isPending, isError, error, mutate } = useMutation({
mutationKey: [stage],
mutationFn: async () => {
console.debug(stage.value)
try {
if (stage.value === 'receivePushSubscription') {
const chatSettingsDocument = await getUserChatSettingsDocument({
qr_code_uri,
chat,
user_chat_role,
}).catch((error) => {
if (!isNotFoundError(error)) throw error
})
if (chatSettingsDocument && chatSettingsDocument.is_push_notification_enabled) {
const [subscription, subscriptionDocument] = await Promise.all([
getPushSubscription(),
getWebPushSubscriptionDocument().catch((error) => {
if (!isNotFoundError(error)) throw error
}),
])
if (subscription) {
if (!subscriptionDocument) {
await saveWebPushSubscription(subscription)
}
enabled.value = true
stage.value = 'removePushSubscription'
} else {
stage.value = 'createPushSubscription'
enabled.value = false
}
} else {
stage.value = 'createPushSubscription'
}
} else if (stage.value === 'createPushSubscription') {
await requestNotificationPermission()
await saveUserChatSettings({
qr_code_uri,
chat,
user_chat_role,
is_push_notification_enabled: true,
})
} else if (stage.value === 'removePushSubscription') {
await saveUserChatSettings({
qr_code_uri,
chat,
user_chat_role,
is_push_notification_enabled: false,
})
}
} catch (error) {
enabled.value = false
throw error
}
return null
},
retry: false,
})
watch(
[() => stage.value, () => enabled.value],
() => {
if (stage.value === 'removePushSubscription') {
if (!enabled.value) mutate()
} else if (stage.value === 'createPushSubscription') {
if (enabled.value) mutate()
} else {
mutate()
}
},
{ immediate: true },
)
const showRequireStandaloneInstructionsForIOS = computed(
() => isError.value && isIOS.value && !isStandalone.value && enabled.value,
)
</script>
apps/frontend/src/main.ts
+6 -2
View File
@@ -1,6 +1,7 @@
import { createApp } from 'vue'
import { createHead } from '@unhead/vue'
import { VueQueryPlugin, type VueQueryPluginOptions } from '@tanstack/vue-query'
import { createPinia } from 'pinia'
// import { createPinia } from 'pinia'
import PouchDB from '@/api/PouchDB'
import PrimeVue from 'primevue/config'
@@ -39,14 +40,17 @@ const vueQueryPluginOptions: VueQueryPluginOptions = {
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retryOnMount: false,
retry: false,
},
},
},
}
const head = createHead()
app.use(head)
app.use(VueQueryPlugin, vueQueryPluginOptions)
app.use(createPinia())
// app.use(createPinia())
app.use(router)
app.use(PrimeVue, {
theme: {