https://github.com/syuilo/misskey/pull/7129#discussion_r599518698, https://github.com/syuilo/misskey/pull/7129#discussion_r599504827

src/client/components/notification.vue

@@ -94,12 +94,18 @@ export default defineComponent({
 			getNoteSummary: (text: string) => getNoteSummary(text, i18n.locale),
 			followRequestDone: false,
 			groupInviteDone: false,
-			connection: null,
-			readObserver: null,
+			readObserver: null as IntersectionObserver | null,
 			faIdCardAlt, faPlus, faQuoteLeft, faQuoteRight, faRetweet, faReply, faAt, faClock, faCheck, faPollH
 		};
 	},
 
+	watch: {
+		'notification.isRead'() {
+			this.readObserver?.unobserve(this.$el);
+			this.readObserver = null;
+		},
+	},
+
 	mounted() {
 		if (!this.notification.isRead) {
 			this.readObserver = new IntersectionObserver((entries, observer) => {
@@ -107,30 +113,19 @@ export default defineComponent({
 				os.stream.send('readNotification', {
 					id: this.notification.id
 				});
-				entries.map(({ target }) => observer.unobserve(target));
+				for (const { target } of entries) {
+					observer.unobserve(target);
+				}
+				this.readObserver = null;
 			});
 
 			this.readObserver.observe(this.$el);
-
-			this.connection = os.stream.useSharedConnection('main');
-
-			// 既読処理
-			// notification.isReadは更新しないので注意
-			this.connection.on('readAllNotifications', () => {
-				this.readObserver.unobserve(this.$el);
-			});
-			this.connection.on('readNotifications', notificationIds => {
-				if (notificationIds.includes(this.notification.id)) {
-					this.readObserver.unobserve(this.$el);
-				}
-			})
 		}
 	},
 
 	beforeUnmount() {
 		if (!this.notification.isRead) {
-			this.readObserver.unobserve(this.$el);
-			this.connection.dispose();
+			this.readObserver?.unobserve(this.$el);
 		}
 	},
 

src/client/components/notifications.vue

@@ -87,9 +87,11 @@ export default defineComponent({
 		this.connection = os.stream.useSharedConnection('main');
 		this.connection.on('notification', this.onNotification);
 
-		// queueに対してのみ既読処理を行う
 		this.connection.on('readAllNotifications', () => {
 			this.queue = this.queue.map(x => markNotificationRead(x));
+			for (const item of this.items) {
+				item.isRead = true;
+			}
 		});
 		this.connection.on('readNotifications', notificationIds => {
 			if (this.queue.length === 0) return;
@@ -98,6 +100,9 @@ export default defineComponent({
 				if (notificationIds.includes(this.queue[i].id)) {
 					this.queue[i] = markNotificationRead(this.queue[i]);
 				}
+				if (notificationIds.includes(this.items[i].id)) {
+					this.items[i].isRead = true;
+				}
 			}
 		});
 	},

src/client/ui/_common_/common.vue

@@ -51,11 +51,11 @@ export default defineComponent({
 			const connection = stream.useSharedConnection('main', 'UI');
 			connection.on('notification', onNotification);
 
+			//#region Listen message from SW
+			if ('serviceWorker' in navigator) {
 				const navHook = inject('navHook', null);
 				const sideViewHook = inject('sideViewHook', null);
 
-			//#region Listen message from SW
-			if ('serviceWorker' in navigator) {
 				navigator.serviceWorker.addEventListener('message', ev => {
 					if (_DEV_) {
 						console.log('sw msg', ev.data);