Merge pull request #933 from syuilo/sw

ServiceWorker support

8 files changed, 250 insertions, 27 deletions

diff --git a/src/web/app/boot.js b/src/web/app/boot.js
index ac6c18d649..4a8ea030a1 100644
--- a/src/web/app/boot.js
+++ b/src/web/app/boot.js
@@ -27,7 +27,9 @@
 	//   misskey.alice               => misskey
 	//   misskey.strawberry.pasta    => misskey
 	//   dev.misskey.arisu.tachibana => dev
-	let app = url.host.split('.')[0];
+	let app = url.host == 'localhost'
+		? 'misskey'
+		: url.host.split('.')[0];
 
 	// Detect the user language
 	// Note: The default language is English
diff --git a/src/web/app/common/mios.ts b/src/web/app/common/mios.ts
index 9704e92af8..cf7841d848 100644
--- a/src/web/app/common/mios.ts
+++ b/src/web/app/common/mios.ts
@@ -6,6 +6,9 @@ import HomeStreamManager from './scripts/streaming/home-stream-manager';
 import CONFIG from './scripts/config';
 import api from './scripts/api';
 
+declare var VERSION: string;
+declare var LANG: string;
+
 /**
  * Misskey Operating System
  */
@@ -33,20 +36,57 @@ export default class MiOS extends EventEmitter {
 	}
 
 	/**
+	 * Whether is debug mode
+	 */
+	public get debug() {
+		return localStorage.getItem('debug') == 'true';
+	}
+
+	/**
 	 * A connection manager of home stream
 	 */
 	public stream: HomeStreamManager;
 
+	/**
+	 * A registration of service worker
+	 */
+	private swRegistration: ServiceWorkerRegistration = null;
+
 	constructor() {
 		super();
 
 		//#region BIND
+		this.log = this.log.bind(this);
+		this.logInfo = this.logInfo.bind(this);
+		this.logWarn = this.logWarn.bind(this);
+		this.logError = this.logError.bind(this);
 		this.init = this.init.bind(this);
 		this.api = this.api.bind(this);
 		this.getMeta = this.getMeta.bind(this);
+		this.registerSw = this.registerSw.bind(this);
 		//#endregion
 	}
 
