Room8 Inc.

Room8発信のメディアサイト

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

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
iOSプラットフォーム:
4.2.0
Androidプラットフォーム:
5.1.1
仕様プラグイン
https://github.com/arnesson/cordova-plugin-firebase

 

設定手順: 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アプリを使用している。

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

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

 

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

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

記事を書いた人

株式会社Room8システムエンジニアMr.Monio
システムエンジニア(Webシステム、スマホアプリ開発) | 名古屋インスタ交流会広報、ジョグ部・スポーツ部長 | 名古屋No.1を目指す音楽youtuber。まだ動画はあげていない。

■愛知県春日井市出身
■小学生時にドッジボールで全国出場
■普通科高校に5年行く
■3年次には二十歳の生徒会長に
■オーストラリアの屠殺場での就業経験アリ
■大好きなもの: サッカー・音楽活動(ギター・ドラム・ボーカル)・台湾まぜそば・洋楽・洋画
■最近ボイストレーニング通ってます

コメント( FACEBOOK)

Return Top search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status image gallery music video category tag chat quote googleplus facebook instagram twitter rss