From 16a0fa76de484d40e399b0713ea39d964cee8c81 Mon Sep 17 00:00:00 2001
From: Vasilii Mikhailovskii <ti.webdev@ya.ru>
Date: Mon, 25 Nov 2024 22:58:10 +0200
Subject: [PATCH] add support GCM

---
 apps/frontend/components.d.ts                 |  1 +
 apps/frontend/public/manifest.json            |  3 +-
 apps/frontend/public/service-worker.js        | 11 +++-
 .../create/CreateMessageDeliveryOption.vue    |  6 +-
 .../CreateMessageDeliveryOptionWebPush.vue    |  3 +-
 .../generate-keys.js                          | 19 ++++--
 .../test-send-notification.js                 | 62 ++++++++++++-------
 7 files changed, 70 insertions(+), 35 deletions(-)

diff --git a/apps/frontend/components.d.ts b/apps/frontend/components.d.ts
index 0279195..4778e4d 100644
--- a/apps/frontend/components.d.ts
+++ b/apps/frontend/components.d.ts
@@ -26,6 +26,7 @@ declare module 'vue' {
     ExamplesSection: typeof import('./src/components/TheWelcome/ExamplesSection.vue')['default']
     InputText: typeof import('primevue/inputtext')['default']
     ManagePlacementInstructions: typeof import('./src/components/manage/ManagePlacementInstructions.vue')['default']
+    ProgressSpinner: typeof import('primevue/progressspinner')['default']
     QueryRender: typeof import('./src/components/QueryRender.vue')['default']
     RadioButton: typeof import('primevue/radiobutton')['default']
     ReadContactInfo: typeof import('./src/components/read/ReadContactInfo.vue')['default']
diff --git a/apps/frontend/public/manifest.json b/apps/frontend/public/manifest.json
index 2ce8bda..9ed1ca9 100644
--- a/apps/frontend/public/manifest.json
+++ b/apps/frontend/public/manifest.json
@@ -16,5 +16,6 @@
   ],
   "theme_color": "#ffffff",
   "background_color": "#ffffff",
-  "display": "standalone"
+  "display": "standalone",
+  "gcm_sender_id": "822536580006"
 }
