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 2021-02-06 18:55:53 +09:00 committed by GitHub
parent 9b3458fba0
commit 40bfa3ef04
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 217 additions and 98 deletions

View file

@ -130,7 +130,6 @@
"css-loader": "5.0.1", "css-loader": "5.0.1",
"cssnano": "4.1.10", "cssnano": "4.1.10",
"dateformat": "4.5.1", "dateformat": "4.5.1",
"deep-entries": "3.1.0",
"diskusage": "1.1.3", "diskusage": "1.1.3",
"double-ended-queue": "2.1.0-0", "double-ended-queue": "2.1.0-0",
"escape-regexp": "0.0.1", "escape-regexp": "0.0.1",
@ -155,6 +154,7 @@
"http-proxy-agent": "4.0.1", "http-proxy-agent": "4.0.1",
"http-signature": "1.3.5", "http-signature": "1.3.5",
"https-proxy-agent": "5.0.0", "https-proxy-agent": "5.0.0",
"idb-keyval": "5.0.1",
"insert-text-at-cursor": "0.3.0", "insert-text-at-cursor": "0.3.0",
"is-root": "2.1.0", "is-root": "2.1.0",
"is-svg": "4.2.1", "is-svg": "4.2.1",

View file

@ -1,49 +1,6 @@
import { markRaw } from 'vue'; import { markRaw } from 'vue';
import { locale } from '@/config'; 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)); export const i18n = markRaw(new I18n(locale));

View file

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

View 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;
}
}
}

View 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;
}

View file

@ -1,8 +1,17 @@
/**
* Notification composer of Service Worker
*/
declare var self: ServiceWorkerGlobalScope;
import { getNoteSummary } from '../../misc/get-note-summary'; import { getNoteSummary } from '../../misc/get-note-summary';
import getUserName from '../../misc/get-user-name'; 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) { switch (type) {
case 'driveFileCreated': // TODO (Server Side) case 'driveFileCreated': // TODO (Server Side)
return [i18n.t('_notification.fileUploaded'), { return [i18n.t('_notification.fileUploaded'), {

View file

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

View file

@ -3,17 +3,30 @@
*/ */
declare var self: ServiceWorkerGlobalScope; declare var self: ServiceWorkerGlobalScope;
import { get, set } from 'idb-keyval';
import composeNotification from '@/sw/compose-notification'; import composeNotification from '@/sw/compose-notification';
import { I18n } from '@/scripts/i18n';
//#region Variables
const version = _VERSION_; const version = _VERSION_;
const cacheName = `mk-cache-${version}`; const cacheName = `mk-cache-${version}`;
const apiUrl = `${location.origin}/api/`; 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( ev.waitUntil(
caches.open(cacheName) caches.open(cacheName)
.then(cache => { .then(cache => {
@ -24,7 +37,9 @@ self.addEventListener('install', ev => {
.then(() => self.skipWaiting()) .then(() => self.skipWaiting())
); );
}); });
//#endregion
//#region Lifecycle: Activate
self.addEventListener('activate', ev => { self.addEventListener('activate', ev => {
ev.waitUntil( ev.waitUntil(
caches.keys() caches.keys()
@ -36,7 +51,9 @@ self.addEventListener('activate', ev => {
.then(() => self.clients.claim()) .then(() => self.clients.claim())
); );
}); });
//#endregion
//#region When: Fetching
self.addEventListener('fetch', ev => { self.addEventListener('fetch', ev => {
if (ev.request.method !== 'GET' || ev.request.url.startsWith(apiUrl)) return; if (ev.request.method !== 'GET' || ev.request.url.startsWith(apiUrl)) return;
ev.respondWith( ev.respondWith(
@ -49,8 +66,9 @@ self.addEventListener('fetch', ev => {
}) })
); );
}); });
//#endregion
// プッシュ通知を受け取ったとき //#region When: Caught Notification
self.addEventListener('push', ev => { self.addEventListener('push', ev => {
// クライアント取得 // クライアント取得
ev.waitUntil(self.clients.matchAll({ ev.waitUntil(self.clients.matchAll({
@ -59,8 +77,65 @@ self.addEventListener('push', ev => {
// クライアントがあったらストリームに接続しているということなので通知しない // クライアントがあったらストリームに接続しているということなので通知しない
if (clients.length != 0) return; 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

View file

@ -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}>`;
}
}

View file

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

View file

@ -73,8 +73,8 @@ router.get('/apple-touch-icon.png', async ctx => {
}); });
// ServiceWorker // 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 root: client
}); });
}); });

View file

@ -3260,11 +3260,6 @@ decompress-response@^6.0.0:
dependencies: dependencies:
mimic-response "^3.1.0" 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: deep-eql@^3.0.1:
version "3.0.1" version "3.0.1"
resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-3.0.1.tgz#dfc9404400ad1c8fe023e7da1df1c147c4b444df" 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" 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== 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: ieee754@1.1.13, ieee754@^1.1.13, ieee754@^1.1.4:
version "1.1.13" version "1.1.13"
resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84" resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"