From c2d6c5eae8cdace310c5fc38a9ddf53dfec576d4 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 11 May 2021 02:57:10 +0300
Subject: [PATCH] Push notifications: Fix focus on notification click (#1073)

---
 src/modules/actions/api/sync.ts       |  4 ----
 src/serviceWorker/pushNotification.ts | 30 +++++++++++++--------------
 src/util/setupServiceWorker.ts        | 15 ++++++++++++--
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/modules/actions/api/sync.ts b/src/modules/actions/api/sync.ts
index 2a9078e33..ee2427088 100644
--- a/src/modules/actions/api/sync.ts
+++ b/src/modules/actions/api/sync.ts
@@ -12,7 +12,6 @@ import {
 } from '../../../config';
 import { callApi } from '../../../api/gramjs';
 import { buildCollectionByKey } from '../../../util/iteratees';
-import { notifyClientReady } from '../../../util/notifications';
 import {
   replaceChatListIds,
   replaceChats,
@@ -42,9 +41,6 @@ async function sync(afterSyncCallback: () => void) {
     console.log('>>> START SYNC');
   }
 
-  // Notify web worker that client is ready to receive messages
-  notifyClientReady();
-
   await callApi('fetchCurrentUser');
 
   // This fetches only active chats and clears archived chats, which will be fetched in `afterSync`
diff --git a/src/serviceWorker/pushNotification.ts b/src/serviceWorker/pushNotification.ts
index 9729b3919..1e03b76b6 100644
--- a/src/serviceWorker/pushNotification.ts
+++ b/src/serviceWorker/pushNotification.ts
@@ -64,7 +64,7 @@ function getMessageId(data: PushData) {
   return parseInt(data.custom.msg_id, 10);
 }
 
-function getNotificationData(data: PushData):NotificationData {
+function getNotificationData(data: PushData): NotificationData {
   return {
     chatId: getChatId(data),
     messageId: getMessageId(data),
@@ -110,21 +110,16 @@ export function handlePush(e: PushEvent) {
   e.waitUntil(showNotification(notification));
 }
 
-function focusChatMessage(client: WindowClient, data: {chatId?: number; messageId?: number}) {
+function focusChatMessage(client: WindowClient, data: { chatId?: number; messageId?: number }) {
   const { chatId, messageId } = data;
-
-  if (chatId) {
-    client.postMessage({
-      type: 'focusMessage',
-      payload: {
-        chatId,
-        messageId,
-      },
-    });
-  }
-  if (client.focus) {
-    client.focus();
-  }
+  if (!chatId) return;
+  client.postMessage({
+    type: 'focusMessage',
+    payload: {
+      chatId,
+      messageId,
+    },
+  });
 }
 
 export function handleNotificationClick(e: NotificationEvent) {
@@ -134,7 +129,10 @@ export function handleNotificationClick(e: NotificationEvent) {
   const notifyClients = async () => {
     const clients = await self.clients.matchAll({ type: 'window' }) as WindowClient[];
     const clientsInScope = clients.filter((client) => client.url === self.registration.scope);
-    clientsInScope.forEach((client) => focusChatMessage(client, data));
+    await Promise.all(clientsInScope.map(async (client) => {
+      await client.focus();
+      clickBuffer[client.id] = data;
+    }));
     if (!self.clients.openWindow || clientsInScope.length > 0) return undefined;
 
     // If there is no opened client we need to open one and wait until it is fully loaded
diff --git a/src/util/setupServiceWorker.ts b/src/util/setupServiceWorker.ts
index e2e9a0154..1d96c7a6a 100644
--- a/src/util/setupServiceWorker.ts
+++ b/src/util/setupServiceWorker.ts
@@ -3,6 +3,7 @@ import { scriptUrl } from 'service-worker-loader!../serviceWorker';
 import { DEBUG } from '../config';
 import { getDispatch } from '../lib/teact/teactn';
 import { IS_SERVICE_WORKER_SUPPORTED } from './environment';
+import { notifyClientReady } from './notifications';
 
 type WorkerAction = {
   type: string;
@@ -25,6 +26,13 @@ function handleWorkerMessage(e: MessageEvent) {
   }
 }
 
+function subscribeToWorker() {
+  navigator.serviceWorker.removeEventListener('message', handleWorkerMessage);
+  navigator.serviceWorker.addEventListener('message', handleWorkerMessage);
+  // Notify web worker that client is ready to receive messages
+  notifyClientReady();
+}
+
 if (IS_SERVICE_WORKER_SUPPORTED) {
   window.addEventListener('load', async () => {
     try {
@@ -42,8 +50,7 @@ if (IS_SERVICE_WORKER_SUPPORTED) {
           // eslint-disable-next-line no-console
           console.log('[SW] ServiceWorker ready');
         }
-
-        navigator.serviceWorker.addEventListener('message', handleWorkerMessage);
+        subscribeToWorker();
       } else {
         if (DEBUG) {
           // eslint-disable-next-line no-console
@@ -58,4 +65,8 @@ if (IS_SERVICE_WORKER_SUPPORTED) {
       }
     }
   });
+  window.addEventListener('focus', async () => {
+    await navigator.serviceWorker.ready;
+    subscribeToWorker();
+  });
 }