wip

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
  */
@@ -142,7 +145,7 @@ export default class MiOS extends EventEmitter {
 				navigator.serviceWorker.ready.then(this.swSubscribe);
 
 				// Register service worker
-				navigator.serviceWorker.register('/sw.js').then(registration => {
+				navigator.serviceWorker.register(`/sw.${VERSION}.${LANG}.js`).then(registration => {
 					// 登録成功
 					console.info('ServiceWorker registration successful with scope: ', registration.scope);
 				}).catch(err => {

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

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

src/web/app/sw.js

@@ -0,0 +1,30 @@
+/**
+ * Service Worker
+ */
+
+import composeNotification from './common/scripts/compose-notification';
+
+// インストールされたとき
+self.addEventListener('install', () => {
+	console.log('[sw]', 'Your ServiceWorker is installed');
+});
+
+// プッシュ通知を受け取ったとき
+self.addEventListener('push', ev => {
+	// クライアント取得
+	self.clients.matchAll({
+		includeUncontrolled: true
+	}).then(clients => {
+		// クライアントがあったらストリームに接続しているということなので通知しない
+		if (clients.length != 0) return;
+
+		const { type, body } = ev.data.json();
+		const n = composeNotification(type, body);
+		if (n) {
+			self.registration.showNotification(n.title, {
+				body: n.body,
+				icon: n.icon,
+			});
+		}
+	});
+});