From f419eee3f878da5e48c2927bb85bf4b071724c0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=82=E3=82=8F=E3=82=8F=E3=82=8F=E3=81=A8=E3=83=BC?=
 =?UTF-8?q?=E3=81=AB=E3=82=85?=
 <17376330+u1-liquid@users.noreply.github.com>
Date: Mon, 31 Mar 2025 03:36:26 +0900
Subject: [PATCH] =?UTF-8?q?perf(notification):=20=E3=82=BF=E3=83=96?=
 =?UTF-8?q?=E3=81=8C=E3=83=90=E3=83=83=E3=82=AF=E3=82=B0=E3=83=A9=E3=82=A6?=
 =?UTF-8?q?=E3=83=B3=E3=83=89=E3=81=AB=E3=81=82=E3=82=8B=E5=A0=B4=E5=90=88?=
 =?UTF-8?q?=E3=80=81=E9=80=9A=E7=9F=A5=E3=81=AE=E3=83=AA=E3=82=A2=E3=83=AB?=
 =?UTF-8?q?=E3=82=BF=E3=82=A4=E3=83=A0=E6=8F=8F=E7=94=BB=E3=82=92=E4=B8=80?=
 =?UTF-8?q?=E6=99=82=E5=81=9C=E6=AD=A2=E3=81=99=E3=82=8B=20(MisskeyIO#948)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkNotifications.vue        | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkNotifications.vue b/packages/frontend/src/components/MkNotifications.vue
index 8b62fe6fd..8755a626e 100644
--- a/packages/frontend/src/components/MkNotifications.vue
+++ b/packages/frontend/src/components/MkNotifications.vue
@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, onMounted, computed, shallowRef, onActivated } from 'vue';
+import { onUnmounted, onMounted, computed, ref, shallowRef, onActivated } from 'vue';
 import MkPagination from '@/components/MkPagination.vue';
 import XNotification from '@/components/MkNotification.vue';
 import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
@@ -43,6 +43,7 @@ const props = defineProps<{
 }>();
 
 const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
+const hasNewNotificationWhileTabHidden = ref(false);
 
 const pagination = computed(() => defaultStore.reactiveState.useGroupedNotifications.value ? {
 	endpoint: 'i/notifications-grouped' as const,
@@ -64,9 +65,13 @@ function onNotification(notification) {
 		useStream().send('readNotification');
 	}
 
-	if (!isMuted && filterMutedNotification(notification)) {
+	if (!document.hidden && !isMuted && filterMutedNotification(notification)) {
 		pagingComponent.value?.prepend(notification);
 	}
+
+	if (document.hidden && !hasNewNotificationWhileTabHidden.value) {
+		hasNewNotificationWhileTabHidden.value = true;
+	}
 }
 
 function reload() {
@@ -77,12 +82,22 @@ function reload() {
 	});
 }
 
+function onVisibilityChange() {
+	if (document.visibilityState === 'visible') {
+		if (hasNewNotificationWhileTabHidden.value) {
+			hasNewNotificationWhileTabHidden.value = false;
+			reload();
+		}
+	}
+}
+
 let connection: Misskey.ChannelConnection<Misskey.Channels['main']>;
 
 onMounted(() => {
 	connection = useStream().useChannel('main');
 	connection.on('notification', onNotification);
 	connection.on('notificationFlushed', reload);
+	document.addEventListener('visibilitychange', onVisibilityChange);
 });
 
 onActivated(() => {
@@ -91,6 +106,7 @@ onActivated(() => {
 
 onUnmounted(() => {
 	if (connection) connection.dispose();
+	document.removeEventListener('visibilitychange', onVisibilityChange);
 });
 
 defineExpose({