save lang in idb

package.json

@@ -156,6 +156,7 @@
 		"http-proxy-agent": "4.0.1",
 		"http-signature": "1.3.5",
 		"https-proxy-agent": "5.0.0",
+		"idb-keyval": "5.0.1",
 		"insert-text-at-cursor": "0.3.0",
 		"is-root": "2.1.0",
 		"is-svg": "4.2.1",

src/client/init.ts

@@ -44,7 +44,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import widgets from '@/widgets';
 import directives from '@/directives';
 import components from '@/components';
-import { version, ui, lang, host, locale } from '@/config';
+import { version, ui, lang, host } from '@/config';
 import { router } from '@/router';
 import { applyTheme } from '@/scripts/theme';
 import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
@@ -178,8 +178,7 @@ fetchInstance().then(() => {
 		navigator.serviceWorker.ready.then(registration => {
 			registration.active?.postMessage({
 				msg: 'initialize',
-				locale,
+				lang,
-				i: toRaw($i),
 			});
 			// SEE: https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe#Parameters
 			registration.pushManager.subscribe({

src/client/sw/compose-notification.ts

@@ -1,10 +1,15 @@
+/**
+ * Notification composer of Service Worker
+ */
+declare var self: ServiceWorkerGlobalScope;
+
 import { getNoteSummary } from '../../misc/get-note-summary';
 import getUserName from '../../misc/get-user-name';
 
-export default async function(type, data, i18n): Promise<[string, NotificationOptions] | null> {
+export default async function(type, data, i18n): Promise<[string, NotificationOptions] | null | undefined> {
 	if (!i18n) {
 		console.log('no i18n');
-		return null;
+		return;
 	}
 
 	switch (type) {

src/client/sw/sw.ts

@@ -3,19 +3,29 @@
  */
 declare var self: ServiceWorkerGlobalScope;
 
+import { get, set } from 'idb-keyval';
 import composeNotification from '@/sw/compose-notification';
 import { I18n } from '@/scripts/i18n';
 
-export let i18n: I18n<any>;
+//#region Variables
-
-let i: string;
-
 const version = _VERSION_;
 const cacheName = `mk-cache-${version}`;
-
 const apiUrl = `${location.origin}/api/`;
 
-// インストールされたとき
+let lang: string;
+let i18n: I18n<any>;
+const pushesPool = [] as any[];
+//#endregion
+
+//#region Startup
+get('lang').then(async prelang => {
+	if (!prelang) return;
+	lang = prelang;
+	return fetchLocale();
+});
+//#endregion
+
+//#region Lifecycle: Install
 self.addEventListener('install', ev => {
 	ev.waitUntil(
 		caches.open(cacheName)
@@ -27,7 +37,9 @@ self.addEventListener('install', ev => {
 			.then(() => self.skipWaiting())
 	);
 });
+//#endregion
 
+//#region Lifecycle: Activate
 self.addEventListener('activate', ev => {
 	ev.waitUntil(
 		caches.keys()
@@ -39,7 +51,9 @@ self.addEventListener('activate', ev => {
 			.then(() => self.clients.claim())
 	);
 });
+//#endregion
 
+//#region When: Fetching
 self.addEventListener('fetch', ev => {
 	if (ev.request.method !== 'GET' || ev.request.url.startsWith(apiUrl)) return;
 	ev.respondWith(
@@ -52,8 +66,9 @@ self.addEventListener('fetch', ev => {
 			})
 	);
 });
+//#endregion
 
-// プッシュ通知を受け取ったとき
+//#region When: Caught Notification
 self.addEventListener('push', ev => {
 	// クライアント取得
 	ev.waitUntil(self.clients.matchAll({
@@ -64,12 +79,18 @@ self.addEventListener('push', ev => {
 
 		const { type, body } = ev.data?.json();
 
+		// localeを読み込めておらずi18nがundefinedだった場合はpushesPoolにためておく
+		if (!i18n) return pushesPool.push({ type, body });
+
 		const n = await composeNotification(type, body, i18n);
+
 		if (n) return self.registration.showNotification(...n);
+		
 	}));
 });
+//#endregion
 
-// クライアントのpostMessageを処理します
+//#region When: Caught a message from the client
 self.addEventListener('message', ev => {
 	switch(ev.data) {
 		case 'clear':
@@ -83,9 +104,26 @@ self.addEventListener('message', ev => {
 
 		if (otype === 'object') {
 			if (ev.data.msg === 'initialize') {
-				i = ev.data.$i;
+				lang = ev.data.lang;
-				i18n = new I18n(ev.data.locale);
+
+				set('lang', lang);
+
+				fetchLocale();
 			}
 		}
 	}
 });
+//#endregion
+
+//#region Function: (Re)Load i18n instance
+async function fetchLocale() {
+	i18n = new I18n(await (await fetch(`/assets/locales/${lang}.${version}.json`)).json());
+
+	//#region i18nをきちんと読み込んだ後にやりたい処理
+	for (const { type, body } of pushesPool) {
+		const n = await composeNotification(type, body, i18n);
+		if (n) self.registration.showNotification(...n);
+	}
+	//#endregion
+}
+//#endregion

src/misc/get-notification-summary.ts

@@ -1,29 +0,0 @@
-import getUserName from './get-user-name';
-import { getNoteSummary } from './get-note-summary';
-import getReactionEmoji from './get-reaction-emoji';
-import locales = require('../../locales');
-
-/**
- * 通知を表す文字列を取得します。
- * @param notification 通知
- */
-export default function(notification: any): string {
-	switch (notification.type) {
-		case 'follow':
-			return `${getUserName(notification.user)}にフォローされました`;
-		case 'mention':
-			return `言及されました:\n${getUserName(notification.user)}「${getNoteSummary(notification.note, locales['ja-JP'])}」`;
-		case 'reply':
-			return `返信されました:\n${getUserName(notification.user)}「${getNoteSummary(notification.note, locales['ja-JP'])}」`;
-		case 'renote':
-			return `Renoteされました:\n${getUserName(notification.user)}「${getNoteSummary(notification.note, locales['ja-JP'])}」`;
-		case 'quote':
-			return `引用されました:\n${getUserName(notification.user)}「${getNoteSummary(notification.note, locales['ja-JP'])}」`;
-		case 'reaction':
-			return `リアクションされました:\n${getUserName(notification.user)} <${getReactionEmoji(notification.reaction)}>「${getNoteSummary(notification.note, locales['ja-JP'])}」`;
-		case 'pollVote':
-			return `投票されました:\n${getUserName(notification.user)}「${getNoteSummary(notification.note, locales['ja-JP'])}」`;
-		default:
-			return `<不明な通知タイプ: ${notification.type}>`;
-	}
-}

src/server/web/boot.js

@@ -73,7 +73,7 @@
 	//#endregion
 
 	//#region Service Worker
-	navigator.serviceWorker.register(`/sw.${v}.js`);
+	navigator.serviceWorker.register(`/sw.js`);
 	//#endregion
 
 	//#region Theme

src/server/web/index.ts

@@ -73,8 +73,8 @@ router.get('/apple-touch-icon.png', async ctx => {
 });
 
 // ServiceWorker
-router.get(/^\/sw\.(.+?)\.js$/, async ctx => {
+router.get('/sw.js', async ctx => {
-	await send(ctx as any, `/assets/sw.${ctx.params[0]}.js`, {
+	await send(ctx as any, `/assets/sw.${config.version}.js`, {
 		root: client
 	});
 });

yarn.lock

@@ -5039,6 +5039,11 @@ icss-utils@^5.0.0:
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.0.0.tgz#03ed56c3accd32f9caaf1752ebf64ef12347bb84"
   integrity sha512-aF2Cf/CkEZrI/vsu5WI/I+akFgdbwQHVE9YRZxATrhH4PVIe6a3BIjwjEcW+z+jP/hNh+YvM3lAAn1wJQ6opSg==
 
+idb-keyval@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-5.0.1.tgz#d3913debfb58edee299da5cf2dded6c2670c05ef"
+  integrity sha512-bfi+Znn6oSPPgGcVUj2tYMIOQ5TD6V1qj50SdKQecGZx9lqUATcQ7ArHOt9sPcEhACoYe//yr2igmS6SMc59SA==
+
 ieee754@1.1.13, ieee754@^1.1.13, ieee754@^1.1.4:
   version "1.1.13"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"