2023年8月1日、Firebase Cloud MessagingがSafariでの通知をサポートすることが発表されました。このサポートにより、Safari 16.1およびmacOS 16.4 iOS＆iPadOSからのPush APIを利用した通知が可能になります。これにより、Firebase Cloud Messagingを使用したWebアプリケーションに対して、ユーザーエクスペリエンスの向上とユーザーとのエンゲージメントの増加が期待されます。

macOSでのFirebase Cloud Messagingの有効化

macOSでのFirebase Cloud Messagingの有効化には、いくつかの手順が必要です。まずは、Firebase FCM JS SDK quick start guideを参照して、Firebase Cloud Messagingをウェブアプリケーションに導入します。そして、SafariでPush APIを有効にするために、requestPermission() APIをユーザーアクション（たとえばボタンクリック）内で呼び出すことが必要です。

// SafariでPush APIを有効化する例
let permission = await Notification.requestPermission();
if (permission === "granted") {
  // FCMトークンを取得する処理
} else {
  // 許可が拒否された場合の処理
}

iOSおよびiPadOSでのFirebase Cloud Messagingの有効化

iOSおよびiPadOSでのFirebase Cloud Messagingの有効化には、macOSよりも追加の手順が必要です。まずは、manifest.jsonファイルを設定して、アプリケーションをホーム画面に追加できるようにします。その後、ユーザーにアプリをホーム画面に追加するように促し、Push通知を受け取るための許可を要求します。

// manifest.jsonの設定例
{ "display": "standalone" }

// iOSおよびiPadOSでPush通知の許可を要求する例
let permission = await Notification.requestPermission();
if (permission === "granted") {
  console.log("Notification permission granted. Requesting for token.");
  // FCMトークンを取得する処理
} else {
  console.log("Notification permission denied");
  // 許可が拒否された場合の処理
}

Firebase Cloud Messagingを使った通知の送信

Firebase Cloud Messagingを使用して通知を送信する際は、v1 Send APIまたはFirebaseコンソールを使用します。以下は、v1 Send APIを使用して通知を送信する例です。

// 通知を送信する例（v1 Send APIを使用）
{
  "message": {
    "token": "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
    "notification": {
      "body": "This is an FCM notification message!",
      "title": "FCM Message"
    }
  }
}

Firebase Cloud MessagingはiOSおよびiPadOSのWeb Push通知に、Apple Push Notificationサービス（APNs）を使用します。APNsを使用する際は、Apple Developer Programへの加入は不要ですが、サーバープッシュエンドポイントを制御している場合は、*.push.apple.comからのURLを許可する必要があります。

まとめ

Firebase Cloud MessagingがSafariでの通知をサポートすることが発表され、開発者にとって新たな可能性が広がりました。Safari 16.1およびmacOS 16.4 iOS＆iPadOSからのPush APIの導入により、ウェブアプリケーションに対してユーザーエクスペリエンスの向上とユーザーとのエンゲージメントの強化が期待されます。

詳しい内容はこちらを参照してください。