diff --git a/package.json b/package.json
index 64cefa16b5..569ed26ea1 100644
--- a/package.json
+++ b/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",
diff --git a/src/client/i18n.ts b/src/client/i18n.ts
index aeecb58a3e..fbc10a0bad 100644
--- a/src/client/i18n.ts
+++ b/src/client/i18n.ts
@@ -1,49 +1,6 @@
import { markRaw } from 'vue';
import { locale } from '@/config';
-
-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;
- }
- }
-}
+import { I18n } from '@/scripts/i18n';
export const i18n = markRaw(new I18n(locale));
diff --git a/src/client/init.ts b/src/client/init.ts
index f329d22251..17feca4c8b 100644
--- a/src/client/init.ts
+++ b/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);
diff --git a/src/client/scripts/i18n.ts b/src/client/scripts/i18n.ts
new file mode 100644
index 0000000000..d535e236bb
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/src/client/scripts/initialize-sw.ts b/src/client/scripts/initialize-sw.ts
new file mode 100644
index 0000000000..d6dbd5dbd4
--- /dev/null
+++ b/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;
+}
diff --git a/src/client/sw/compose-notification.ts b/src/client/sw/compose-notification.ts
index 17421db5c8..e9586dd574 100644
--- a/src/client/sw/compose-notification.ts
+++ b/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'), {
diff --git a/src/client/sw/i18n.ts b/src/client/sw/i18n.ts
deleted file mode 100644
index 9b3e3b2f4d..0000000000
--- a/src/client/sw/i18n.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { I18n } from '@/i18n';
-
-export const i18n = new I18n({
- // TODO
-});
diff --git a/src/client/sw/sw.ts b/src/client/sw/sw.ts
index 91d668c27b..c92cae1292 100644
--- a/src/client/sw/sw.ts
+++ b/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/`;
-// インストールされたとき
-self.addEventListener('install', ev => {
- console.info('installed');
+let lang: string;
+let i18n: I18n<any>;
+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
diff --git a/src/misc/get-notification-summary.ts b/src/misc/get-notification-summary.ts
deleted file mode 100644
index aade3f75be..0000000000
--- a/src/misc/get-notification-summary.ts
+++ /dev/null
@@ -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}>`;
- }
-}
diff --git a/src/server/web/boot.js b/src/server/web/boot.js
index eb7c21fb63..2bd306ea94 100644
--- a/src/server/web/boot.js
+++ b/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
diff --git a/src/server/web/index.ts b/src/server/web/index.ts
index caa3f65c27..f3442c6199 100644
--- a/src/server/web/index.ts
+++ b/src/server/web/index.ts
@@ -73,8 +73,8 @@ router.get('/apple-touch-icon.png', async ctx => {
});
// ServiceWorker
-router.get(/^\/sw\.(.+?)\.js$/, async ctx => {
- await send(ctx as any, `/assets/sw.${ctx.params[0]}.js`, {
+router.get('/sw.js', async ctx => {
+ await send(ctx as any, `/assets/sw.${config.version}.js`, {
root: client
});
});
diff --git a/yarn.lock b/yarn.lock
index b19feac238..4eecfd41f8 100644
--- a/yarn.lock
+++ b/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"