From 1c8019d41a385dc6030f8016bb15bbf01c790703 Mon Sep 17 00:00:00 2001
From: Vasilii Mikhailovskii <ti.webdev@ya.ru>
Date: Wed, 27 Nov 2024 15:57:11 +0200
Subject: [PATCH] WIP message-delivery-method-web-push

---
 apps/frontend/package.json                    |  1 +
 apps/frontend/src/api/dbs.ts                  |  4 +-
 apps/frontend/src/api/qrCode.ts               |  2 +-
 apps/frontend/src/api/webPush.ts              |  2 +-
 .../frontend/src/components/ChatComponent.vue |  8 +-
 .../CreateMessageDeliveryMethodSection.vue    |  2 +-
 .../create/CreateMessageDeliveryOption.vue    |  2 +-
 .../CreateMessageDeliveryOptionTelegram.vue   |  2 +-
 .../CreateMessageDeliveryOptionWebPush.vue    |  2 +-
 .../create/CreatePlacementSection.vue         |  2 +-
 .../CreatePredefinedMessagesSection.vue       |  2 +-
 .../create/CreateSectionManager.vue           |  2 +-
 .../create/CreateSummarySection.vue           |  2 +-
 .../manage/ManagePlacementInstructions.vue    |  2 +-
 .../src/components/read/ReadContactInfo.vue   |  2 +-
 .../src/components/read/ReadMessageSender.vue |  6 +-
 .../DBDocumentTypes/PublicSettingsDocument.ts | 16 ---
 .../WebPushSubscriptionDocument.ts            | 11 ---
 .../src/types/DBDocumentTypes/index.ts        |  5 -
 apps/frontend/src/views/CreateView.vue        |  2 +-
 .../src/views/ManageQRCodeReadyView.vue       | 98 +++++++++++--------
 apps/frontend/src/views/PublicChatView.vue    |  2 +-
 apps/frontend/src/views/ReadQRCodeView.vue    |  2 +-
 docker-compose.yml                            |  6 ++
 package-lock.json                             | 65 +++++++-----
 package.json                                  |  1 -
 packages/types/.gitignore                     |  1 +
 .../types/DBDocuments}/BaseDocument.ts        |  0
 .../types/DBDocuments}/MessageDocument.ts     |  6 ++
 .../DBDocuments/PublicSettingsDocument.ts     | 16 +++
 .../types/DBDocuments}/QRCodeDocument.ts      |  0
 .../DBDocuments/ServerSettingsDocument.ts     | 24 +++++
 .../types/DBDocuments}/UserDocument.ts        |  0
 .../WebPushSubscriptionDocument.ts            | 11 +++
 packages/types/DBDocuments/index.ts           |  7 ++
 packages/types/index.ts                       |  1 +
 packages/types/package.json                   | 10 ++
 packages/types/tsconfig.json                  |  9 ++
 .../PouchDB.js                                |  4 -
 .../package.json                              | 11 ++-
 .../src/PouchDB.ts                            |  7 ++
 .../src/dbs.ts                                | 38 +++++++
 .../{ => src}/generate-keys.js                |  0
 .../src/server.ts                             | 81 +++++++++++++++
 .../src/serviceSeqTracker.ts                  | 38 +++++++
 .../src/setupVapidDetails.ts                  | 77 +++++++++++++++
 .../test-send-notification-cancel.js          |  0
 .../{ => src}/test-send-notification.js       |  0
 48 files changed, 464 insertions(+), 128 deletions(-)
 delete mode 100644 apps/frontend/src/types/DBDocumentTypes/PublicSettingsDocument.ts
 delete mode 100644 apps/frontend/src/types/DBDocumentTypes/WebPushSubscriptionDocument.ts
 delete mode 100644 apps/frontend/src/types/DBDocumentTypes/index.ts
 create mode 100644 packages/types/.gitignore
 rename {apps/frontend/src/types/DBDocumentTypes => packages/types/DBDocuments}/BaseDocument.ts (100%)
 rename {apps/frontend/src/types/DBDocumentTypes => packages/types/DBDocuments}/MessageDocument.ts (81%)
 create mode 100644 packages/types/DBDocuments/PublicSettingsDocument.ts
 rename {apps/frontend/src/types/DBDocumentTypes => packages/types/DBDocuments}/QRCodeDocument.ts (100%)
 create mode 100644 packages/types/DBDocuments/ServerSettingsDocument.ts
 rename {apps/frontend/src/types/DBDocumentTypes => packages/types/DBDocuments}/UserDocument.ts (100%)
 create mode 100644 packages/types/DBDocuments/WebPushSubscriptionDocument.ts
 create mode 100644 packages/types/DBDocuments/index.ts
 create mode 100644 packages/types/index.ts
 create mode 100644 packages/types/package.json
 create mode 100644 packages/types/tsconfig.json
 delete mode 100644 services/message-delivery-method-web-push/PouchDB.js
 create mode 100644 services/message-delivery-method-web-push/src/PouchDB.ts
 create mode 100644 services/message-delivery-method-web-push/src/dbs.ts
 rename services/message-delivery-method-web-push/{ => src}/generate-keys.js (100%)
 create mode 100644 services/message-delivery-method-web-push/src/server.ts
 create mode 100644 services/message-delivery-method-web-push/src/serviceSeqTracker.ts
 create mode 100644 services/message-delivery-method-web-push/src/setupVapidDetails.ts
 rename services/message-delivery-method-web-push/{ => src}/test-send-notification-cancel.js (100%)
 rename services/message-delivery-method-web-push/{ => src}/test-send-notification.js (100%)

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 38d8112..a43c3bd 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@f3ve/vue-markdown-it": "^0.2.3",
+    "@hereconnect/types": "^1.0.0",
     "@primevue/forms": "^4.2.1",
     "@primevue/themes": "^4.2.1",
     "@tanstack/vue-query": "^5.60.6",