\ No newline at end of file
diff --git a/apps/frontend/public/service-worker.js b/apps/frontend/public/service-worker.js
index 040f00f..d3ec03a 100644
--- a/apps/frontend/public/service-worker.js
+++ b/apps/frontend/public/service-worker.js
@@ -8,6 +8,12 @@ self.addEventListener('install', (event) => {
   // of event.waitUntil();
 })
 
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    clients.claim(), // Привязка нового сервис-воркера к текущим клиентам
+  )
+})
+
 self.addEventListener('push', (event) => {
   const data = event.data.json()
   console.log('Push событие получено:', data.type)
@@ -77,10 +83,9 @@ self.addEventListener('notificationclick', (event) => {
         if (clients.openWindow) {
           console.log('новое окно', urlToOpen)
           return clients.openWindow(urlToOpen).then((client) => {
-            if (client) {
-              return client.focus()
+            if (!client) {
+              console.log('новое окно не открылось')
             }
-            console.log('новое окно не открылось')
           })
         }
       })
diff --git a/apps/frontend/src/components/create/CreateMessageDeliveryOption.vue b/apps/frontend/src/components/create/CreateMessageDeliveryOption.vue
index 7c84e44..e2718aa 100644
--- a/apps/frontend/src/components/create/CreateMessageDeliveryOption.vue
+++ b/apps/frontend/src/components/create/CreateMessageDeliveryOption.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="flex items-center gap-2">
-    <i class="pi pi-spin pi-spinner" v-if="isLoading"></i>
-
+    <div v-if="isLoading" class="w-5 h-5">
+      <ProgressSpinner style="width: 100%; height: 100%" strokeWidth="8" fill="transparent" />
+    </div>
     <RadioButton
       v-else
       v-model="model"
@@ -10,6 +11,7 @@
       :value="method"
       @change="$emit('change', $event)"
     />
+
     <label :for="method">{{ label }}</label>
   </div>
 </template>
diff --git a/apps/frontend/src/components/create/CreateMessageDeliveryOptionWebPush.vue b/apps/frontend/src/components/create/CreateMessageDeliveryOptionWebPush.vue
index abb45c2..8dc6ae8 100644
--- a/apps/frontend/src/components/create/CreateMessageDeliveryOptionWebPush.vue
+++ b/apps/frontend/src/components/create/CreateMessageDeliveryOptionWebPush.vue
@@ -1,5 +1,5 @@
 <template>
-  <CreateMessageDeliveryOption :isLoading="isLoading" :label :method v-model="model" />
+  <CreateMessageDeliveryOption :isLoading :label :method v-model="model" />
 
   <!-- Ошибка разрешений -->
   <p v-if="isError && model === method" class="text-red-500 mb-2">
@@ -44,6 +44,7 @@ async function requestNotificationPermission() {
     }
 
     const registration = await navigator.serviceWorker.ready
+
     const subscription = await registration.pushManager.subscribe({
       userVisibleOnly: true,
       applicationServerKey: await applicationServerKeyPromise,
diff --git a/services/message-delivery-method-web-push/generate-keys.js b/services/message-delivery-method-web-push/generate-keys.js
index 6a37773..2d62381 100644
--- a/services/message-delivery-method-web-push/generate-keys.js
+++ b/services/message-delivery-method-web-push/generate-keys.js
@@ -8,10 +8,10 @@ if (!process.env.VAPID_SUBJECT) {
 const vapidKeys = webpush.generateVAPIDKeys();
 
 await new PouchDB(`${process.env.API_URL}/server_settings`, {
-  skip_setup: true,
-}).put({
-  _id: "server_settings:message_delivery_method_web_push:vapid",
-  vapid: {
+  _id: "server_settings:message_delivery_method_web_push_vapid",
+  type: "server_settings",
+  name: "message_delivery_method_web_push_vapid",
+  value: {
     subject: process.env.VAPID_SUBJECT,
     keys: vapidKeys,
   },
@@ -25,3 +25,14 @@ await new PouchDB(`${process.env.API_URL}/public_settings`, {
   name: "message_delivery_method_web_push_vapid_public_key",
   value: vapidKeys.publicKey,
 });
+
+if (process.env.GCM_API_KEY) {
+  await new PouchDB(`${process.env.API_URL}/public_settings`, {
+    skip_setup: true,
+  }).put({
+    _id: "server_settings:message_delivery_method_web_push_gcm_api_key",
+    type: "server_settings",
+    name: "message_delivery_method_web_push_gcm_api_key",
+    value: process.env.GCM_API_KEY,
+  });
+}
diff --git a/services/message-delivery-method-web-push/test-send-notification.js b/services/message-delivery-method-web-push/test-send-notification.js
index d3c5a21..8e83c59 100644
--- a/services/message-delivery-method-web-push/test-send-notification.js
+++ b/services/message-delivery-method-web-push/test-send-notification.js
@@ -5,44 +5,54 @@ if (!process.env.API_URL) {
   throw new Error(`env API_URL is not set`);
 }
 
-const settings = await new PouchDB(`${process.env.API_URL}/server_settings`, {
+const {
+  rows: [
+    {
+      doc: { value: vapidDetails },
+    },
+    { doc: gcmApiSettingsDoc },
+  ],
+} = await new PouchDB(`${process.env.API_URL}/server_settings`, {
   skip_setup: true,
-}).get("server_settings:message_delivery_method_web_push:vapid");
+}).allDocs({
+  keys: [
+    "server_settings:message_delivery_method_web_push_vapid",
+    "public_settings:message_delivery_method_web_push_gcm_api_key",
+  ],
+  include_docs: true,
+});
 
 webpush.setVapidDetails(
-  settings.vapid.subject,
-  settings.vapid.keys.publicKey,
-  settings.vapid.keys.privateKey,
+  vapidDetails.subject,
+  vapidDetails.keys.publicKey,
+  vapidDetails.keys.privateKey,
 );
 
+if (gcmApiSettingsDoc) {
+  console.log(gcmApiSettingsDoc.value);
+  webpush.setGCMAPIKey(gcmApiSettingsDoc.value);
+}
+
+// optionally provide an identifier that the push service uses to coalesce notifications
+const topic = "chat-6ilhxu-13trvu";
+
 const notification = {
   type: "notification",
   notification: {
     title: "test",
     options: {
       icon: "/images/qr-code-logo-200x200.jpg",
-      body: "Test push message from DevTools.",
+      body: "Test push message from server.",
       tag: "01936062-d10f-7f2f-8ae3-dd7f9fbc5c7f",
-      vibrate: [200, 100, 200, 100, 200, 100, 200],
-      data: {
-        url: "http://localhost:5173/chat/6ilhxu/13trvu",
-        payload: { tag: "01936062-d10f-7f2f-8ae3-dd7f9fbc5c7f" },
-      },
-    },
-  },
-};
-
-const notification2 = {
-  type: "notification",
-  notification: {
-    title: "test",
-    options: {
-      icon: "/images/qr-code-logo-200x200.jpg",
-      body: "Test push message from DevTools.",
-      tag: "01936062-d10f-7f2f-8ae3-dd7f9fbc5c7f",
-      // requireInteraction: true,
+      requireInteraction: true,
       // silent: false,
       // vibrate: [200, 100, 200, 100, 200, 100, 200],
+      // actions: [
+      //   {
+      //     action: "open_url",
+      //     title: "Открыть",
+      //   },
+      // ],
       data: {
         url: "/chat/6ilhxu/13trvu",
         payload: { tag: "01936062-d10f-7f2f-8ae3-dd7f9fbc5c7f" },
@@ -72,6 +82,10 @@ const result = await Promise.allSettled(
     await webpush.sendNotification(
       doc.subscription,
       JSON.stringify(notification),
+      {
+        urgency: "high",
+        topic,
+      },
     );
     console.log("sent ", doc._id);
   }),