Resolve #7106

src/client/init.ts

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