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

前回の続き

[cordovaでFirebase Cloud Messagingを使ってみる。#1](http://qiita.com/donuzium/items/9384ae49f4c5b4b645a2)

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

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

#2. 証明書をキーチェーンアクセスからエクスポートしてFirebaseに登録
.p12形式でエクスポートしたファイルを、Firebaseのコンソールから登録します。

<img width="1035" alt="Screen Shot 2016-06-19 at 12.58.52 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/103745/6055da6e-e202-2abb-9c3c-2587e70fa42c.png">
歯車マーク>プロジェクトの設定>クラウドメッセージング から設定できます。

<img width="1041" alt="Screen Shot 2016-06-19 at 12.54.11 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/103745/5fa71bae-a4a4-8ab2-83d3-4a587cfdee31.png">

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

xCodeのNotification関連の設定を有効にします。
<img width="1367" alt="Screen Shot 2016-06-19 at 1.02.32 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/103745/44910f3b-d625-ff4e-5d97-ee2054b3ce62.png">

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

<img width="375" alt="S__8273929.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/103745/d432a91c-e237-b4f9-acc3-d898e71e4592.jpeg">

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

Firebase Cloud Messagingから通知を送る方法は簡単です。私はとりあえず[POSTMAN](https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop)を使って、APIを叩いてみました。

<img width="1126" alt="Screen Shot 2016-06-19 at 11.41.18 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/103745/97e4c3f7-2da8-afde-ee12-7547af4e80dd.png">

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

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

POSTMANのbodyタブから、rawを選んで下記のようにJSON
を送ります。
<img width="1118" alt="Screen Shot 2016-06-19 at 11.43.50 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/103745/94e0dc8d-6d02-b85c-33a8-689a7ab7156d.png">
```json
{
    "to" : "/topics/ios",
    "priority" : "high",
    "notification" : {
      "body" : "Hello Cordova from Firebase Cloud Messaging",
      "title" : "FCM"
    }
}
```

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

<img width="375" alt="S__8273933.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/103745/b5d5cde7-6117-6140-7575-f4efe104b848.jpeg">

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

<img width="375" alt="S__8273932.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/103745/545f46d3-1315-b70c-6c5e-7d39ae28a4a8.jpeg">

ただ、[#1](http://qiita.com/donuzium/items/9384ae49f4c5b4b645a2)で書いたスクリプトでは、Firebase Cloud Messagingのオブジェクトの構造と違ったようなので、下記のように変更しました。

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

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

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

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