From c44c95d6dd0dea3790ba1e464ded9f40ed2064be Mon Sep 17 00:00:00 2001 From: tamaina Date: Sat, 23 Jan 2021 00:56:06 +0900 Subject: [PATCH] save lang in idb --- package.json | 1 + src/client/init.ts | 5 +-- src/client/sw/compose-notification.ts | 9 ++++- src/client/sw/sw.ts | 58 ++++++++++++++++++++++----- src/misc/get-notification-summary.ts | 29 -------------- src/server/web/boot.js | 2 +- src/server/web/index.ts | 4 +- yarn.lock | 5 +++ 8 files changed, 66 insertions(+), 47 deletions(-) delete mode 100644 src/misc/get-notification-summary.ts diff --git a/package.json b/package.json index 0c790899eb..e6158d1023 100644 --- a/package.json +++ b/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", diff --git a/src/client/init.ts b/src/client/init.ts index 7d83ae58e1..6c1645867e 100644 --- a/src/client/init.ts +++ b/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, - i: toRaw($i), + lang, }); // SEE: https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe#Parameters registration.pushManager.subscribe({ diff --git a/src/client/sw/compose-notification.ts b/src/client/sw/compose-notification.ts index c336b8994d..e9586dd574 100644 --- a/src/client/sw/compose-notification.ts +++ b/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) { diff --git a/src/client/sw/sw.ts b/src/client/sw/sw.ts index 89860f07c0..6466caa998 100644 --- a/src/client/sw/sw.ts +++ b/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; - -let i: string; - +//#region Variables const version = _VERSION_; const cacheName = `mk-cache-${version}`; - const apiUrl = `${location.origin}/api/`; -// インストールされたとき +let lang: string; +let i18n: I18n; +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; - i18n = new I18n(ev.data.locale); + lang = ev.data.lang; + + 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 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 dce56e1d09..395128b8af 100644 --- a/src/server/web/boot.js +++ b/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 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 bd73c4e2ec..3847db67e3 100644 --- a/yarn.lock +++ b/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"