LoginSignup
20
16

More than 5 years have passed since last update.

cordovaでFirebase Cloud Messagingを使ってみる。#2

Posted at

前回の続き

cordovaでFirebase Cloud Messagingを使ってみる。#1

前回は、Firebase Cloud Messagingと言いながらも、Firebase Notificationsのところまでをまとめたものでした。

1. 証明書やAPNsをApple Developper Centerで用意する。

https://firebase.google.com/docs/cloud-messaging/ios/certs
結構手順が面倒なので、こちらのページを参考に作っていくと良いと思います。
基本的に、ここは通常のプッシュ通知の設定と一緒なので、他にも日本語で解説されていると思います。

2. 証明書をキーチェーンアクセスからエクスポートしてFirebaseに登録

.p12形式でエクスポートしたファイルを、Firebaseのコンソールから登録します。

Screen Shot 2016-06-19 at 12.58.52 AM.png
歯車マーク>プロジェクトの設定>クラウドメッセージング から設定できます。

Screen Shot 2016-06-19 at 12.54.11 AM.png

3. xCode側の設定を有効にする。

ここで、これまでに何度か実機でアプリを動かしていると思いますので、xCodeのWindow>Deviceを開いて、開発機を選択してビルドしていたアプリを削除して下さい。
Push Notificationなどの設定を行っているため、Profileがおかしいというエラーで動かなくてしばらく困っていました。

xCodeのNotification関連の設定を有効にします。
Screen Shot 2016-06-19 at 1.02.32 AM.png

4. Firebase Notificationからメッセージを送信

ここまの操作で、設定がうまく行っていれば、もうFirebase Notificationからメッセージを送るだけで、通知センターに通知が届きます。

S__8273929.jpg

5. Firebase Cloud Messaging経由で通知してみる

ここまでは、あくまでFirebase NotificationsのGUIを使いながら、アプリへのNotificationを送っていました。
ここからはFirebase Cloud Messagingそのものを使ってNotificationを送ってみます。

Firebase Cloud Messagingから通知を送る方法は簡単です。私はとりあえずPOSTMANを使って、APIを叩いてみました。

Screen Shot 2016-06-19 at 11.41.18 PM.png

Content-Type:application/json
Authorization:key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxの部分は、歯車マーク>プロジェクトの設定>クラウドメッセージング のタブにある"サーバーキー"を入れてください。

POSTMANのbodyタブから、rawを選んで下記のようにJSON
を送ります。
Screen Shot 2016-06-19 at 11.43.50 PM.png
json
{
"to" : "/topics/ios",
"priority" : "high",
"notification" : {
"body" : "Hello Cordova from Firebase Cloud Messaging",
"title" : "FCM"
}
}

そしてsendボタンを押せば送信は完了です。

S__8273933.jpg

他のNotificationと同じように、Notification自体をタップすると、アプリに遷移して、用意したスクリプトが動いている事がわかります。

S__8273932.jpg

ただ、#1で書いたスクリプトでは、Firebase Cloud Messagingのオブジェクトの構造と違ったようなので、下記のように変更しました。

// #1
alert(data.aps.alert)

// #2
alert(data.aps.alert.body)

というわけで、これで無事、Firebase Cloud Messagingを利用して、CordovaアプリにPush通知を送ることが出来ました。

こんごともGCPUG仙台はFirebaseを盛り上げていきますので、皆様お気軽にご参加ください!

20
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
16