Monacaで開発したアプリにFirebaseからプッシュ通知を送信（iOS/Android）2017年3月現在

アプリ開発者でもあるMr.Monioです。

今日はめずらしく技術的な話を。

やりたいこと: Monacaで作ったアプリにプッシュ通知をサーバーから送る

ちなみにプッシュ通知にはリモート通知とローカル通知の2種類があり、今回実装したいのはサーバーからPHP等で管理画面から送るケースだ。

ローカル通知とは、反対にアプリ内で「いつ何を送るか」を設定できるので、わざわざサーバー側の開発をする必要がないぶん気楽に使える。ローカル通知に関してはこちらのブログが参考になるだろう。

http://blog.asial.co.jp/1403

今回はリモート通知を使って、管理画面からアプリにプッシュ通知を送ってみる。これで運営からのお知らせ等の機能を強化することができる。

開発環境・バージョン等

Monaca クラウド（WindowsのChrome）

Firebase コンソール

iPhone7 10.2.1

Android 5.1

Cordova CLI バージョン

6.2.0

設定手順: Monacaクラウド（iOSのみ）

1. （Monacaバックエンドが作成されている前提です）バックエンド設定→プッシュ通知を開く
2. 「iOS」内の「開発用」もしくは「配布用」プッシュ通知証明書の「秘密鍵の生成とCSRの発行」をクリックし、http://developer.apple.comで登録したユーザー名とメールアドレスを入力
3. CSRファイルをダウンロード

設定手順: developer.apple.com（iOSのみ）

1. 作成するアプリのApp IDの「Push Notifications」の開発（Development）か本番（Production）の「Create Certificate」をクリック
2. 「Upload CSR File」のページで、Monacaクラウドで作成したCSRファイルをアップロード
3. 作成された証明書ファイル（.cer）をダウンロード
4. Monacaクラウドのpush通知設定に戻り、ダウンロードした.cerファイルをアップロードして、APNs証明書（p12ファイル）をダウンロード

設定手順: Firebase

こちらはAndroidとiOS同時進行で説明

1. https://console.firebase.google.com/でFirebaseのアカウントを作成してログインします。
2. 「プロジェクトを作成」をクリックし、アプリごとにプロジェクトを作成します。（筆者は開発用と本番用で二つ用意したぞ）
3. プロジェクトのダッシュボードで、「iOSアプリにFirebaseを追加」「AndroidアプリにFirebaseを追加」どちらかをクリック
4. バンドルIDにはMonacaクラウドの「アプリの設定」からApp IDもしくはパッケージ名（Android）を入力
5. 次のページで「GoogleService-Info.plist（iOS用）」か「google-servies.json（Android用）」をダウンロード
6. Monacaクラウドの雲に矢印のボタン（アップロードボタン）を使ってrootディレクトリ（/）に2つのファイルを配置してビルド
7. （iOSのみ）Firebaseに戻り、「設定」→「クラウドメッセージング」で先ほど用意したp12ファイルをアップロード

そして送信へ・・・

ここまでくればあと少し。

まずはプッシュ通知の宛先となるtokenを入れたFirebaseプラグインを使って取得する。

document.addEventListener(“deviceready”, function(){
window.FirebasePlugin.getToken(function(token) {
console.log(token);// このtokenを出力してコピー
}, function(error) {
});

// プッシュ通知の許可
window.FirebasePlugin.grantPermission();

tokenが用意できたら早速POSTで送ってみよう！

ちなみに筆者はAdvanced REST clientというchromeアプリを使用している。

// URL

https://fcm.googleapis.com/fcm/send

// headers
Authorization: key=（Firebaseクラウドメッセージングページのサーバーキー）
Content-Type: application/json

// payload
{
“to”:”token”,
“priority” : “normal”,
“notification” : {
“body” : “本文”,
“title” : “タイトル”,
“sound” : “default”
}
}

あの初めてプッシュ通知が届く感動の瞬間を迎えて欲しい。

ちなみに全員に送りたいときはtopicという機能を使うといいみたいだ。参考までに。