From 40bfa3ef0407f83484031bfe74dcecb149c202a0 Mon Sep 17 00:00:00 2001 From: tamaina Date: Sat, 6 Feb 2021 18:55:53 +0900 Subject: [PATCH] Resurrect Service Worker (#7108) * Resolve #7106 * fix lint * fix lint * save lang in idb * fix lint * fix * cache locale file * fix lint * :v: * wip * fix [wip] * fix [wip] Co-authored-by: syuilo --- package.json | 2 +- src/client/i18n.ts | 45 +------------- src/client/init.ts | 3 +- src/client/scripts/i18n.ts | 44 +++++++++++++ src/client/scripts/initialize-sw.ts | 68 ++++++++++++++++++++ src/client/sw/compose-notification.ts | 13 +++- src/client/sw/i18n.ts | 5 -- src/client/sw/sw.ts | 89 ++++++++++++++++++++++++--- src/misc/get-notification-summary.ts | 29 --------- src/server/web/boot.js | 3 +- src/server/web/index.ts | 4 +- yarn.lock | 10 +-- 12 files changed, 217 insertions(+), 98 deletions(-) create mode 100644 src/client/scripts/i18n.ts create mode 100644 src/client/scripts/initialize-sw.ts delete mode 100644 src/client/sw/i18n.ts delete mode 100644 src/misc/get-notification-summary.ts diff --git a/package.json b/package.json index 64cefa16b..569ed26ea 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 aeecb58a3..fbc10a0ba 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> { - 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 { - 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 f329d2225..17feca4c8 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 000000000..d535e236b --- /dev/null +++ b/src/client/scripts/i18n.ts @@ -0,0 +1,44 @@ +// Notice: Service Workerでも使用します +export class I18n> { + 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 { + 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 000000000..d6dbd5dbd --- /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 17421db5c..e9586dd57 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 9b3e3b2f4..000000000 --- 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 91d668c27..c92cae129 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; +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 aade3f75b..000000000 --- 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 eb7c21fb6..2bd306ea9 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 caa3f65c2..f3442c619 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 b19feac23..4eecfd41f 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"