diff --git a/apps/frontend/src/api/dbs.ts b/apps/frontend/src/api/dbs.ts
index c7616fa..cd4a3fd 100644
--- a/apps/frontend/src/api/dbs.ts
+++ b/apps/frontend/src/api/dbs.ts
@@ -4,8 +4,8 @@ import type {
   QRCodeDocument,
   MessageDocument,
   WebPushSubscriptionDocument,
-} from '@/types/DBDocumentTypes'
-import type { PublicSettingsDocument } from '@/types/DBDocumentTypes/PublicSettingsDocument'
+  PublicSettingsDocument,
+} from '@hereconnect/types'
 
 export const qrCodeDbRemote = new PouchDB<QRCodeDocument>(`${import.meta.env.VITE_API_URL}/qr`, {
   skip_setup: true,
diff --git a/apps/frontend/src/api/qrCode.ts b/apps/frontend/src/api/qrCode.ts
index 85b4611..bbaf0e6 100644
--- a/apps/frontend/src/api/qrCode.ts
+++ b/apps/frontend/src/api/qrCode.ts
@@ -1,4 +1,4 @@
-import type { QRCodeDocument } from '@/types/DBDocumentTypes'
+import type { QRCodeDocument } from '@hereconnect/types'
 import { qrCodeDbLocal, qrCodeDbRemote } from '@/api/dbs'
 import { getUserUuid } from '@/utils/getUserUuid'
 import { getBrowserUuid } from '@/utils/getBrowserUuid'
diff --git a/apps/frontend/src/api/webPush.ts b/apps/frontend/src/api/webPush.ts
index fc73788..8882f90 100644
--- a/apps/frontend/src/api/webPush.ts
+++ b/apps/frontend/src/api/webPush.ts
@@ -1,4 +1,4 @@
-import type { WebPushSubscriptionDocument } from '@/types/DBDocumentTypes'
+import type { WebPushSubscriptionDocument } from '@hereconnect/types'
 import { publicSettingsDbRemote, webPushSubscriptionsDbRemote } from '@/api/dbs'
 import { getUserUuid } from '@/utils/getUserUuid'
 import { getBrowserUuid } from '@/utils/getBrowserUuid'
diff --git a/apps/frontend/src/components/ChatComponent.vue b/apps/frontend/src/components/ChatComponent.vue
index e5d36c6..07d4fa0 100644
--- a/apps/frontend/src/components/ChatComponent.vue
+++ b/apps/frontend/src/components/ChatComponent.vue
@@ -40,7 +40,9 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, useTemplateRef, watch, nextTick } from 'vue'
 import { messagesDbLocal as db, messagesDbRemote as remoteDb } from '@/api/dbs'
-import { type MessageDocument } from '@/types/DBDocumentTypes'
+import { type MessageDocument } from '@hereconnect/types'
+import { getBrowserUuid } from '@/utils/getBrowserUuid'
+import { getUserUuid } from '@/utils/getUserUuid'
 
 const formRef = useTemplateRef('form')
 const messagesContainerRef = useTemplateRef('messagesContainer')
@@ -84,9 +86,11 @@ async function sendMessage() {
     type: 'message',
     qr_code_uri,
     chat,
-    created_at,
     from: userRole,
     body: newMessage.value.trim(),
+    browser_uuid: getBrowserUuid(),
+    user_uuid: getUserUuid(),
+    created_at,
   }
 
   try {
diff --git a/apps/frontend/src/components/create/CreateMessageDeliveryMethodSection.vue b/apps/frontend/src/components/create/CreateMessageDeliveryMethodSection.vue
index 136df4b..a22e854 100644
--- a/apps/frontend/src/components/create/CreateMessageDeliveryMethodSection.vue
+++ b/apps/frontend/src/components/create/CreateMessageDeliveryMethodSection.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { type QRCodeDocument } from '@/types/DBDocumentTypes'
+import { type QRCodeDocument } from '@hereconnect/types'
 import CreateMessageDeliveryOptionTelegram from '@/components/create/CreateMessageDeliveryOptionTelegram.vue'
 import CreateMessageDeliveryOptionWebPush from '@/components/create/CreateMessageDeliveryOptionWebPush.vue'
 import { ref } from 'vue'
diff --git a/apps/frontend/src/components/create/CreateMessageDeliveryOption.vue b/apps/frontend/src/components/create/CreateMessageDeliveryOption.vue
index e2718aa..7c64b73 100644
--- a/apps/frontend/src/components/create/CreateMessageDeliveryOption.vue
+++ b/apps/frontend/src/components/create/CreateMessageDeliveryOption.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import type { QRCodeDocument } from '@/types/DBDocumentTypes'
+import type { QRCodeDocument } from '@hereconnect/types'
 import type { DeliveryOption } from '@/constants/deliveryOptions'
 
 defineProps<{
diff --git a/apps/frontend/src/components/create/CreateMessageDeliveryOptionTelegram.vue b/apps/frontend/src/components/create/CreateMessageDeliveryOptionTelegram.vue
index b414804..08aeb2d 100644
--- a/apps/frontend/src/components/create/CreateMessageDeliveryOptionTelegram.vue
+++ b/apps/frontend/src/components/create/CreateMessageDeliveryOptionTelegram.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { type QRCodeDocument } from '@/types/DBDocumentTypes'
+import { type QRCodeDocument } from '@hereconnect/types'
 import { type DeliveryOption, DELIVERY_METHOD_TELEGRAM } from '@/constants/deliveryOptions'
 import { computed } from 'vue'
 
diff --git a/apps/frontend/src/components/create/CreateMessageDeliveryOptionWebPush.vue b/apps/frontend/src/components/create/CreateMessageDeliveryOptionWebPush.vue
index b32d591..3ed7b68 100644
--- a/apps/frontend/src/components/create/CreateMessageDeliveryOptionWebPush.vue
+++ b/apps/frontend/src/components/create/CreateMessageDeliveryOptionWebPush.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { type QRCodeDocument } from '@/types/DBDocumentTypes'
+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'
diff --git a/apps/frontend/src/components/create/CreatePlacementSection.vue b/apps/frontend/src/components/create/CreatePlacementSection.vue
index 31cb3ff..0537d41 100644
--- a/apps/frontend/src/components/create/CreatePlacementSection.vue
+++ b/apps/frontend/src/components/create/CreatePlacementSection.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
 import { qrCodePlacements } from '@/constants/qrCodePlacements'
-import type { QRCodeDocument } from '@/types/DBDocumentTypes'
+import type { QRCodeDocument } from '@hereconnect/types'
 const selectedPlacement = defineModel<null | QRCodeDocument['placement']>()
 
 defineEmits(['nextStep'])
diff --git a/apps/frontend/src/components/create/CreatePredefinedMessagesSection.vue b/apps/frontend/src/components/create/CreatePredefinedMessagesSection.vue
index f014a21..6cee188 100644
--- a/apps/frontend/src/components/create/CreatePredefinedMessagesSection.vue
+++ b/apps/frontend/src/components/create/CreatePredefinedMessagesSection.vue
@@ -31,7 +31,7 @@
 
 <script setup lang="ts">
 import { nextTick, useTemplateRef, watch } from 'vue'
-import { type QRCodeDocument } from '@/types/DBDocumentTypes'
+import { type QRCodeDocument } from '@hereconnect/types'
 import { defaultMessages } from '@/constants/defaultMessages'
 
 // Пропсы
diff --git a/apps/frontend/src/components/create/CreateSectionManager.vue b/apps/frontend/src/components/create/CreateSectionManager.vue
index e329cee..cad4fb2 100644
--- a/apps/frontend/src/components/create/CreateSectionManager.vue
+++ b/apps/frontend/src/components/create/CreateSectionManager.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import type { QRCodeDocument } from '@/types/DBDocumentTypes'
+import type { QRCodeDocument } from '@hereconnect/types'
 
 // Пропсы, которые будут передаваться из родительского компонента
 const props = defineProps<{
diff --git a/apps/frontend/src/components/create/CreateSummarySection.vue b/apps/frontend/src/components/create/CreateSummarySection.vue
index e290750..44676c2 100644
--- a/apps/frontend/src/components/create/CreateSummarySection.vue
+++ b/apps/frontend/src/components/create/CreateSummarySection.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { type QRCodeDocument } from '@/types/DBDocumentTypes'
+import { type QRCodeDocument } from '@hereconnect/types'
 defineProps<{ buttonLabel: string }>()
 const name = defineModel<QRCodeDocument['name']>('name')
 const emit = defineEmits(['nextStep'])
diff --git a/apps/frontend/src/components/manage/ManagePlacementInstructions.vue b/apps/frontend/src/components/manage/ManagePlacementInstructions.vue
index 332ebc8..f144107 100644
--- a/apps/frontend/src/components/manage/ManagePlacementInstructions.vue
+++ b/apps/frontend/src/components/manage/ManagePlacementInstructions.vue
@@ -13,7 +13,7 @@
 import { computed } from 'vue'
 import { VueMarkdownIt } from '@f3ve/vue-markdown-it'
 import { useQuery } from '@tanstack/vue-query'
-import { type QRCodeDocument } from '@/types/DBDocumentTypes'
+import { type QRCodeDocument } from '@hereconnect/types'
 
 // Импортируем все инструкции из директории
 const importInstructions = import.meta.glob('/src/content/placementInstructions/*.md', {
diff --git a/apps/frontend/src/components/read/ReadContactInfo.vue b/apps/frontend/src/components/read/ReadContactInfo.vue
index 1e331c6..93c7139 100644
--- a/apps/frontend/src/components/read/ReadContactInfo.vue
+++ b/apps/frontend/src/components/read/ReadContactInfo.vue
@@ -48,7 +48,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import md5 from 'md5'
-import type { ContactInfo } from '@/types/DBDocumentTypes'
+import type { ContactInfo } from '@hereconnect/types'
 import { sanitizeFileName } from '@/utils/sanitizeFileName'
 
 const { contactInfo } = defineProps<{ contactInfo: ContactInfo }>()
diff --git a/apps/frontend/src/components/read/ReadMessageSender.vue b/apps/frontend/src/components/read/ReadMessageSender.vue
index 2cebe91..7d1fe48 100644
--- a/apps/frontend/src/components/read/ReadMessageSender.vue
+++ b/apps/frontend/src/components/read/ReadMessageSender.vue
@@ -45,8 +45,10 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { messagesDbLocal as db } from '@/api/dbs'
-import type { MessageDocument, QRCodeDocument } from '@/types/DBDocumentTypes'
+import type { MessageDocument, QRCodeDocument } from '@hereconnect/types'
 import { ROUTE_NAMES } from '@/constants/routes'
+import { getUserUuid } from '@/utils/getUserUuid'
+import { getBrowserUuid } from '@/utils/getBrowserUuid'
 
 const { doc } = defineProps<{
   doc: QRCodeDocument
@@ -76,6 +78,8 @@ async function sendMessage(content: string) {
       chat,
       created_at: new Date().toISOString(),
       from: 'guest',
+      user_uuid: getUserUuid(),
+      browser_uuid: getBrowserUuid(),
       body: content.trim(),
     }
 
diff --git a/apps/frontend/src/types/DBDocumentTypes/PublicSettingsDocument.ts b/apps/frontend/src/types/DBDocumentTypes/PublicSettingsDocument.ts
deleted file mode 100644
index aa5c2e7..0000000
--- a/apps/frontend/src/types/DBDocumentTypes/PublicSettingsDocument.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { BaseDocument } from '@/types/DBDocumentTypes/BaseDocument'
-
-export interface PublicSettingsDocument extends BaseDocument {
-  _id: string // Формат: "public_settings:<name>"
-  type: 'public_settings'
-
-  /**
-   * Название настройки
-   */
-  name: string
-
-  /**
-   * Значение настройки
-   */
-  value: string
-}
diff --git a/apps/frontend/src/types/DBDocumentTypes/WebPushSubscriptionDocument.ts b/apps/frontend/src/types/DBDocumentTypes/WebPushSubscriptionDocument.ts
deleted file mode 100644
index 549050f..0000000
--- a/apps/frontend/src/types/DBDocumentTypes/WebPushSubscriptionDocument.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { BaseDocument } from '@/types/DBDocumentTypes/BaseDocument'
-
-export interface WebPushSubscriptionDocument extends BaseDocument {
-  _id: string // Формат: "web_push_subscription:<user_uuid>:<browser_uuid>"
-  type: 'web_push_subscription'
-  user_uuid: string // UUID пользователя, связанного с подпиской
-  browser_uuid: string // UUID браузера, связанного с подпиской
-  subscription: PushSubscriptionJSON
-  created_at: string // Дата создания подписки в ISO формате
-  updated_at?: string // Дата последнего обновления подписки
-}
diff --git a/apps/frontend/src/types/DBDocumentTypes/index.ts b/apps/frontend/src/types/DBDocumentTypes/index.ts
deleted file mode 100644
index ce05ca3..0000000
--- a/apps/frontend/src/types/DBDocumentTypes/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './BaseDocument'
-export * from './QRCodeDocument'
-export * from './MessageDocument'
-export * from './UserDocument'
-export * from './WebPushSubscriptionDocument'
diff --git a/apps/frontend/src/views/CreateView.vue b/apps/frontend/src/views/CreateView.vue
index e1eca0e..bff4d6a 100644
--- a/apps/frontend/src/views/CreateView.vue
+++ b/apps/frontend/src/views/CreateView.vue
@@ -44,7 +44,7 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { createQrCodeDocument } from '@/api/qrCode'
-import type { QRCodeDocument } from '@/types/DBDocumentTypes'
+import type { QRCodeDocument } from '@hereconnect/types'
 import { ROUTE_NAMES } from '@/constants/routes'
 
 const placement = ref<null | QRCodeDocument['placement']>(null)
diff --git a/apps/frontend/src/views/ManageQRCodeReadyView.vue b/apps/frontend/src/views/ManageQRCodeReadyView.vue
index b2ca1e0..fa05eef 100644
--- a/apps/frontend/src/views/ManageQRCodeReadyView.vue
+++ b/apps/frontend/src/views/ManageQRCodeReadyView.vue
@@ -1,52 +1,62 @@
 <template>
   <div class="flex flex-col min-h-full">
-    <main class="flex-grow flex items-center justify-center py-6 px-4 md:px-6">
+    <main
+      class="flex-grow flex justify-center py-6 px-4 md:px-6"
+      :class="{
+        'items-center':
+          svgQueryIsLoading || qrCodeQueryIsLoading || svgQueryIsError || qrCodeQueryIsError,
+      }"
+    >
       <section class="max-w-prose w-full flex flex-col gap-1">
-        <h2 class="text-xl font-semibold mb-4">Ваш QR‑код готов</h2>
-        <p class="text-gray-600 mb-4">Сохраните его и ознакомьтесь с инструкциями по размещению.</p>
-
-        <!-- Рендер QR‑кода -->
-        <div v-if="!svgQueryIsLoading && svgQueryData" class="border p-4 bg-white rounded-lg mb-6">
-          <img :src="svgQueryData" alt="QR‑код" />
-        </div>
+        <p v-if="svgQueryIsLoading || qrCodeQueryIsLoading" class="text-gray-500 mt-4">
+          Загрузка...
+        </p>
         <p v-else-if="svgQueryIsError" class="text-red-500 mt-4">
           Ошибка генерации QR‑кода: {{ svgQueryError?.message }}
         </p>
-
-        <!-- Сообщение об ошибке -->
-        <p v-if="qrCodeQueryIsError" class="text-red-500 mt-4">
+        <p v-else-if="qrCodeQueryIsError" class="text-red-500 mt-4">
           Ошибка загрузки данных QR‑кода: {{ qrCodeQueryError!.message }}
         </p>
-        <p v-if="svgQueryIsLoading" class="text-gray-500 mt-4">Загрузка...</p>
+        <template v-else>
+          <h2 class="text-xl font-semibold mb-4">Ваш QR‑код готов</h2>
+          <p class="text-gray-600 mb-4">
+            Сохраните его и ознакомьтесь с инструкциями по размещению.
+          </p>
 
-        <!-- Кнопки для скачивания -->
-        <div
-          v-if="!svgQueryIsLoading && !qrCodeQueryIsError && svgQueryData"
-          class="flex flex-row gap-4 justify-center"
-        >
-          <Button
-            label="Скачать SVG"
-            icon="pi pi-download"
-            class="p-button-sm"
-            :href="svgQueryData"
-            :download="`${sanitizedFileName}.svg`"
-            as="a"
+          <!-- Рендер QR‑кода -->
+          <div class="border p-4 bg-white rounded-lg mb-6">
+            <img v-if="!svgQueryIsLoading && svgQueryData" :src="svgQueryData" alt="QR‑код" />
+          </div>
+
+          <!-- Кнопки для скачивания -->
+          <div
+            v-if="!svgQueryIsLoading && !qrCodeQueryIsError && svgQueryData"
+            class="flex flex-row gap-4 justify-center"
+          >
+            <Button
+              label="Скачать SVG"
+              icon="pi pi-download"
+              class="p-button-sm"
+              :href="svgQueryData"
+              :download="`${sanitizedFileName}.svg`"
+              as="a"
+            />
+
+            <DownloadImageButton
+              :svgUrl="svgQueryData"
+              :filename="`${sanitizedFileName}.png`"
+              label="Скачать PNG"
+              type="image/png"
+              :width="width"
+            />
+          </div>
+
+          <!-- Инструкции по размещению -->
+          <ManagePlacementInstructions
+            :placement="qrCodeDoc?.placement"
+            v-if="qrCodeDoc?.placement"
           />
-
-          <DownloadImageButton
-            :svgUrl="svgQueryData"
-            :filename="`${sanitizedFileName}.png`"
-            label="Скачать PNG"
-            type="image/png"
-            :width="width"
-          />
-        </div>
-
-        <!-- Инструкции по размещению -->
-        <ManagePlacementInstructions
-          :placement="qrCodeDoc?.placement"
-          v-if="qrCodeDoc?.placement"
-        />
+        </template>
       </section>
     </main>
 
@@ -71,7 +81,7 @@ import QRCodeStyling from 'qr-code-styling'
 import { optimizeSvg } from '@/utils/images/svg/optimizeSvg'
 import { replaceFillInSvg } from '@/utils/images/svg/replaceFillInSvg'
 import { getQrCodeDocument } from '@/api/qrCode'
-import { type QRCodeDocument } from '@/types/DBDocumentTypes'
+import { type QRCodeDocument } from '@hereconnect/types'
 import { addLabelToSvg } from '@/utils/images/svg/addLabelToSvg'
 import logo from '@/assets/logo.svg?raw'
 import { sanitizeFileName } from '@/utils/sanitizeFileName'
@@ -86,11 +96,15 @@ const height = ref(width.value)
 // Хук для загрузки данных QR‑кода
 const {
   data: qrCodeDoc,
+  isLoading: qrCodeQueryIsLoading,
   isError: qrCodeQueryIsError,
   error: qrCodeQueryError,
 } = useQuery({
   queryKey: ['qrCode', computed(() => qr_code_uri)],
-  queryFn: () => getQrCodeDocument(qr_code_uri),
+  queryFn: async () => {
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    return getQrCodeDocument(qr_code_uri)
+  },
 })
 
 const sanitizedFileName = computed(() => {
@@ -110,6 +124,8 @@ const {
   enabled: computed(() => !!qrCodeDoc.value?.url),
   retry: false,
   queryFn: async () => {
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+
     // Заменяем цвет `fill` в логотипе
     const updatedLogo = replaceFillInSvg(logo, logoColor.value)
 
diff --git a/apps/frontend/src/views/PublicChatView.vue b/apps/frontend/src/views/PublicChatView.vue
index 51d1a8e..ac09dd8 100644
--- a/apps/frontend/src/views/PublicChatView.vue
+++ b/apps/frontend/src/views/PublicChatView.vue
@@ -45,7 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import type { MessageDocument } from '@/types/DBDocumentTypes'
+import type { MessageDocument } from '@hereconnect/types'
 import ChatComponent from '@/components/ChatComponent.vue'
 defineProps<{ qr_code_uri: MessageDocument['qr_code_uri']; chat: MessageDocument['chat'] }>()
 </script>
diff --git a/apps/frontend/src/views/ReadQRCodeView.vue b/apps/frontend/src/views/ReadQRCodeView.vue
index 0c1d2f5..b43556d 100644
--- a/apps/frontend/src/views/ReadQRCodeView.vue
+++ b/apps/frontend/src/views/ReadQRCodeView.vue
@@ -31,7 +31,7 @@
 <script setup lang="ts">
 import { useQuery } from '@tanstack/vue-query'
 import { getQrCodeDocument } from '@/api/qrCode'
-import type { QRCodeDocument } from '@/types/DBDocumentTypes'
+import type { QRCodeDocument } from '@hereconnect/types'
 import QueryRender from '@/components/QueryRender.vue'
 
 const { qr_code_uri } = defineProps<{ qr_code_uri: string }>()
diff --git a/docker-compose.yml b/docker-compose.yml
index 600bdff..66f0bd2 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -12,3 +12,9 @@ services:
       - ./services/couchdb/config:/opt/couchdb/etc/local.d
 
     restart: unless-stopped
+
+    logging:
+      driver: "json-file"
+      options:
+        max-size: "100m"
+        max-file: "10"
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 8bd9bb0..36c3c72 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
       "license": "@hereconnect/license",
       "dependencies": {
         "@f3ve/vue-markdown-it": "^0.2.3",
+        "@hereconnect/types": "^1.0.0",
         "@primevue/forms": "^4.2.1",
         "@primevue/themes": "^4.2.1",
         "@tanstack/vue-query": "^5.60.6",
@@ -1194,6 +1195,10 @@
       "resolved": "services/message-delivery-method-web-push",
       "link": true
     },
+    "node_modules/@hereconnect/types": {
+      "resolved": "packages/types",
+      "link": true
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -3298,6 +3303,12 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/couchdb-changes-stream": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/couchdb-changes-stream/-/couchdb-changes-stream-1.0.1.tgz",
+      "integrity": "sha512-msaurXYnqqAa4s9RmKV14NH+6kK8h7pppoSwTYfR55fdmaYqYLaIuPVoNuWixZaXPEgZ+cHRKIf4PpF1/tu8BQ==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4911,6 +4922,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -5179,19 +5191,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
     "node_modules/loupe": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.2.tgz",
@@ -6543,19 +6542,6 @@
       ],
       "license": "MIT"
     },
-    "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/react-query": {
       "version": "3.39.3",
       "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
@@ -8449,6 +8435,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "packages/couchdb-changes-stream": {
+      "name": "@hereconnect/couchdb-changes-stream",
+      "version": "1.0.0",
+      "extraneous": true,
+      "license": "MIT",
+      "devDependencies": {
+        "@jest/types": "^29.6.3",
+        "@types/jest": "^29.5.14",
+        "@types/node": "^20.8.0",
+        "eslint": "^8.53.0",
+        "eslint-config-prettier": "^9.0.0",
+        "eslint-plugin-prettier": "^5.0.0",
+        "fast-check": "^3.10.0",
+        "jest": "^29.7.0",
+        "prettier": "^3.1.0",
+        "ts-jest": "^29.2.5",
+        "typescript": "^5.2.2",
+        "vitest": "^0.34.5"
+      }
+    },
+    "packages/types": {
+      "name": "@hereconnect/types",
+      "version": "1.0.0"
+    },
     "services/db-migrations": {
       "name": "@hereconnect/db-migrations",
       "version": "1.0.0",
@@ -8470,8 +8480,11 @@
       "version": "1.0.0",
       "license": "@hereconnect/license",
       "dependencies": {
+        "@hereconnect/types": "^1.0.0",
+        "couchdb-changes-stream": "^1.0.1",
         "pouchdb-adapter-http": "^9.0.0",
         "pouchdb-core": "^9.0.0",
+        "pouchdb-find": "^9.0.0",
         "web-push": "^3.6.7"
       },
       "engines": {
diff --git a/package.json b/package.json
index 322b00b..34731cd 100644
--- a/package.json
+++ b/package.json
@@ -21,4 +21,3 @@
     "lint": "npm run lint --workspaces"
   }
 }
-
diff --git a/packages/types/.gitignore b/packages/types/.gitignore
new file mode 100644
index 0000000..53c37a1
--- /dev/null
+++ b/packages/types/.gitignore
@@ -0,0 +1 @@
+dist
\ No newline at end of file
diff --git a/apps/frontend/src/types/DBDocumentTypes/BaseDocument.ts b/packages/types/DBDocuments/BaseDocument.ts
similarity index 100%
rename from apps/frontend/src/types/DBDocumentTypes/BaseDocument.ts
rename to packages/types/DBDocuments/BaseDocument.ts
diff --git a/apps/frontend/src/types/DBDocumentTypes/MessageDocument.ts b/packages/types/DBDocuments/MessageDocument.ts
similarity index 81%
rename from apps/frontend/src/types/DBDocumentTypes/MessageDocument.ts
rename to packages/types/DBDocuments/MessageDocument.ts
index 71e2e73..b3e57a8 100644
--- a/apps/frontend/src/types/DBDocumentTypes/MessageDocument.ts
+++ b/packages/types/DBDocuments/MessageDocument.ts
@@ -23,6 +23,12 @@ export interface MessageDocument extends BaseDocument {
   /** Опциональная геопозиция (широта и долгота) */
   location?: { lat: number; lng: number }
 
+  /** Идентификатор пользователя, отправившего сообщение */
+  user_uuid: string
+
+  /** Идентификатор браузера, отправившего сообщение */
+  browser_uuid: string
+
   /** Вложения, такие как фото */
   // _attachments?: {
   //   [key: string]: Attachment
diff --git a/packages/types/DBDocuments/PublicSettingsDocument.ts b/packages/types/DBDocuments/PublicSettingsDocument.ts
new file mode 100644
index 0000000..f1151fc
--- /dev/null
+++ b/packages/types/DBDocuments/PublicSettingsDocument.ts
@@ -0,0 +1,16 @@
+import type { BaseDocument } from "./BaseDocument";
+
+export interface PublicSettingsDocument extends BaseDocument {
+  _id: string; // Формат: "public_settings:<name>"
+  type: "public_settings";
+
+  /**
+   * Название настройки
+   */
+  name: string;
+
+  /**
+   * Значение настройки
+   */
+  value: string;
+}
diff --git a/apps/frontend/src/types/DBDocumentTypes/QRCodeDocument.ts b/packages/types/DBDocuments/QRCodeDocument.ts
similarity index 100%
rename from apps/frontend/src/types/DBDocumentTypes/QRCodeDocument.ts
rename to packages/types/DBDocuments/QRCodeDocument.ts
diff --git a/packages/types/DBDocuments/ServerSettingsDocument.ts b/packages/types/DBDocuments/ServerSettingsDocument.ts
new file mode 100644
index 0000000..a20e0f2
--- /dev/null
+++ b/packages/types/DBDocuments/ServerSettingsDocument.ts
@@ -0,0 +1,24 @@
+import type { BaseDocument } from "./BaseDocument";
+
+type MessageDeliveryMethodWebPushVapid = {
+  name: "message_delivery_method_web_push_vapid";
+  value: {
+    subject: string;
+    keys: {
+      publicKey: string;
+      privateKey: string;
+    };
+  };
+};
+type MessageDeliveryMethodWebPushGcmApiKey = {
+  name: "message_delivery_method_web_push_gcm_api_key";
+  value: string;
+};
+
+export type ServerSettingsDocument = (
+  | MessageDeliveryMethodWebPushVapid
+  | MessageDeliveryMethodWebPushGcmApiKey
+) & {
+  _id: string; // Формат: "server_settings:<name>"
+  type: "server_settings";
+} & BaseDocument;
diff --git a/apps/frontend/src/types/DBDocumentTypes/UserDocument.ts b/packages/types/DBDocuments/UserDocument.ts
similarity index 100%
rename from apps/frontend/src/types/DBDocumentTypes/UserDocument.ts
rename to packages/types/DBDocuments/UserDocument.ts
diff --git a/packages/types/DBDocuments/WebPushSubscriptionDocument.ts b/packages/types/DBDocuments/WebPushSubscriptionDocument.ts
new file mode 100644
index 0000000..2886459
--- /dev/null
+++ b/packages/types/DBDocuments/WebPushSubscriptionDocument.ts
@@ -0,0 +1,11 @@
+import type { BaseDocument } from "./BaseDocument";
+
+export interface WebPushSubscriptionDocument extends BaseDocument {
+  _id: string; // Формат: "web_push_subscription:<user_uuid>:<browser_uuid>"
+  type: "web_push_subscription";
+  user_uuid: string; // UUID пользователя, связанного с подпиской
+  browser_uuid: string; // UUID браузера, связанного с подпиской
+  subscription: PushSubscriptionJSON;
+  created_at: string; // Дата создания подписки в ISO формате
+  updated_at?: string; // Дата последнего обновления подписки
+}
diff --git a/packages/types/DBDocuments/index.ts b/packages/types/DBDocuments/index.ts
new file mode 100644
index 0000000..2602a6e
--- /dev/null
+++ b/packages/types/DBDocuments/index.ts
@@ -0,0 +1,7 @@
+export * from "./BaseDocument";
+export * from "./MessageDocument";
+export * from "./PublicSettingsDocument";
+export * from "./QRCodeDocument";
+export * from "./ServerSettingsDocument";
+export * from "./UserDocument";
+export * from "./WebPushSubscriptionDocument";
diff --git a/packages/types/index.ts b/packages/types/index.ts
new file mode 100644
index 0000000..fe5e303
--- /dev/null
+++ b/packages/types/index.ts
@@ -0,0 +1 @@
+export * from "./DBDocuments";
diff --git a/packages/types/package.json b/packages/types/package.json
new file mode 100644
index 0000000..600dfee
--- /dev/null
+++ b/packages/types/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@hereconnect/types",
+  "version": "1.0.0",
+  "main": "index.ts",
+  "types": "index.ts",
+  "private": true,
+  "scripts": {
+    "build": "tsc"
+  }
+}
\ No newline at end of file
diff --git a/packages/types/tsconfig.json b/packages/types/tsconfig.json
new file mode 100644
index 0000000..18420f3
--- /dev/null
+++ b/packages/types/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./dist",
+    "strict": true
+  },
+  "include": ["index.ts"]
+}
\ No newline at end of file
diff --git a/services/message-delivery-method-web-push/PouchDB.js b/services/message-delivery-method-web-push/PouchDB.js
deleted file mode 100644
index 8dede2c..0000000
--- a/services/message-delivery-method-web-push/PouchDB.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import PouchDB from "pouchdb-core";
-import PouchDBAdapterHttp from "pouchdb-adapter-http";
-
-export default PouchDB.plugin(PouchDBAdapterHttp);
diff --git a/services/message-delivery-method-web-push/package.json b/services/message-delivery-method-web-push/package.json
index 7d441e8..a721bd7 100644
--- a/services/message-delivery-method-web-push/package.json
+++ b/services/message-delivery-method-web-push/package.json
@@ -2,7 +2,7 @@
   "name": "@hereconnect/message-delivery-method-web-push",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "main": "src/server.ts",
   "type": "module",
   "license": "@hereconnect/license",
   "private": true,
@@ -24,13 +24,16 @@
   },
   "contributors": [],
   "scripts": {
-    "generate-keys": "node ./generate-keys.js",
-    "test-send-notification": "node ./test-send-notification.js",
-    "test-send-notification-cancel": "node ./test-send-notification-cancel.js"
+    "generate-keys": "node ./src/generate-keys.js",
+    "test-send-notification": "node ./src/test-send-notification.js",
+    "test-send-notification-cancel": "node ./src/test-send-notification-cancel.js"
   },
   "dependencies": {
+    "@hereconnect/types": "^1.0.0",
+    "couchdb-changes-stream": "^1.0.1",
     "pouchdb-adapter-http": "^9.0.0",
     "pouchdb-core": "^9.0.0",
+    "pouchdb-find": "^9.0.0",
     "web-push": "^3.6.7"
   }
 }
diff --git a/services/message-delivery-method-web-push/src/PouchDB.ts b/services/message-delivery-method-web-push/src/PouchDB.ts
new file mode 100644
index 0000000..9c6da57
--- /dev/null
+++ b/services/message-delivery-method-web-push/src/PouchDB.ts
@@ -0,0 +1,7 @@
+import PouchDB from "pouchdb-core";
+import PouchDBAdapterHttp from "pouchdb-adapter-http";
+import PouchDBFindPlugin from 'pouchdb-find'
+
+export default PouchDB
+  .plugin(PouchDBAdapterHttp)
+  .plugin(PouchDBFindPlugin);
diff --git a/services/message-delivery-method-web-push/src/dbs.ts b/services/message-delivery-method-web-push/src/dbs.ts
new file mode 100644
index 0000000..2f367cc
--- /dev/null
+++ b/services/message-delivery-method-web-push/src/dbs.ts
@@ -0,0 +1,38 @@
+import PouchDB from "./PouchDB";
+import type {
+  MessageDocument,
+  QRCodeDocument,
+  ServerSettingsDocument,
+} from "@hereconnect/types";
+
+export interface ServiceDoc {
+  _id: string;
+  lastSeq: string | number;
+}
+
+if (!process.env.API_URL) {
+  throw new Error("Environment variable API_URL is not set");
+}
+
+export const messagesDbUrl = `${process.env.API_URL}/messages`;
+
+export const serverSettingsDb = new PouchDB<ServerSettingsDocument>(
+  `${process.env.API_URL}/server_settings`,
+  {
+    skip_setup: true,
+  },
+);
+export const qrDb = new PouchDB<QRCodeDocument>(`${process.env.API_URL}/qr`, {
+  skip_setup: true,
+});
+
+export const { messagesDb, serviceDb } = (() => {
+  const messagesDB = new PouchDB(messagesDbUrl, {
+    skip_setup: true,
+  });
+
+  return {
+    messagesDb: messagesDB as PouchDB.Database<MessageDocument>,
+    serviceDb: messagesDB as PouchDB.Database<ServiceDoc>,
+  } as const;
+})();
diff --git a/services/message-delivery-method-web-push/generate-keys.js b/services/message-delivery-method-web-push/src/generate-keys.js
similarity index 100%
rename from services/message-delivery-method-web-push/generate-keys.js
rename to services/message-delivery-method-web-push/src/generate-keys.js
diff --git a/services/message-delivery-method-web-push/src/server.ts b/services/message-delivery-method-web-push/src/server.ts
new file mode 100644
index 0000000..61c5a43
--- /dev/null
+++ b/services/message-delivery-method-web-push/src/server.ts
@@ -0,0 +1,81 @@
+import webpush from "web-push";
+
+import { CouchDBChangesStream } from "couchdb-changes-stream";
+import { qrDb, messagesDbUrl } from "./dbs";
+import { setupVapidDetails } from "./setupVapidDetails";
+import type { MessageDocument } from "@hereconnect/types";
+import { ServiceSeqTracker } from "./serviceSeqTracker";
+
+const serviceSeqTracker = new ServiceSeqTracker();
+
+const start = async () => {
+  await setupVapidDetails();
+  const since = await serviceSeqTracker.getSince();
+
+  const changesStream = new CouchDBChangesStream<MessageDocument>(
+    messagesDbUrl,
+    {
+      since,
+      feed: "continuous",
+      include_docs: true,
+      heartbeat: 1000,
+      filter: "_selector",
+      selector: {
+        type: "message",
+      },
+    },
+  );
+
+  // Gracefully handle SIGINT
+  process.on("SIGINT", async () => {
+    changesStream.stop();
+    process.stdout.write("\n");
+    process.exit(2);
+  });
+
+  console.info("Service started from sequence", since);
+
+  for await (const change of changesStream) {
+    const { seq, doc } = change;
+
+    if (!doc) {
+      console.error("Change missing document:", change);
+      continue;
+    }
+
+    serviceSeqTracker.checkNextSeq(seq);
+
+    try {
+      if (doc.from === "guest") {
+        const qrDoc = await qrDb.get(`qr:${doc.qr_code_uri}`);
+        if (qrDoc.messageDeliveryMethod !== "webPush") {
+          console.log(`Skip !webPush`);
+          continue;
+        }
+
+        console.log("FROM GUEST");
+        console.log(qrDoc.user_uuid);
+        console.log(qrDoc.browser_uuid);
+      } else if (doc.from === "owner") {
+        console.log("FROM OWNER");
+      } else {
+        continue;
+      }
+
+      console.log(
+        `Processed change: ${JSON.stringify({ _id: change.id, ref: doc._rev, seq: change.seq })}`,
+      );
+    } catch (error) {
+      console.error(
+        `Failed processing: ${JSON.stringify(error)} change: ${JSON.stringify({ id: doc._id, rev: doc._rev, seq: seq })}`,
+      );
+    } finally {
+      await serviceSeqTracker.saveSeq(seq);
+    }
+  }
+};
+
+start().catch((error) => {
+  console.error("error", error);
+  process.exit(1);
+});
diff --git a/services/message-delivery-method-web-push/src/serviceSeqTracker.ts b/services/message-delivery-method-web-push/src/serviceSeqTracker.ts
new file mode 100644
index 0000000..726489b
--- /dev/null
+++ b/services/message-delivery-method-web-push/src/serviceSeqTracker.ts
@@ -0,0 +1,38 @@
+import { serviceDb, type ServiceDoc } from "./dbs";
+
+const SERVICE_DOC_ID = "_local/service:message-delivery-method-web-push";
+
+export class ServiceSeqTracker {
+  private serviceDoc: ServiceDoc;
+
+  async getSince() {
+    this.serviceDoc = await serviceDb.get(SERVICE_DOC_ID).catch((error) => {
+      if (error.name === "not_found") {
+        return {
+          _id: SERVICE_DOC_ID,
+          lastSeq: "0",
+        };
+      }
+      throw error; // Re-throw other errors
+    });
+
+    this.serviceDoc.lastSeq = 0;
+
+    return this.serviceDoc.lastSeq;
+  }
+
+  checkNextSeq(seq: number | string) {
+    const next = parseInt(seq as string, 10);
+    const current = parseInt(this.serviceDoc.lastSeq as string, 10);
+    if (next < current) {
+      throw new Error(
+        `Sequence number is too old: ${seq} (${next} < ${current})`,
+      );
+    }
+  }
+
+  saveSeq(seq: number | string) {
+    this.serviceDoc.lastSeq = seq;
+    return serviceDb.put(this.serviceDoc);
+  }
+}
diff --git a/services/message-delivery-method-web-push/src/setupVapidDetails.ts b/services/message-delivery-method-web-push/src/setupVapidDetails.ts
new file mode 100644
index 0000000..d4da70c
--- /dev/null
+++ b/services/message-delivery-method-web-push/src/setupVapidDetails.ts
@@ -0,0 +1,77 @@
+import webpush from "web-push";
+import { serverSettingsDb } from "./dbs";
+import { ServerSettingsDocument } from "@hereconnect/types";
+
+function isType<N extends ServerSettingsDocument["name"]>(
+  doc: ServerSettingsDocument,
+  name: N,
+): doc is ServerSettingsDocument & { name: N } {
+  return doc.name === name;
+}
+
+export const setupVapidDetails = async () => {
+  const changes = serverSettingsDb.changes({
+    since: "now",
+    live: true,
+    include_docs: true,
+    doc_ids: [
+      "server_settings:message_delivery_method_web_push_vapid",
+      "public_settings:message_delivery_method_web_push_gcm_api_key",
+    ],
+  });
+
+  const {
+    rows: [vapidDetailsRow, gcmApiRow],
+  } = await serverSettingsDb.allDocs({
+    keys: [
+      "server_settings:message_delivery_method_web_push_vapid",
+      "public_settings:message_delivery_method_web_push_gcm_api_key",
+    ],
+    include_docs: true,
+  });
+
+  if (
+    !("doc" in vapidDetailsRow) ||
+    !isType(vapidDetailsRow.doc, "message_delivery_method_web_push_vapid")
+  ) {
+    throw new Error(
+      `VAPID details ${"error" in vapidDetailsRow ? vapidDetailsRow.error : "not exists"}`,
+    );
+  }
+
+  if (
+    "doc" in gcmApiRow &&
+    isType(gcmApiRow.doc, "message_delivery_method_web_push_gcm_api_key")
+  ) {
+    webpush.setGCMAPIKey(gcmApiRow.doc.value);
+  }
+
+  webpush.setVapidDetails(
+    vapidDetailsRow.doc.value.subject,
+    vapidDetailsRow.doc.value.keys.publicKey,
+    vapidDetailsRow.doc.value.keys.privateKey,
+  );
+
+  changes.on("change", (change) => {
+    if (!("doc" in change)) {
+      return;
+    }
+    if (isType(change.doc, "message_delivery_method_web_push_vapid")) {
+      console.log("update vapid details");
+      webpush.setVapidDetails(
+        change.doc.value.subject,
+        change.doc.value.keys.publicKey,
+        change.doc.value.keys.privateKey,
+      );
+      return;
+    }
+
+    if (
+      "doc" in change &&
+      isType(change.doc, "message_delivery_method_web_push_gcm_api_key")
+    ) {
+      console.log("update gcm api key");
+      webpush.setGCMAPIKey(change.doc.value);
+    }
+  });
+};
diff --git a/services/message-delivery-method-web-push/test-send-notification-cancel.js b/services/message-delivery-method-web-push/src/test-send-notification-cancel.js
similarity index 100%
rename from services/message-delivery-method-web-push/test-send-notification-cancel.js
rename to services/message-delivery-method-web-push/src/test-send-notification-cancel.js
diff --git a/services/message-delivery-method-web-push/test-send-notification.js b/services/message-delivery-method-web-push/src/test-send-notification.js
similarity index 100%
rename from services/message-delivery-method-web-push/test-send-notification.js
rename to services/message-delivery-method-web-push/src/test-send-notification.js