fix(nortification): WebKit 系ブラウザにおいて通知の許可を求める popup が出ない問題の代替案

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/components/Toast/AToast.vue

@@ -26,20 +26,22 @@ const iconNameMap: Record<Toast['type'], string> = {
 const useAutoHide = (props: { toast: Toast }) => {
   const { deleteToast } = useToastStore()
 
-  let timer: number | undefined
+  let timer: NodeJS.Timeout
 
   const remove = () => {
     deleteToast(props.toast.id)
   }
 
-  onMounted(() => {
-    timer = window.setTimeout(() => {
-      remove()
-    }, props.toast.timeout)
-  })
-  onUnmounted(() => {
-    window.clearTimeout(timer)
-  })
+  if (props.toast.timeout < Infinity) {
+    onMounted(() => {
+      timer = setTimeout(() => {
+        remove()
+      }, props.toast.timeout)
+    })
+    onUnmounted(() => {
+      clearTimeout(timer)
+    })
+  }
 
   return { remove }
 }
@@ -56,7 +58,7 @@ const { remove } = useAutoHide(props)
 
 const onClick = () => {
   if (props.toast.onClick) {
-    props.toast.onClick()
+    props.toast.onClick(props.toast.id)
   } else {
     remove()
   }

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)

src/store/ui/toast.ts

@@ -23,7 +23,7 @@ export interface Toast {
    *
    * デフォルトはトーストの削除
    */
-  onClick?: () => unknown
+  onClick?: (id: number) => unknown
   /**
    * 自動付与されるid
    */
@@ -39,28 +39,24 @@ const useToastStorePinia = defineStore('ui/toast', () => {
   let nextId = 0
 
   const addToast = (toast: ToastOption) => {
+    const id = nextId++
     toasts.value.unshift({
       ...toast,
       timeout: toast.timeout ?? DEFAULT_TOAST_TIMEOUT,
-      id: nextId
+      id
     })
-    nextId++
 
     while (MAX_TOAST_COUNT < toasts.value.length) {
       toasts.value.pop()
     }
-  }
 
-  const addSuccessToast = (text: string) => {
-    addToast({ type: 'success', text })
-  }
-  const addErrorToast = (text: string) => {
-    addToast({ type: 'error', text })
-  }
-  const addInfoToast = (text: string) => {
-    addToast({ type: 'info', text })
+    return id
   }
 
+  const addSuccessToast = (text: string) => addToast({ type: 'success', text })
+  const addErrorToast = (text: string) => addToast({ type: 'error', text })
+  const addInfoToast = (text: string) => addToast({ type: 'info', text })
+
   const deleteToast = (id: number) => {
     const index = toasts.value.findIndex(toast => toast.id === id)
     toasts.value.splice(index, 1)