+	public log(...args) {
+		if (!this.debug) return;
+		console.log.apply(null, args);
+	}
+
+	public logInfo(...args) {
+		if (!this.debug) return;
+		console.info.apply(null, args);
+	}
+
+	public logWarn(...args) {
+		if (!this.debug) return;
+		console.warn.apply(null, args);
+	}
+
+	public logError(...args) {
+		if (!this.debug) return;
+		console.error.apply(null, args);
+	}
+
 	/**
 	 * Initialize MiOS (boot)
 	 * @param callback A function that call when initialized
@@ -126,12 +166,21 @@ export default class MiOS extends EventEmitter {
 
 			// Finish init
 			callback();
+
+			//#region Post
+
+			// Init service worker
+			this.registerSw();
+
+			//#endregion
 		};
 
 		// Get cached account data
 		const cachedMe = JSON.parse(localStorage.getItem('me'));
 
+		// キャッシュがあったとき
 		if (cachedMe) {
+			// とりあえずキャッシュされたデータでお茶を濁して(?)おいて、
 			fetched(cachedMe);
 
 			// 後から新鮮なデータをフェッチ
@@ -148,6 +197,67 @@ export default class MiOS extends EventEmitter {
 	}
 
 	/**
+	 * Register service worker
+	 */
+	private registerSw() {
+		// Check whether service worker and push manager supported
+		const isSwSupported =
+			('serviceWorker' in navigator) && ('PushManager' in window);
+
+		// Reject when browser not service worker supported
+		if (!isSwSupported) return;
+
+		// Reject when not signed in to Misskey
+		if (!this.isSignedin) return;
+
+		// When service worker activated
+		navigator.serviceWorker.ready.then(registration => {
+			this.log('[sw] ready: ', registration);
+
+			this.swRegistration = registration;
+
+			// Options of pushManager.subscribe
+			const opts = {
+				// A boolean indicating that the returned push subscription
+				// will only be used for messages whose effect is made visible to the user.
+				userVisibleOnly: true
+			};
+
+			// Subscribe push notification
+			this.swRegistration.pushManager.subscribe(opts).then(subscription => {
+				this.log('[sw] Subscribe OK:', subscription);
+
+				function encode(buffer: ArrayBuffer) {
+					return btoa(String.fromCharCode.apply(null, new Uint8Array(buffer)));
+				}
+
+				// Register
+				this.api('sw/register', {
+					endpoint: subscription.endpoint,
+					auth: encode(subscription.getKey('auth')),
+					publickey: encode(subscription.getKey('p256dh'))
+				});
+			}).then(() => {
+				this.logInfo('[sw] Server Stored Subscription.');
+			}).catch(err => {
+				this.logError('[sw] Subscribe Error:', err);
+			});
+		});
+
+		// The path of service worker script
+		const sw = `/sw.${VERSION}.${LANG}.js`;
+
+		// Register service worker
+		navigator.serviceWorker.register(sw).then(registration => {
+			// 登録成功
+			this.logInfo('[sw] Registration successful with scope: ', registration.scope);
+		}).catch(err => {
+			// 登録失敗 :(
+			this.logError('[sw] Registration failed: ', err);
+		});
+	}
+
+	/**
 	 * Misskey APIにリクエストします
 	 * @param endpoint エンドポイント名
 	 * @param data パラメータ
diff --git a/src/web/app/common/scripts/compose-notification.ts b/src/web/app/common/scripts/compose-notification.ts
new file mode 100644
index 0000000000..181dca734f
--- /dev/null
+++ b/src/web/app/common/scripts/compose-notification.ts
@@ -0,0 +1,52 @@
+import getPostSummary from '../../../../common/get-post-summary';
+
+type Notification = {
+	title: string;
+	body: string;
+	icon: string;
+	onclick?: any;
+};
+
+// TODO: i18n
+
+export default function(type, data): Notification {
+	switch (type) {
+		case 'drive_file_created':
+			return {
+				title: 'ファイルがアップロードされました',
+				body: data.name,
+				icon: data.url + '?thumbnail&size=64'
+			};
+
+		case 'mention':
+			return {
+				title: `${data.user.name}さんから:`,
+				body: getPostSummary(data),
+				icon: data.user.avatar_url + '?thumbnail&size=64'
+			};
+
+		case 'reply':
+			return {
+				title: `${data.user.name}さんから返信:`,
+				body: getPostSummary(data),
+				icon: data.user.avatar_url + '?thumbnail&size=64'
+			};
+
+		case 'quote':
+			return {
+				title: `${data.user.name}さんが引用:`,
+				body: getPostSummary(data),
+				icon: data.user.avatar_url + '?thumbnail&size=64'
+			};
+
+		case 'unread_messaging_message':
+			return {
+				title: `${data.user.name}さんからメッセージ:`,
+				body: data.text, // TODO: getMessagingMessageSummary(data),
+				icon: data.user.avatar_url + '?thumbnail&size=64'
+			};
+
+		default:
+			return null;
+	}
+}
diff --git a/src/web/app/common/scripts/config.ts b/src/web/app/common/scripts/config.ts
index c5015622f0..b4801a44de 100644
--- a/src/web/app/common/scripts/config.ts
+++ b/src/web/app/common/scripts/config.ts
@@ -1,9 +1,11 @@
-const Url = new URL(location.href);
+const _url = new URL(location.href);
 
-const isRoot = Url.host.split('.')[0] == 'misskey';
+const isRoot = _url.host == 'localhost'
+	? true
+	: _url.host.split('.')[0] == 'misskey';
 
-const host = isRoot ? Url.host : Url.host.substring(Url.host.indexOf('.') + 1, Url.host.length);
-const scheme = Url.protocol;
+const host = isRoot ? _url.host : _url.host.substring(_url.host.indexOf('.') + 1, _url.host.length);
+const scheme = _url.protocol;
 const url = `${scheme}//${host}`;
 const apiUrl = `${scheme}//api.${host}`;
 const chUrl = `${scheme}//ch.${host}`;
diff --git a/src/web/app/desktop/script.ts b/src/web/app/desktop/script.ts
index bc0fc8dfe3..694cb7879c 100644
--- a/src/web/app/desktop/script.ts
+++ b/src/web/app/desktop/script.ts
@@ -11,9 +11,9 @@ import * as riot from 'riot';
 import init from '../init';
 import route from './router';
 import fuckAdBlock from './scripts/fuck-ad-block';
-import getPostSummary from '../../../common/get-post-summary';
 import MiOS from '../common/mios';
 import HomeStreamManager from '../common/scripts/streaming/home-stream-manager';
+import composeNotification from '../common/scripts/compose-notification';
 
 /**
  * init
@@ -55,41 +55,46 @@ function registerNotifications(stream: HomeStreamManager) {
 
 	function attach(connection) {
 		connection.on('drive_file_created', file => {
-			const n = new Notification('ファイルがアップロードされました', {
-				body: file.name,
-				icon: file.url + '?thumbnail&size=64'
+			const _n = composeNotification('drive_file_created', file);
+			const n = new Notification(_n.title, {
+				body: _n.body,
+				icon: _n.icon
 			});
 			setTimeout(n.close.bind(n), 5000);
 		});
 
 		connection.on('mention', post => {
-			const n = new Notification(`${post.user.name}さんから:`, {
-				body: getPostSummary(post),
-				icon: post.user.avatar_url + '?thumbnail&size=64'
+			const _n = composeNotification('mention', post);
+			const n = new Notification(_n.title, {
+				body: _n.body,
+				icon: _n.icon
 			});
 			setTimeout(n.close.bind(n), 6000);
 		});
 
 		connection.on('reply', post => {
-			const n = new Notification(`${post.user.name}さんから返信:`, {
-				body: getPostSummary(post),
-				icon: post.user.avatar_url + '?thumbnail&size=64'
+			const _n = composeNotification('reply', post);
+			const n = new Notification(_n.title, {
+				body: _n.body,
+				icon: _n.icon
 			});
 			setTimeout(n.close.bind(n), 6000);
 		});
 
 		connection.on('quote', post => {
-			const n = new Notification(`${post.user.name}さんが引用:`, {
-				body: getPostSummary(post),
-				icon: post.user.avatar_url + '?thumbnail&size=64'
+			const _n = composeNotification('quote', post);
+			const n = new Notification(_n.title, {
+				body: _n.body,
+				icon: _n.icon
 			});
 			setTimeout(n.close.bind(n), 6000);
 		});
 
 		connection.on('unread_messaging_message', message => {
-			const n = new Notification(`${message.user.name}さんからメッセージ:`, {
-				body: message.text, // TODO: getMessagingMessageSummary(message),
-				icon: message.user.avatar_url + '?thumbnail&size=64'
+			const _n = composeNotification('unread_messaging_message', message);
+			const n = new Notification(_n.title, {
+				body: _n.body,
+				icon: _n.icon
 			});
 			n.onclick = () => {
 				n.close();
diff --git a/src/web/app/init.ts b/src/web/app/init.ts
index 0bb687ec6a..652cbfde40 100644
--- a/src/web/app/init.ts
+++ b/src/web/app/init.ts
@@ -18,7 +18,9 @@ require('./common/tags');
 
 console.info(`Misskey v${VERSION} (葵 aoi)`);
 
-document.domain = CONFIG.host;
+if (CONFIG.host != 'localhost') {
+	document.domain = CONFIG.host;
+}
 
 { // Set lang attr
 	const html = document.documentElement;
diff --git a/src/web/app/sw.js b/src/web/app/sw.js
new file mode 100644
index 0000000000..a7c84d022a
--- /dev/null
+++ b/src/web/app/sw.js
@@ -0,0 +1,33 @@
+/**
+ * Service Worker
+ */
+
+import composeNotification from './common/scripts/compose-notification';
+
+// インストールされたとき
+self.addEventListener('install', () => {
+	console.info('installed');
+});
+
+// プッシュ通知を受け取ったとき
+self.addEventListener('push', ev => {
+	console.log('pushed');
+
+	// クライアント取得
+	ev.waitUntil(self.clients.matchAll({
+		includeUncontrolled: true
+	}).then(clients => {
+		// クライアントがあったらストリームに接続しているということなので通知しない
+		if (clients.length != 0) return;
+
+		const { type, body } = ev.data.json();
+
+		console.log(type, body);
+
+		const n = composeNotification(type, body);
+		return self.registration.showNotification(n.title, {
+			body: n.body,
+			icon: n.icon,
+		});
+	}));
+});
diff --git a/src/web/server.ts b/src/web/server.ts
index dde4eca5ec..0be07b2d8b 100644
--- a/src/web/server.ts
+++ b/src/web/server.ts
@@ -37,29 +37,46 @@ app.use((req, res, next) => {
  * Static assets
  */
 app.use(favicon(`${__dirname}/assets/favicon.ico`));
-app.get('/manifest.json', (req, res) => res.sendFile(`${__dirname}/assets/manifest.json`));
 app.get('/apple-touch-icon.png', (req, res) => res.sendFile(`${__dirname}/assets/apple-touch-icon.png`));
 app.use('/assets', express.static(`${__dirname}/assets`, {
 	maxAge: ms('7 days')
 }));
 
+app.get(/^\/sw\.(.+?)\.js$/, (req, res) => res.sendFile(`${__dirname}/assets/sw.${req.params[0]}.js`));
+
 /**
- * Common API
+ * Manifest
  */
-app.get(/\/api:url/, require('./service/url-preview'));
+app.get('/manifest.json', (req, res) => {
+	const manifest = require((`${__dirname}/assets/manifest.json`));
+
+	// Service Worker
+	if (config.sw) {
+		manifest['gcm_sender_id'] = config.sw.gcm_sender_id;
+	}
+
+	res.send(manifest);
+});
 
 /**
  * Serve config
  */
 app.get('/config.json', (req, res) => {
-	res.send({
+	const conf = {
 		recaptcha: {
 			siteKey: config.recaptcha.siteKey
 		}
-	});
+	};
+
+	res.send(conf);
 });
 
 /**
+ * Common API
+ */
+app.get(/\/api:url/, require('./service/url-preview'));
+
+/**
  * Routing
  */
 app.get('*', (req, res) => {