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

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

* Update Changelog

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 ### Client
 - Enhance: 管理しているチャンネルの見分けがつきやすくなるように
+- Enhance: プッシュ通知を行うための権限確認をより確実に行うように
 - Fix: 紙吹雪エフェクトがアニメーション設定を考慮せず常に表示される問題を修正
 - Fix: ナビゲーションバーのリアルタイムモード切替ボタンの状態をよりわかりやすく表示するように
 - Fix: ページのタイトルが長いとき、はみ出る問題を修正

locales/index.d.ts

@@ -4106,6 +4106,18 @@ export interface Locale extends ILocale {
      * 端末の電池消費量が増加する可能性があります。
      */
     "sendPushNotificationReadMessageCaption": string;
+    /**
+     * ブラウザの通知設定を許可してください
+     */
+    "pleaseAllowPushNotification": string;
+    /**
+     * 通知の送信権限の取得に失敗しました
+     */
+    "browserPushNotificationDisabled": string;
+    /**
+     * {serverName}から通知を送信する権限がありません。ブラウザの設定から通知を許可して再度お試しください。
+     */
+    "browserPushNotificationDisabledDescription": ParameterizedString<"serverName">;
     /**
      * 最大化
      */

locales/ja-JP.yml

@@ -1022,6 +1022,9 @@ pushNotificationAlreadySubscribed: "プッシュ通知は有効です"
 pushNotificationNotSupported: "ブラウザかサーバーがプッシュ通知に非対応"
 sendPushNotificationReadMessage: "通知が既読になったらプッシュ通知を削除する"
 sendPushNotificationReadMessageCaption: "端末の電池消費量が増加する可能性があります。"
+pleaseAllowPushNotification: "ブラウザの通知設定を許可してください"
+browserPushNotificationDisabled: "通知の送信権限の取得に失敗しました"
+browserPushNotificationDisabledDescription: "{serverName}から通知を送信する権限がありません。ブラウザの設定から通知を許可して再度お試しください。"
 windowMaximize: "最大化"
 windowMinimize: "最小化"
 windowRestore: "元に戻す"

packages/frontend/src/boot/main-boot.ts

@@ -303,13 +303,6 @@ export async function mainBoot() {
 			});
 		}
 
-		if ('Notification' in window) {
-			// 許可を得ていなかったらリクエスト
-			if (Notification.permission === 'default') {
-				Notification.requestPermission();
-			}
-		}
-
 		if (store.s.realtimeMode) {
 			const stream = useStream();
 

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),
 	})