Next.jsでWebプッシュを許可する

2024.05.05

Next.jsで通知を管理するコンポーネント

Next.jsでWebプッシュ通知を許可する方法を記載します。

ライブラリを使わず

通知の状態の取得
通知の状態に応じた出し分け

を簡単に行うことが出来ます！

検証した環境

14.1.3

Next.jsで通知を管理するコンポーネント

以下が通知を管理するためのコンポーネントです！

ManageNotification.tsx

'use client'
 
import { useEffect, useState } from 'react'
 
export function ManageNotification() {
  // 通知の許可状態を管理するstate
  const [notificationPermission, setNotificationPermission] = useState<
    NotificationPermission | undefined
  >()
 
  // コンポーネントのマウント時に通知の許可状態をstateに設定する
  useEffect(() => {
    if (!('Notification' in window)) {
      return
    }
    setNotificationPermission(Notification.permission)
  }, [])
 
  const requestPermission = async () => {
    if (!('Notification' in window)) {
      return
    }
    // 通知の許可をリクエストし、許可状態をstateに設定する
    const permission = await Notification.requestPermission()
    setNotificationPermission(permission)
  }
 
  return (
    <div>
      {notificationPermission === undefined ? null : notificationPermission === 'granted' ? (
        <p>通知が許可されています。</p>
      ) : notificationPermission === 'denied' ? (
        <p>通知が拒否されています。</p>
      ) : (
        <button onClick={requestPermission}>通知を許可する</button>
      )}
    </div>
  )
}

ポイントは大きく2つ

通知状態として NotificationPermission という型があり以下3つの状態を持つ
- granted・・通知の送信を許可している
- denied・・通知の送信を拒否している
- default・・通知の状態を選択していない
Notification.requestPermission() で通知の許可を求めることが出来る

Next.jsの初期化したプロジェクトに表示すると以下のような表示になります！