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/auto-imports.d.ts
Vendored
+83
View File
@@ -0,0 +1,83 @@
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
// biome-ignore lint: disable
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']
const customRef: typeof import('vue')['customRef']
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
const defineComponent: typeof import('vue')['defineComponent']
const effectScope: typeof import('vue')['effectScope']
const getActiveHead: typeof import('unhead')['getActiveHead']
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
const getCurrentScope: typeof import('vue')['getCurrentScope']
const h: typeof import('vue')['h']
const inject: typeof import('vue')['inject']
const isProxy: typeof import('vue')['isProxy']
const isReactive: typeof import('vue')['isReactive']
const isReadonly: typeof import('vue')['isReadonly']
const isRef: typeof import('vue')['isRef']
const markRaw: typeof import('vue')['markRaw']
const nextTick: typeof import('vue')['nextTick']
const onActivated: typeof import('vue')['onActivated']
const onBeforeMount: typeof import('vue')['onBeforeMount']
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
const onDeactivated: typeof import('vue')['onDeactivated']
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
const onMounted: typeof import('vue')['onMounted']
const onRenderTracked: typeof import('vue')['onRenderTracked']
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
const onScopeDispose: typeof import('vue')['onScopeDispose']
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
const onUnmounted: typeof import('vue')['onUnmounted']
const onUpdated: typeof import('vue')['onUpdated']
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
const provide: typeof import('vue')['provide']
const reactive: typeof import('vue')['reactive']
const readonly: typeof import('vue')['readonly']
const ref: typeof import('vue')['ref']
const resolveComponent: typeof import('vue')['resolveComponent']
const shallowReactive: typeof import('vue')['shallowReactive']
const shallowReadonly: typeof import('vue')['shallowReadonly']
const shallowRef: typeof import('vue')['shallowRef']
const toRaw: typeof import('vue')['toRaw']
const toRef: typeof import('vue')['toRef']
const toRefs: typeof import('vue')['toRefs']
const toValue: typeof import('vue')['toValue']
const triggerRef: typeof import('vue')['triggerRef']
const unref: typeof import('vue')['unref']
const useAttrs: typeof import('vue')['useAttrs']
const useCssModule: typeof import('vue')['useCssModule']
const useCssVars: typeof import('vue')['useCssVars']
const useHead: typeof import('unhead')['useHead']
const useHeadSafe: typeof import('unhead')['useHeadSafe']
const useId: typeof import('vue')['useId']
const useLink: typeof import('vue-router')['useLink']
const useModel: typeof import('vue')['useModel']
const useRoute: typeof import('vue-router')['useRoute']
const useRouter: typeof import('vue-router')['useRouter']
const useSeoMeta: typeof import('unhead')['useSeoMeta']
const useServerHead: typeof import('unhead')['useServerHead']
const useServerHeadSafe: typeof import('unhead')['useServerHeadSafe']
const useServerSeoMeta: typeof import('unhead')['useServerSeoMeta']
const useSlots: typeof import('vue')['useSlots']
const useTemplateRef: typeof import('vue')['useTemplateRef']
const watch: typeof import('vue')['watch']
const watchEffect: typeof import('vue')['watchEffect']
const watchPostEffect: typeof import('vue')['watchPostEffect']
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
}
// for type re-export
declare global {
// @ts-ignore
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
import('vue')
}
apps/frontend/components.d.ts
Vendored
+1
View File
@@ -10,6 +10,7 @@ declare module 'vue' {
Button: typeof import('primevue/button')['default']
Card: typeof import('primevue/card')['default']
ChatComponent: typeof import('./src/components/ChatComponent.vue')['default']
ChatSubscribeWebPush: typeof import('./src/components/ChatSubscribeWebPush.vue')['default']
Checkbox: typeof import('primevue/checkbox')['default']
CreateActionsSection: typeof import('./src/components/create/CreateActionsSection.vue')['default']
CreateMessageDeliveryMethodSection: typeof import('./src/components/create/CreateMessageDeliveryMethodSection.vue')['default']
apps/frontend/package.json
+3
View File
@@ -21,6 +21,7 @@
"@primevue/forms": "^4.2.1",
"@primevue/themes": "^4.2.1",
"@tanstack/vue-query": "^5.60.6",
"@unhead/vue": "^1.11.13",
"events": "^3.3.0",
"md5": "^2.3.0",
"pinia": "^2.2.6",
@@ -33,6 +34,7 @@
"svgo": "^3.3.2",
"tailwind-scrollbar": "^3.1.0",
"tailwindcss-primeui": "^0.3.4",
"unhead": "^1.11.13",
"vue": "^3.5.12",
"vue-query": "^1.26.0",
"vue-router": "^4.4.5"
@@ -62,6 +64,7 @@
"prettier": "^3.3.3",
"tailwindcss": "^3.4.14",
"typescript": "~5.6.3",
"unplugin-auto-import": "^0.18.6",
"unplugin-vue-components": "^0.27.4",
"vite": "^5.4.10",
"vite-plugin-vue-devtools": "^7.5.4",
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: {
apps/frontend/tsconfig.app.json
+1 -1
View File
@@ -2,7 +2,7 @@
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["./components.d.ts", "env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"files": ["./components.d.ts"],
"files": ["./components.d.ts", "./auto-imports.d.ts"],
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
apps/frontend/vite.config.ts
+5
View File
@@ -5,11 +5,16 @@ import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import Components from 'unplugin-vue-components/vite'
import { PrimeVueResolver } from '@primevue/auto-import-resolver'
import AutoImport from 'unplugin-auto-import/vite'
import { unheadComposablesImports } from 'unhead'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ['vue', 'vue-router', unheadComposablesImports[0]],
}),
Components({
resolvers: [PrimeVueResolver()],
}),