Resurrect Service Worker (#7108)

* Resolve #7106

* fix lint

* fix lint

* save lang in idb

* fix lint

* fix

* cache locale file

* fix lint

* ✌️

* wip

* fix [wip]

* fix [wip]

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

package.json

@@ -130,7 +130,6 @@
 		"css-loader": "5.0.1",
 		"cssnano": "4.1.10",
 		"dateformat": "4.5.1",
-		"deep-entries": "3.1.0",
 		"diskusage": "1.1.3",
 		"double-ended-queue": "2.1.0-0",
 		"escape-regexp": "0.0.1",
@@ -155,6 +154,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/i18n.ts

@@ -1,49 +1,6 @@
 import { markRaw } from 'vue';
 import { locale } from '@/config';
-
+import { I18n } from '@/scripts/i18n';
-export class I18n<T extends Record<string, any>> {
-	public locale: T;
-
-	constructor(locale: T) {
-		this.locale = locale;
-
-		if (_DEV_) {
-			console.log('i18n', this.locale);
-		}
-
-		//#region BIND
-		this.t = this.t.bind(this);
-		//#endregion
-	}
-
-	// string にしているのは、ドット区切りでのパス指定を許可するため
-	// なるべくこのメソッド使うよりもlocale直接参照の方がvueのキャッシュ効いてパフォーマンスが良いかも
-	public t(key: string, args?: Record<string, any>): string {
-		try {
-			let str = key.split('.').reduce((o, i) => o[i], this.locale) as string;
-
-			if (_DEV_) {
-				if (!str.includes('{')) {
-					console.warn(`i18n: '${key}' has no any arg. so ref prop directly instead of call this method.`);
-				}
-			}
-
-			if (args) {
-				for (const [k, v] of Object.entries(args)) {
-					str = str.replace(`{${k}}`, v);
-				}
-			}
-			return str;
-		} catch (e) {
-			if (_DEV_) {
-				console.warn(`missing localization '${key}'`);
-				return `⚠'${key}'⚠`;
-			}
-
-			return key;
-		}
-	}
-}
 
 export const i18n = markRaw(new I18n(locale));
 

src/client/init.ts

@@ -57,6 +57,7 @@ import { fetchInstance, instance } from '@/instance';
 import { makeHotkey } from './scripts/hotkey';
 import { search } from './scripts/search';
 import { getThemes } from './theme-store';
+import { initializeSw } from './scripts/initialize-sw';
 
 console.info(`Misskey v${version}`);
 
@@ -171,7 +172,7 @@ fetchInstance().then(() => {
 	localStorage.setItem('v', instance.version);
 
 	// Init service worker
-	//if (this.store.state.instance.meta.swPublickey) this.registerSw(this.store.state.instance.meta.swPublickey);
+	initializeSw();
 });
 
 stream.init($i);

src/client/scripts/i18n.ts

@@ -0,0 +1,44 @@
+// Notice: Service Workerでも使用します
+export class I18n<T extends Record<string, any>> {
+	public locale: T;
+
+	constructor(locale: T) {
+		this.locale = locale;
+
+		if (_DEV_) {
+			console.log('i18n', this.locale);
+		}
+
+		//#region BIND
+		this.t = this.t.bind(this);
+		//#endregion
+	}
+
+	// string にしているのは、ドット区切りでのパス指定を許可するため
+	// なるべくこのメソッド使うよりもlocale直接参照の方がvueのキャッシュ効いてパフォーマンスが良いかも
+	public t(key: string, args?: Record<string, any>): string {
+		try {
+			let str = key.split('.').reduce((o, i) => o[i], this.locale) as string;
+
+			if (_DEV_) {
+				if (!str.includes('{')) {
+					console.warn(`i18n: '${key}' has no any arg. so ref prop directly instead of call this method.`);
+				}
+			}
+
+			if (args) {
+				for (const [k, v] of Object.entries(args)) {
+					str = str.replace(`{${k}}`, v);
+				}
+			}
+			return str;
+		} catch (e) {
+			if (_DEV_) {
+				console.warn(`missing localization '${key}'`);
+				return `⚠'${key}'⚠`;
+			}
+
+			return key;
+		}
+	}
+}

src/client/scripts/initialize-sw.ts

@@ -0,0 +1,68 @@
+import { instance } from '@/instance';
+import { $i } from '@/account';
+import { api } from '@/os';
+import { lang } from '@/config';
+
+export async function initializeSw() {
+	if (instance.swPublickey &&
+		('serviceWorker' in navigator) &&
+		('PushManager' in window) &&
+		$i && $i.token) {
+		navigator.serviceWorker.register(`/sw.js`);
+
+		navigator.serviceWorker.ready.then(registration => {
+			registration.active?.postMessage({
+				msg: 'initialize',
+				lang,
+			});
+			// SEE: https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe#Parameters
+			registration.pushManager.subscribe({
+				userVisibleOnly: true,
+				applicationServerKey: urlBase64ToUint8Array(instance.swPublickey)
+			}).then(subscription => {
+				function encode(buffer: ArrayBuffer | null) {
+					return btoa(String.fromCharCode.apply(null, new Uint8Array(buffer)));
+				}
+
+				// Register
+				api('sw/register', {
+					endpoint: subscription.endpoint,
+					auth: encode(subscription.getKey('auth')),
+					publickey: encode(subscription.getKey('p256dh'))
+				});
+			})
+			// When subscribe failed
+			.catch(async (err: Error) => {
+				// 通知が許可されていなかったとき
+				if (err.name === 'NotAllowedError') {
+					return;
+				}
+
+				// 違うapplicationServerKey (または gcm_sender_id)のサブスクリプションが
+				// 既に存在していることが原因でエラーになった可能性があるので、
+				// そのサブスクリプションを解除しておく
+				const subscription = await registration.pushManager.getSubscription();
+				if (subscription) subscription.unsubscribe();
+			});
+		});
+	}
+}
+
+/**
+ * Convert the URL safe base64 string to a Uint8Array
+ * @param base64String base64 string
+ */
+function urlBase64ToUint8Array(base64String: string): Uint8Array {
+	const padding = '='.repeat((4 - base64String.length % 4) % 4);
+	const base64 = (base64String + padding)
+		.replace(/-/g, '+')
+		.replace(/_/g, '/');
+
+	const rawData = window.atob(base64);
+	const outputArray = new Uint8Array(rawData.length);
+
+	for (let i = 0; i < rawData.length; ++i) {
+		outputArray[i] = rawData.charCodeAt(i);
+	}
+	return outputArray;
+}

src/client/sw/compose-notification.ts

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

src/client/sw/i18n.ts

@@ -1,5 +0,0 @@
-import { I18n } from '@/i18n';
-
-export const i18n = new I18n({
-	// TODO
-});

src/client/sw/sw.ts

@@ -3,17 +3,30 @@
  */
 declare var self: ServiceWorkerGlobalScope;
 
+import { get, set } from 'idb-keyval';
 import composeNotification from '@/sw/compose-notification';
+import { I18n } from '@/scripts/i18n';
 
+//#region Variables
 const version = _VERSION_;
 const cacheName = `mk-cache-${version}`;
-
 const apiUrl = `${location.origin}/api/`;
 
-// インストールされたとき
+let lang: string;
-self.addEventListener('install', ev => {
+let i18n: I18n<any>;
-	console.info('installed');
+let pushesPool: 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)
 			.then(cache => {
@@ -24,7 +37,9 @@ self.addEventListener('install', ev => {
 			.then(() => self.skipWaiting())
 	);
 });
+//#endregion
 
+//#region Lifecycle: Activate
 self.addEventListener('activate', ev => {
 	ev.waitUntil(
 		caches.keys()
@@ -36,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(
@@ -49,8 +66,9 @@ self.addEventListener('fetch', ev => {
 			})
 	);
 });
+//#endregion
 
-// プッシュ通知を受け取ったとき
+//#region When: Caught Notification
 self.addEventListener('push', ev => {
 	// クライアント取得
 	ev.waitUntil(self.clients.matchAll({
@@ -59,8 +77,65 @@ self.addEventListener('push', ev => {
 		// クライアントがあったらストリームに接続しているということなので通知しない
 		if (clients.length != 0) return;
 
-		const { type, body } = ev.data.json();
+		const { type, body } = ev.data?.json();
 
-		return self.registration.showNotification(...(await composeNotification(type, body)));
+		// 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
+
+//#region When: Caught a message from the client
+self.addEventListener('message', ev => {
+	switch(ev.data) {
+		case 'clear':
+			return; // TODO
+		default:
+			break;
+	}
+
+	if (typeof ev.data === 'object') {
+		// E.g. '[object Array]' → 'array'
+		const otype = Object.prototype.toString.call(ev.data).slice(8, -1).toLowerCase();
+
+		if (otype === 'object') {
+			if (ev.data.msg === 'initialize') {
+				lang = ev.data.lang;
+				set('lang', lang);
+				fetchLocale();
+			}
+		}
+	}
+});
+//#endregion
+
+//#region Function: (Re)Load i18n instance
+async function fetchLocale() {
+	//#region localeファイルの読み込み
+	// Service Workerは何度も起動しそのたびにlocaleを読み込むので、CacheStorageを使う
+	const localeUrl = `/assets/locales/${lang}.${version}.json`;
+	let localeRes = await caches.match(localeUrl);
+
+	if (!localeRes) {
+		localeRes = await fetch(localeUrl);
+		const clone = localeRes?.clone();
+		if (!clone?.clone().ok) return;
+
+		caches.open(cacheName).then(cache => cache.put(localeUrl, clone));
+	}
+
+	i18n = new I18n(await localeRes.json());
+	//#endregion
+
+	//#region i18nをきちんと読み込んだ後にやりたい処理
+	for (const { type, body } of pushesPool) {
+		const n = await composeNotification(type, body, i18n);
+		if (n) self.registration.showNotification(...n);
+	}
+	pushesPool = [];
+	//#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

@@ -33,9 +33,8 @@
 		}
 
 		const res = await fetch(`/assets/locales/${lang}.${v}.json`);
-		const json = await res.json();
 		localStorage.setItem('lang', lang);
-		localStorage.setItem('locale', JSON.stringify(json));
+		localStorage.setItem('locale', await res.text());
 	}
 	//#endregion
 

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

@@ -3260,11 +3260,6 @@ decompress-response@^6.0.0:
   dependencies:
     mimic-response "^3.1.0"
 
-deep-entries@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/deep-entries/-/deep-entries-3.1.0.tgz#e456aa791d01b045641c75e41e170c0c95a9d472"
-  integrity sha512-pCpcCqx/hclnT2e4mMlM9geG8XIaxWN+yNKJHHwu1FZyYKErKU/fPztYYSk2HwnqRPf55cDEXraV6MLv8I5FrA==
-
 deep-eql@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-3.0.1.tgz#dfc9404400ad1c8fe023e7da1df1c147c4b444df"
@@ -5011,6 +5006,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"