feat: ブラウザが WebKit の場合に通知の許可を求める toast を出す

Author: uni-kakurenbo

src/components/Settings/BrowserTab/NotificationState.vue

@@ -19,17 +19,16 @@
 
 <script lang="ts">
 import { ref } from 'vue'
-import { requestNotificationPermission } from '/@/lib/notification/requestPermission'
 import AToggle from '/@/components/UI/AToggle.vue'
 
 const useNotificationPermission = () => {
   const permission = ref<NotificationPermission>()
-  permission.value = window.Notification?.permission
+  permission.value = Notification?.permission
 
   const requestPermission = async () => {
     // permission.valueがundefinedでないときは、
     // 上の取得の仕方からNotificationが存在していることが確定している
-    permission.value = await requestNotificationPermission()
+    permission.value = await Notification.requestPermission()
   }
 
   return { permission, requestPermission }

src/lib/notification/notification.ts

@@ -1,21 +1,21 @@
 import type { NotificationClickEvent } from '/@/types/InlineNotificationReplies'
 import apis from '/@/lib/apis'
 import router from '/@/router'
-import { isIOSApp } from '/@/lib/dom/browser'
+import { isIOSApp, isPWA, isWebKit } from '/@/lib/dom/browser'
 import type { ChannelId, DMChannelId } from '/@/types/entity-ids'
 import { createNotificationArgumentsCreator } from './notificationArguments'
 import type { OnCanUpdate } from './updateToast'
 import { setupUpdateToast } from './updateToast'
 import type { FirebasePayloadData } from './firebase'
 import { setupFirebaseApp, getFirebaseApp } from './firebase'
-import { requestNotificationPermission } from './requestPermission'
 import {
   getMessaging,
   onMessage,
   getToken as getTokenFb,
   deleteToken as deleteTokenFb
 } from 'firebase/messaging'
 import { wait } from '/@/lib/basic/timer'
+import { useToastStore } from '/@/store/ui/toast'
 
 const appName = window.traQConfig.name || 'traQ'
 const ignoredChannels = window.traQConfig.inlineReplyDisableChannels ?? []
@@ -48,7 +48,7 @@ const notify = async (
       return regist.showNotification(notificationTitle, notificationOptions)
     }
   }
-  if (window.Notification?.permission === 'granted') {
+  if (Notification?.permission === 'granted') {
     return new Notification(notificationTitle, notificationOptions)
   }
   return null
@@ -63,10 +63,30 @@ export const connectFirebase = async (onCanUpdate: OnCanUpdate) => {
     }
   }
 
-  if (window.Notification) {
+  if (Notification) {
     if (Notification.permission === 'default') {
-      // 上でNotificationが存在していることを確認している
-      const permission = await requestNotificationPermission()
+      // 上で Notification が存在していることを確認している
+      const permission = await (() => {
+        // WebKit ではユーザージェスチャーを起点としたポップアップのみ許可される
+        if (isWebKit() && isPWA()) {
+          const { addToast, deleteToast } = useToastStore()
+
+          return new Promise<NotificationPermission>((resolve, reject) => {
+            addToast({
+              type: 'info',
+              text: '【通知を有効にしてください】\nメッセージ受信時に通知が届くようになります。(クリックで許可)',
+              timeout: Infinity,
+              onClick: id => {
+                deleteToast(id)
+                Notification.requestPermission().then(resolve).catch(reject)
+              }
+            })
+          })
+        } else {
+          return Notification.requestPermission()
+        }
+      })()
+
       if (permission === 'granted') {
         notify({ title: `ようこそ${appName}へ！！` }, true)
       } else {
@@ -102,9 +122,9 @@ export const connectFirebase = async (onCanUpdate: OnCanUpdate) => {
 
   setupUpdateToast(registration, onCanUpdate)
 
-  if (window.Notification?.permission !== 'granted') {
+  if (Notification?.permission !== 'granted') {
     // eslint-disable-next-line no-console
-    console.warn(`[Notification] permission ${window.Notification?.permission}`)
+    console.warn(`[Notification] permission ${Notification?.permission}`)
     return
   }
   if (!firebaseApp) {
@@ -162,7 +182,7 @@ export const connectFirebase = async (onCanUpdate: OnCanUpdate) => {
 }
 
 export const deleteToken = () => {
-  if (window.Notification?.permission !== 'granted') return
+  if (Notification?.permission !== 'granted') return
 
   const firebaseApp = getFirebaseApp()
   const messaging = getMessaging(firebaseApp)