Notifications APIと権限処理

Notification.permissionは、現在の許可状態を示す静的な文字列です。"granted"（ユーザーが許可した）、"denied"（ユーザーがブロックした）、"default"（まだ確認していない）のいずれかになります。通知を表示しようとする前にこのプロパティを確認し、不要なエラーを避けてください。

Notification.requestPermission()は、新しい許可状態を表す文字列で解決されるPromiseを返します。ページの読み込み時ではなく、明確なユーザー操作に応じてのみ呼び出してください。読み込み直後に表示される許可ダイアログはブラウザによって無視または抑制されるうえ、文脈なしに表示されるとユーザーに不快感を与えます。

最も効果的なパターンは、メリットを説明するアプリ内の案内を表示し、ユーザーが「通知を有効にする」をクリックしてからrequestPermission()を呼び出すことです。これにより、ユーザーが判断するための情報を提供でき、許可される割合が高まり、ブラウザによってサイトが迷惑なサイトと判定されることも避けられます。ページの読み込み時に許可を求めてはいけません。

new Notification(title, options)は、システム通知を作成して表示します。最初の引数はタイトル文字列です。2番目の引数であるoptionsオブジェクトには、body（サブタイトルのテキスト）、icon（画像URL）、重複排除に使用するtagなどのプロパティを指定できます。許可が"granted"の場合にのみ動作します。

主な通知オプションには、タイトルの下に説明文を表示するbody、小さな画像を表示するicon、OSの通知領域に表示される小さな単色アイコンを指定するbadge、大きなインライン画像を表示するimage、同じタグを持つ以前の通知を置き換えるtag、ユーザーが操作するまで通知を表示し続けるrequireInteraction: trueがあります。

Notificationインスタンスは複数のイベントを発生させます。ユーザーが通知をクリックするとonclickが発生します（ウィンドウにフォーカスを移し、画面遷移するために使用します）。通知が閉じられるとoncloseが発生し、作成中に問題が発生するとonerrorが発生します。new Notification()を呼び出した後、返されたインスタンスにハンドラーを設定してください。

返されたNotificationインスタンスを変数に保存し、notification.close()を呼び出すと、通知をプログラムで閉じることができます。これは、一定時間が経過すると意味を失う時間依存の通知に便利です。setTimeoutと組み合わせて、数秒後に自動的に閉じることもできます。

Notifications APIにはセキュアコンテキストが必要です。HTTPページでは、ブラウザによってはtypeof Notification === 'undefined'になったり、API自体が無効になったりします。これは、悪意のあるサイトが偽のシステムメッセージを大量に表示するのを防ぐためのセキュリティ対策です。使用する前に、必ず利用可能か確認してください。

useNotificationsフックでは、requestPermission()とshowNotification(title, options)という2つのメソッドを公開できます。フック内部で現在の許可状態を追跡し、リクエスト後に更新します。許可の確認はフックが内部で処理するため、コンポーネントは許可状態を気にせずshowNotificationを呼び出せます。

Page Visibility APIは、document.hiddenとvisibilitychangeイベントを提供します。通知は、ユーザーがそのタブをすでに見ていないときに最も効果を発揮します。ページがすでに前面に表示されているときに重複した通知を出さないよう、通知を表示する前にdocument.hidden === trueを確認してください。

ここで示しているNotifications APIは、ページ自体からローカルで発生させる通知向けです。ページが閉じているときにも届くプッシュ通知には、Push APIとService Workerを組み合わせる必要があります。Service Workerがバックグラウンドでプッシュイベントを受け取り、self.registration.showNotification()を呼び出します。

次のうち、Notification.permissionの有効な値ではないものはどれですか？

Notification.permissionはgranted、denied、defaultのいずれかになります。許可はページの読み込み時ではなく、必ずユーザー操作に応じてリクエストしてください。new Notification(title, options)で通知を作成し、onclickを処理してウィンドウにフォーカスを移します。Visibility APIと組み合わせ、タブが非表示のときだけ通知を表示してください。