natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Resolve #7106

This commit is contained in:
tamaina 2021-01-21 21:17:22 +09:00
parent 3762cdc8c0
commit 08c2086167
9 changed files with 150 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -130,7 +130,6 @@
"css-loader": "5.0.1",
"cssnano": "4.1.10",
"dateformat": "4.3.1",
"deep-entries": "3.1.0",
"diskusage": "1.1.3",
"double-ended-queue": "2.1.0-0",
"escape-regexp": "0.0.1",

45
src/client/i18n.ts
View File

@ -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));

68
src/client/init.ts
View File

@ -38,18 +38,18 @@ if (localStorage.getItem('vuex') != null) {
import * as Sentry from '@sentry/browser';
import { Integrations } from '@sentry/tracing';
import { createApp, watch } from 'vue';
import { createApp, toRaw, watch } from 'vue';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import widgets from '@/widgets';
import directives from '@/directives';
import components from '@/components';
import { version, ui, lang, host } from '@/config';
import { version, ui, lang, host, locale } from '@/config';
import { router } from '@/router';
import { applyTheme } from '@/scripts/theme';
import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
import { i18n } from '@/i18n';
import { stream, isMobile, dialog, post } from '@/os';
import { api, stream, isMobile, dialog, post } from '@/os';
import * as sound from '@/scripts/sound';
import { $i, refreshAccount, login, updateAccount, signout } from '@/account';
import { defaultStore, ColdDeviceStorage } from '@/store';
@ -171,7 +171,48 @@ 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);
if (instance.swPublickey &&
('serviceWorker' in navigator) &&
('PushManager' in window) && $i && $i.token
) {
navigator.serviceWorker.ready.then(registration => {
registration.active?.postMessage({
msg: 'initialize',
locale,
i: toRaw($i),
});
// 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();
});
});
};
});
stream.init($i);
@ -354,3 +395,22 @@ if ($i) {
signout();
});
}
/**
* 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;
}

44
src/client/scripts/i18n.ts Normal file
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;
}
}
}

8
src/client/sw/compose-notification.ts
View File

@ -1,8 +1,12 @@
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> {
if (!i18n) {
console.log('no i18n')
return null
};
switch (type) {
case 'driveFileCreated': // TODO (Server Side)
return [i18n.t('_notification.fileUploaded'), {

5
src/client/sw/i18n.ts
View File

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

34
src/client/sw/sw.ts
View File

@ -4,6 +4,11 @@
declare var self: ServiceWorkerGlobalScope;
import composeNotification from '@/sw/compose-notification';
import { I18n } from '@/scripts/i18n';
export let i18n: I18n<any>;
let i: string;
const version = _VERSION_;
const cacheName = `mk-cache-${version}`;
@ -12,8 +17,6 @@ const apiUrl = `${location.origin}/api/`;
// インストールされたとき
self.addEventListener('install', ev => {
console.info('installed');
ev.waitUntil(
caches.open(cacheName)
.then(cache => {
@ -59,8 +62,31 @@ 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)));
const n = await composeNotification(type, body, i18n);
if (n) return self.registration.showNotification(...n);
}));
});
// クライアントのpostMessageを処理します
self.addEventListener('message', ev => {
switch(ev.data) {
case 'clear':
return; // TODO
default:
break;
}
if (typeof ev.data === 'object') {
const otype = Object.prototype.toString.call(ev.data).slice(8, -1).toLowerCase();
if (otype === 'object') {
if (ev.data.msg === 'initialize') {
console.log('initialize')
i = ev.data.$i;
i18n = new I18n(ev.data.locale);
}
}
}
});

7
src/server/web/boot.js
View File

@ -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,6 +72,10 @@
head.appendChild(script);
//#endregion
//#region Service Worker
navigator.serviceWorker.register(`/sw.${v}.js`)
//#endregion
//#region Theme
const theme = localStorage.getItem('theme');
if (theme) {

5
yarn.lock
View File

@ -3258,11 +3258,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"