enhance: カスタム絵文字の更新をサーバーに確認してクライアントキャッシュを更新するように

CHANGELOG.md

@@ -17,6 +17,7 @@
 - Feat: コントロールパネルから二要素認証を解除できるように
 - Feat: 条件に一致したURLプレビューのサムネイルを隠すことができるように  
   (Based on https://github.com/MisskeyIO/misskey/pull/214)
+- Fix: クライアントを閉じている間に追加・変更されたカスタム絵文字が、クライアントのキャッシュを削除するか期限切れになるまで反映されない問題を修正
 
 ### Client
 - 2025.4.0 以前の設定情報の移行処理が削除されました
@@ -38,6 +39,7 @@
 - Fix: 非ログイン時トップページをスクロール操作できないことがある問題を修正
 - Fix: ローカルユーザーへのホスト付きメンションが本文に含まれる指名ノートの作成時、投稿フォームにて、当該ユーザーが宛先に含まれていても正しく認識されない問題を修正
 - Fix: ドライブの「このファイルからノートを作成」やギャラリーの「ノートで共有」、誕生日ウィジェットからのノート作成において、通常投稿の下書きが表示される問題を修正
+- Fix: セッション中にカスタム絵文字が追加・変更されても、既に描画済みの絵文字に反映されない問題を修正
 
 ### Server
 - Feat: OpenTelemetryサポート

packages/backend/src/core/CustomEmojiService.ts

@@ -13,7 +13,7 @@ import { ModerationLogService } from '@/core/ModerationLogService.js';
 import { UtilityService } from '@/core/UtilityService.js';
 import { bindThis } from '@/decorators.js';
 import { DI } from '@/di-symbols.js';
-import { MemoryKVCache, RedisSingleCache } from '@/misc/cache.js';
+import { MemoryKVCache, MemorySingleCache, RedisSingleCache } from '@/misc/cache.js';
 import { sqlLikeEscape } from '@/misc/sql-like-escape.js';
 import type { EmojisRepository, MiRole, MiUser } from '@/models/_.js';
 import type { MiEmoji } from '@/models/Emoji.js';
@@ -57,9 +57,15 @@ export const fetchEmojisSortKeys = [
 ] as const;
 export type FetchEmojisSortKeys = typeof fetchEmojisSortKeys[number];
 
+export type LocalEmojisStats = {
+	count: number;
+	lastUpdatedAt: Date | null;
+};
+
 @Injectable()
 export class CustomEmojiService implements OnApplicationShutdown {
 	private emojisCache: MemoryKVCache<MiEmoji | null>;
+	private localEmojisStatsCache: MemorySingleCache<LocalEmojisStats>;
 	public localEmojisCache: RedisSingleCache<Map<string, MiEmoji>>;
 
 	constructor(
@@ -74,7 +80,7 @@ export class CustomEmojiService implements OnApplicationShutdown {
 		private globalEventService: GlobalEventService,
 	) {
 		this.emojisCache = new MemoryKVCache<MiEmoji | null>(1000 * 60 * 60 * 12); // 12h
-
+		this.localEmojisStatsCache = new MemorySingleCache<LocalEmojisStats>(1000 * 60 * 3); // 3m
 		this.localEmojisCache = new RedisSingleCache<Map<string, MiEmoji>>(this.redisClient, 'localEmojis', {
 			lifetime: 1000 * 60 * 30, // 30m
 			memoryCacheLifetime: 1000 * 60 * 3, // 3m
@@ -89,6 +95,12 @@ export class CustomEmojiService implements OnApplicationShutdown {
 		});
 	}
 
+	@bindThis
+	private refreshLocalEmojiCaches(): void {
+		this.localEmojisCache.refresh();
+		this.localEmojisStatsCache.delete();
+	}
+
 	@bindThis
 	public async add(data: {
 		originalUrl: string;
@@ -120,7 +132,7 @@ export class CustomEmojiService implements OnApplicationShutdown {
 		});
 
 		if (data.host == null) {
-			this.localEmojisCache.refresh();
+			this.refreshLocalEmojiCaches();
 
 			this.globalEventService.publishBroadcastStream('emojiAdded', {
 				emoji: await this.emojiEntityService.packDetailed(emoji.id),
@@ -182,7 +194,7 @@ export class CustomEmojiService implements OnApplicationShutdown {
 			roleIdsThatCanBeUsedThisEmojiAsReaction: data.roleIdsThatCanBeUsedThisEmojiAsReaction ?? undefined,
 		});
 
-		this.localEmojisCache.refresh();
+		this.refreshLocalEmojiCaches();
 
 		const packed = await this.emojiEntityService.packDetailed(emoji.id);
 
@@ -224,7 +236,7 @@ export class CustomEmojiService implements OnApplicationShutdown {
 			});
 		}
 
-		this.localEmojisCache.refresh();
+		this.refreshLocalEmojiCaches();
 
 		this.globalEventService.publishBroadcastStream('emojiUpdated', {
 			emojis: await this.emojiEntityService.packDetailedMany(ids),
@@ -240,7 +252,7 @@ export class CustomEmojiService implements OnApplicationShutdown {
 			aliases: aliases,
 		});
 
-		this.localEmojisCache.refresh();
+		this.refreshLocalEmojiCaches();
 
 		this.globalEventService.publishBroadcastStream('emojiUpdated', {
 			emojis: await this.emojiEntityService.packDetailedMany(ids),
@@ -260,7 +272,7 @@ export class CustomEmojiService implements OnApplicationShutdown {
 			});
 		}
 
-		this.localEmojisCache.refresh();
+		this.refreshLocalEmojiCaches();
 
 		this.globalEventService.publishBroadcastStream('emojiUpdated', {
 			emojis: await this.emojiEntityService.packDetailedMany(ids),
@@ -276,7 +288,7 @@ export class CustomEmojiService implements OnApplicationShutdown {
 			category: category,
 		});
 
-		this.localEmojisCache.refresh();
+		this.refreshLocalEmojiCaches();
 
 		this.globalEventService.publishBroadcastStream('emojiUpdated', {
 			emojis: await this.emojiEntityService.packDetailedMany(ids),
@@ -292,7 +304,7 @@ export class CustomEmojiService implements OnApplicationShutdown {
 			license: license,
 		});
 
-		this.localEmojisCache.refresh();
+		this.refreshLocalEmojiCaches();
 
 		this.globalEventService.publishBroadcastStream('emojiUpdated', {
 			emojis: await this.emojiEntityService.packDetailedMany(ids),
@@ -305,7 +317,7 @@ export class CustomEmojiService implements OnApplicationShutdown {
 
 		await this.emojisRepository.delete(emoji.id);
 
-		this.localEmojisCache.refresh();
+		this.refreshLocalEmojiCaches();
 
 		this.globalEventService.publishBroadcastStream('emojiDeleted', {
 			emojis: [await this.emojiEntityService.packDetailed(emoji)],
@@ -336,7 +348,7 @@ export class CustomEmojiService implements OnApplicationShutdown {
 			}
 		}
 
-		this.localEmojisCache.refresh();
+		this.refreshLocalEmojiCaches();
 
 		this.globalEventService.publishBroadcastStream('emojiDeleted', {
 			emojis: await this.emojiEntityService.packDetailedMany(emojis),
@@ -601,6 +613,22 @@ export class CustomEmojiService implements OnApplicationShutdown {
 		};
 	}
 
+	@bindThis
+	public async getLocalEmojisStats(): Promise<LocalEmojisStats> {
+		return this.localEmojisStatsCache.fetch(async () => {
+			const raw = await this.emojisRepository.createQueryBuilder('emoji')
+				.select('COUNT(*)', 'count')
+				.addSelect('MAX(emoji.updatedAt)', 'lastUpdatedAt')
+				.where('emoji.host IS NULL')
+				.getRawOne<{ count: string; lastUpdatedAt: Date | null }>();
+
+			return {
+				count: raw ? Number(raw.count) : 0,
+				lastUpdatedAt: raw?.lastUpdatedAt ?? null,
+			};
+		});
+	}
+
 	@bindThis
 	public dispose(): void {
 		this.emojisCache.dispose();

packages/backend/src/server/api/endpoint-list.ts

@@ -196,6 +196,7 @@ export * as 'drive/stream' from './endpoints/drive/stream.js';
 export * as 'email-address/available' from './endpoints/email-address/available.js';
 export * as 'emoji' from './endpoints/emoji.js';
 export * as 'emojis' from './endpoints/emojis.js';
+export * as 'emojis/stats' from './endpoints/emojis/stats.js';
 export * as 'endpoint' from './endpoints/endpoint.js';
 export * as 'endpoints' from './endpoints/endpoints.js';
 export * as 'export-custom-emojis' from './endpoints/export-custom-emojis.js';

packages/backend/src/server/api/endpoints/emojis/stats.ts

@@ -0,0 +1,53 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { CustomEmojiService } from '@/core/CustomEmojiService.js';
+
+export const meta = {
+	tags: ['meta'],
+
+	requireCredential: false,
+
+	res: {
+		type: 'object',
+		optional: false, nullable: false,
+		properties: {
+			count: {
+				type: 'number',
+				optional: false, nullable: false,
+			},
+			lastUpdatedAt: {
+				type: 'string',
+				optional: false, nullable: true,
+				format: 'date-time',
+			},
+		},
+	},
+} as const;
+
+export const paramDef = {
+	type: 'object',
+	properties: {
+	},
+	required: [],
+} as const;
+
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
+	constructor(
+		private customEmojiService: CustomEmojiService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const stats = await this.customEmojiService.getLocalEmojisStats();
+
+			return {
+				count: stats.count,
+				lastUpdatedAt: stats.lastUpdatedAt ? stats.lastUpdatedAt.toISOString() : null,
+			};
+		});
+	}
+}

packages/frontend/src/boot/common.ts

@@ -26,7 +26,7 @@ import { getAccountFromId } from '@/utility/get-account-from-id.js';
 import { deckStore } from '@/ui/deck/deck-store.js';
 import { analytics, initAnalytics } from '@/analytics.js';
 import { miLocalStorage } from '@/local-storage.js';
-import { fetchCustomEmojis } from '@/custom-emojis.js';
+import { fetchCustomEmojis, isInitialLoading as isCustomEmojiCacheNotFound } from '@/custom-emojis.js';
 import { prefer } from '@/preferences.js';
 import { $i } from '@/i.js';
 import { launchPlugins } from '@/plugin.js';
@@ -242,9 +242,13 @@ export async function common(createVue: () => Promise<App<Element>>) {
 	}
 	//#endregion
 
-	try {
-		await fetchCustomEmojis();
-	} catch (err) { /* empty */ }
+	if (isCustomEmojiCacheNotFound) {
+		// まだキャッシュしたことがない場合は、取得を待つ
+		await fetchCustomEmojis(true).catch(() => { /* empty */ });
+	} else {
+		// 既にキャッシュがあるなら、バックグラウンドで更新を試みる（描画の方はリアクティビティにより更新される）
+		fetchCustomEmojis().catch(() => { /* empty */ });
+	}
 
 	// analytics
 	fetchInstanceMetaPromise.then(async () => {

packages/frontend/src/components/MkEmojiPicker.vue

@@ -257,8 +257,8 @@ watch(q, () => {
 				}
 			}
 		} else {
-			if (customEmojisMap.has(newQ)) {
-				matches.add(customEmojisMap.get(newQ)!);
+			if (customEmojisMap.value.has(newQ)) {
+				matches.add(customEmojisMap.value.get(newQ)!);
 			}
 			if (matches.size >= max) return matches;
 
@@ -405,7 +405,7 @@ function getDef(emoji: string): string | Misskey.entities.EmojiSimple | UnicodeE
 		// カスタム絵文字が存在する場合はその情報を持つオブジェクトを返し、
 		// サーバの管理画面から削除された等で情報が見つからない場合は名前の文字列をそのまま返しておく（undefinedを返すとエラーになるため）
 		const name = emoji.replaceAll(':', '');
-		return customEmojisMap.get(name) ?? emoji;
+		return customEmojisMap.value.get(name) ?? emoji;
 	} else {
 		return getUnicodeEmoji(emoji);
 	}
@@ -476,7 +476,7 @@ function done(query?: string): boolean | void {
 	if (query == null || typeof query !== 'string') return;
 
 	const q2 = query.replace(/:/g, '');
-	const exactMatchCustom = customEmojisMap.get(q2);
+	const exactMatchCustom = customEmojisMap.value.get(q2);
 	if (exactMatchCustom) {
 		chosen(exactMatchCustom);
 		return true;

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -61,7 +61,7 @@ const buttonEl = useTemplateRef('buttonEl');
 const emojiName = computed(() => props.reaction.replace(/:/g, '').replace(/@\./, ''));
 
 const canToggle = computed(() => {
-	const emoji = customEmojisMap.get(emojiName.value) ?? getUnicodeEmojiOrNull(props.reaction);
+	const emoji = customEmojisMap.value.get(emojiName.value) ?? getUnicodeEmojiOrNull(props.reaction);
 
 	// TODO
 	//return !props.reaction.match(/@\w/) && $i && emoji && checkReactionPermissions($i, props.note, emoji);
@@ -106,7 +106,7 @@ async function toggleReaction() {
 					noteId: props.noteId,
 					reaction: props.reaction,
 				}).then(() => {
-					const emoji = customEmojisMap.get(emojiName.value);
+					const emoji = customEmojisMap.value.get(emojiName.value);
 					if (emoji == null && getUnicodeEmojiOrNull(props.reaction) == null) {
 						return;
 					}
@@ -140,7 +140,7 @@ async function toggleReaction() {
 			noteId: props.noteId,
 			reaction: props.reaction,
 		}).then(() => {
-			const emoji = customEmojisMap.get(emojiName.value);
+			const emoji = customEmojisMap.value.get(emojiName.value);
 			if (emoji == null && getUnicodeEmojiOrNull(props.reaction) == null) {
 				return;
 			}

packages/frontend/src/components/MkReactionsViewer.vue

@@ -76,7 +76,7 @@ function onMockToggleReaction(emoji: string, count: number) {
 function canReact(reaction: string) {
 	if (!$i) return false;
 	// TODO: CheckPermissions
-	return !reaction.match(/@\w/) && (customEmojisMap.has(reaction) || isSupportedEmoji(reaction));
+	return !reaction.match(/@\w/) && (customEmojisMap.value.has(reaction) || isSupportedEmoji(reaction));
 }
 
 watch([() => props.reactions, () => props.maxNumber], ([newSource, maxNumber]) => {

packages/frontend/src/components/global/MkCustomEmoji.vue

@@ -78,7 +78,7 @@ const rawUrl = computed(() => {
 		return props.url;
 	}
 	if (isLocal.value) {
-		return customEmojisMap.get(customEmojiName.value)?.url ?? null;
+		return customEmojisMap.value.get(customEmojiName.value)?.url ?? null;
 	}
 	return props.host ? `/emoji/${customEmojiName.value}@${props.host}.webp` : `/emoji/${customEmojiName.value}.webp`;
 });