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>
This commit is contained in:
tamaina
GitHub
parent
9b3458fba0
commit
40bfa3ef04
12 changed files with 217 additions and 98 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
44
src/client/scripts/i18n.ts
Normal file
44
src/client/scripts/i18n.ts
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
68
src/client/scripts/initialize-sw.ts
Normal file
68
src/client/scripts/initialize-sw.ts
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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'), {
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
import { I18n } from '@/i18n';
|
||||
|
||||
export const i18n = new I18n({
|
||||
// TODO
|
||||
});
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}>`;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
});
|
||||
|
|
|
|||
10
yarn.lock
10
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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue