Firebaseを利用したプッシュ通知の実装

こんにちは。メディアチームの吉田です。 暮らしニスタのアプリにFirebase Cloud Messaging(以下、FCM)を使用したプッシュ通知を導入したので、FCMの紹介と導入の経緯を説明していきたいと思います!

FCMとは

googleが提供しているメッセージを無料で確実に配信するためのクロスプラットフォーム メッセージング ソリューションです。 FCMでは管理画面上からユーザーセグメント毎の配信や個別の端末への送信ができます。 また、アプリケーション側からFCMのAPIを叩くことで任意のタイミングでプッシュ通知を送信できるようになります。

暮らしニスタのアプリにプッシュ通知を挿入した背景

暮らしニスタのアプリには以前から、プッシュ通知を送信する仕組みは導入されていました。しかし、全端末に同じ内容の送信しかできず、個人向けの通知を送ることができませんでした。 そこで、個別のプッシュ通知を送信できる仕組みの導入を行うことになりました。 暮らしニスタにはステキやコメントといった機能があり、アプリ内の通知欄には投稿した記事にコメントやステキがつくと通知が届くようになっていました。これらの通知をアプリを使っているユーザーにはプッシュ通知でお知らせすることにしました。

導入方法

FCMにはFirebase Console上で送信する方法と、APIを利用した方法の2種類があります。 Firebase Console上から送信する方法の場合、アプリ側の実装のみで送信や、開封率の取得ができるようになります。 APIを利用した方法の場合、アプリ側とアプリケーション側の実装が必要になりますが、APIで送信ができるので任意のタイミングで送信することができるようになります。一方で、開封率などは取得できないでの独自で実装する必要が出てきます。

今回の実装は、一斉送信する際は、Firebase Console上から送信する。個別のプッシュ通知はAPIを使って実装する方針に決まりました。

アプリケーションサーバーからプッシュ通知を送信する

Webアプリケーション側からプッシュ通知を送信する際にはトークンの情報が必要なので、起動時とログイン完了時にトークンを取得するようにしました。そのトークンの情報とユーザーIDを紐付けて送信する際に使用します。

単一端末へのプッシュ通知の送信

単一端末への送信は下記のようにして送信ができます。トークンと本文を設定することで送信をおこなうことができます。暮らしニスタでは通知の配信と同じタイミングで送信をするように実装しました。

https://fcm.googleapis.com/fcm/send
Content-Type: application/json
Authorization: key=API_KEY
{
  "to": "送信先のトークン",
  "notification" : {
    "body": "通知本文",
  }
}

データをアプリに渡す

プッシュ通知を送信する際にデータをアプリ側に渡すことができます。 暮らしニスタの場合、プッシュ通知を開封した際に、開くページを変える必要がありました。 そこで送信の際に開くページを一緒に送信し、アプリ側で開封の際に開くページを変更する実装を行いました。 dataの中で送信した値をアプリ側で取得することができます。

https://fcm.googleapis.com/fcm/send
Content-Type: application/json
Authorization: key=API_KEY
{
  "to": "送信先のトークン",
  "data": {
    "openUrl": "/articles"
  },
  "notification" : {
    "body": "通知本文",
  }
}

画像付きアプリケーションを送信する

iOS10以降では通知に画像をつけることができるようになりました。 FCMでは画像付きのプッシュ通知を送信することもできるようになっています。 データの送信と同様にdataの中で画像のurlを指定します。そしてmutable_contentにtrueを入れて送信します。 アプリ側ではNotification Service Extensionを使って受信した際に画像を表示する実装をおこないます。 f:id:yoshhhy:20181107112123p:plain

f:id:yoshhhy:20181031173845j:plain

最後に

FCMを使用することで簡単にプッシュ通知を送信できるようになりました。 一斉送信はもちろん、APIを用いることで個人あてのプッシュ通知の送信も実装ができるので、プッシュ通知を導入する際にはFCMを使ってみてはいかがでしょうか。