ブログ

Firebase Cloud MessagingとWeb Notifications APIの統合

Web開発者にとって、通知機能は非常に重要です。特に、ユーザーとのエンゲージメントを高めるためには、効果的な通知を送信することが不可欠です。そこで、Firebase Cloud Messaging（FCM）がもたらす新しい機能についてご紹介します。この機能は、2018年5月22日に発表されたもので、FCMのv1 REST APIがWeb Notifications APIに完全に統合されました。この統合によって、開発者はサーバーからウェブ通知にアイコンや画像、アクションなどを設定できるようになりました。

革新的な統合の利点

この新機能の利点は多岐にわたります。

• カスタマイズ性の向上: 通知の見た目やアクションを自由にデザインでき、ユーザーがより興味を持つような通知を送信できます。
• 即時対応: Web Notifications APIが進化する際、新しいオプションがFCMに即座に利用可能になるため、更新を待つ必要がありません。
• エンゲージメントの向上: ユーザーがアクションを選択することで、アプリへの参加を促進します。

実際の通知サンプル

具体的な通知の例を見てみましょう。例えば、次のようなペイロードを送信することが可能です。

{
  "message": {
    "webpush": {
      "notification": {
        "title": "Fish Photos 🐟",
        "body": "Thanks for signing up for Fish Photos! You now will receive fun daily photos of fish!",
        "icon": "firebase-logo.png",
        "image": "guppies.jpg",
        "data": {
          "notificationType": "fishPhoto",
          "photoId": "123456"
        },
        "click_action": "https://example.com/fish_photos",
        "actions": [
          {
            "title": "Like",
            "action": "like",
            "icon": "icons/heart.png"
          },
          {
            "title": "Unsubscribe",
            "action": "unsubscribe",
            "icon": "icons/cross.png"
          }
        ]
      }
    },
    "token": ""
  }
}

この通知では、ユーザーが「いいね」や「登録解除」といったアクションを選択できるようになっています。これにより、ユーザーは単純に通知を受け取るのではなく、アクティブな参加者になることができます。

アクションの処理方法

通知にアクションボタンを設けた場合、アプリでそのアクションを処理する方法が必要です。次のように、既定のファイルであるfirebase-messaging-sw.js（またはカスタムのサービスワーカー）にイベントリスナーを追加します。

const messaging = firebase.messaging();

self.addEventListener('notificationclick', function(event) {
    if (event.action === 'like') {
        const photoId = event.notification.data.photoId;
        like(photoId);
    } else if (event.action === 'unsubscribe') {
        const notificationType = event.notification.data.notificationType;
        unsubscribe(notificationType);
    }
    event.notification.close();
});

このコードは、ユーザーが「いいね」ボタンをクリックした場合に写真IDを取得して「いいね」機能を呼び出します。また、「登録解除」ボタンをクリックした場合にも似たような処理が行われます。

ブラウザ互換性に関する注意点

各ブラウザが異なるパラメータをサポートしているため、ユーザーに適切な通知が届くよう、ブラウザ互換性のドキュメントを確認することが重要です。これにより、すべてのユーザーに一貫性のある体験を提供できます。

さらなる情報を探る

FCM Send APIがどのように機能するかを詳しく知りたい方は、FCM Send APIドキュメントとWeb Notifications APIドキュメントをチェックしてください。また、もしFCM Send APIを利用してWeb Notifications APIを活用した面白い方法があれば、ぜひ共有してください。

Firebaseの最新情報は、Twitterの@FirebaseやFacebook、Google+で検索して見つけることができます。

この新しい機能を利用して、ぜひユーザーとのエンゲージメントを高める素晴らしい通知を作成してみてください！