enhance(frontend): ブラウザの通知権限をより確実に取得できるように (#16758)

* enhance(frontend): ブラウザの通知権限をより確実に取得できるように

* Update Changelog

1 files changed, 21 insertions, 3 deletions

diff --git a/packages/frontend/src/components/MkPushNotificationAllowButton.vue b/packages/frontend/src/components/MkPushNotificationAllowButton.vue
index 697346020c..38441b0ea6 100644
--- a/packages/frontend/src/components/MkPushNotificationAllowButton.vue
+++ b/packages/frontend/src/components/MkPushNotificationAllowButton.vue
@@ -42,10 +42,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { instanceName } from '@@/js/config.js';
 import { $i } from '@/i.js';
 import MkButton from '@/components/MkButton.vue';
 import { instance } from '@/instance.js';
-import { apiWithDialog, promiseDialog } from '@/os.js';
+import { apiWithDialog, promiseDialog, alert } from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { getAccounts } from '@/accounts.js';
@@ -72,11 +73,28 @@ const supported = ref(false);
 const pushSubscription = ref<PushSubscription | null>(null);
 const pushRegistrationInServer = ref<{ state?: string; key?: string; userId: string; endpoint: string; sendReadMessage: boolean; } | undefined>();
 
-function subscribe() {
+async function subscribe() {
 	if (!registration.value || !supported.value || !instance.swPublickey) return;
 
+	if ('Notification' in window) {
+		let permission = Notification.permission;
+
+		if (Notification.permission === 'default') {
+			permission = await promiseDialog(Notification.requestPermission(), null, null, i18n.ts.pleaseAllowPushNotification);
+		}
+
+		if (permission !== 'granted') {
+			alert({
+				type: 'error',
+				title: i18n.ts.browserPushNotificationDisabled,
+				text: i18n.tsx.browserPushNotificationDisabledDescription({ serverName: instanceName }),
+			});
+			return;
+		}
+	}
+
 	// SEE: https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe#Parameters
-	return promiseDialog(registration.value.pushManager.subscribe({
+	await promiseDialog(registration.value.pushManager.subscribe({
 		userVisibleOnly: true,
 		applicationServerKey: urlBase64ToUint8Array(instance.swPublickey),
 	})