CordovaでFirebase Cloud Messaging(FCM)を使ってプッシュ通知(Android)

cordovaでAndroidのプッシュ通知をします。
GCMを使ってプッシュ通知する方法が、Firebaseを使う仕様に変更されています。FirebaseのFirebase Cloud Messaging(FCM)です。cordova-plugin-fcmというプラグインを利用します。

まずはFirebase Notificationを使ってテスト

まずは、Firebase Notificationを使ってテストします。Firebase Notificationは、FCMの一機能で、WEB上でメッセージなどを登録することで、簡単にpush通知ができるサービスです。アプリ側での受信設定などもせずにテストできます。やることは、FCMにアプリを登録し、AndroidにFirebaseを登録して、Firebase NotificationのWEBフォームからメッセージを送信するだけです。

Firebaseでアプリを登録

Firebaseのコンソールに行きます。

  • 新規プロジェクトを作成します。
  • AndroidアプリにFirebaseを追加をクリックして、追加します。
  • 追加した際にダウンロードされる、google-services.jsonをplatforms/android直下に配置します。

config.xmlの設定

プロジェクト作成時に記載したパッケージ名とconfig.xmlに記載されている、id名が同じか確認します。異なる場合は、config.xmlを正しいパッケージ名に修正します。

実機にAndroidアプリをインストール

Firebase Notificationのテスト

Firebaseのコンソールから、アプリを選択して、左側のサイドバーからNotificationsをクリックすると、Notificationの一覧画面が表示されます。右上の新しいメッセージをクリックして、メッセージを入力し、パッケージ名を選択して、送信します。これで画面に表示されれば成功です。Firebase Notificationは、デフォルトではアプリが表示されている状態だと何もしません。一旦アプリをバックグラウンドにしてから、メッセージを送信します。

FCMを使ってみます

FCMは、端末毎やトピック毎に送信を管理できます。まずは簡単なテストからやってみます。やることは、端末側で端末IDを取得し、その端末IDをコンソールに表示させます。その端末IDをメモって、FCMにPOSTでプッシュ通知させるようにしてみます。これで動けばとりあえずプッシュ通知成功です。

cordova-plugin-fcmプラグインをインストール

cordova.jsを読み込む

www/index.html内で、cordova.jsを読み込むようにします。

端末IDの取得

端末IDの取得等のコードを書くときは、devicereadyイベントが取得後にしないといけません。deviceready前だと何もせずに終わってしまいます。cordova createで作成したプロジェクトはデフォルトで、index.jsというのがあります。ここにdevicereadyイベント発火後に動作する、onDeviceReady関数がありますので、この中に、端末取得コードを書いていきます。FCMPlugin.getToken()で取得できます。使い方の説明は、https://github.com/fechanique/cordova-plugin-fcmに色々書いてあります。

上記を追加してcordova run android を実行すると、画面にトークンが表示されますし、ログにも出力されます。長いのでログからコピーしておきます。

Firebase APIにPOSTアクセスして、メッセージ送信

まず、Firebaseのコンソールに行き、プロジェクトを選択し、設定画面に行くと、クラウドメッセージングというタブがあるので、それをクリックします。すると、Server Keyがありますので、これをコピーします。

POSTアクセスする

ここに仕様が書いてあります。ここには、送信データのパラメータの説明が書いてあります。
chrome拡張のpostmanでやってみます。

[header]

[body]

これで端末にpush通知が来れば成功です。

プッシュ通知にdataを渡してアプリで使う

アプリに受け取りコードを書く

トークン取得時と同じ場所にコードを書きます。

Firebase APIにPOSTアクセス

プッシュ通知にdataを渡すとアプリで使えます。postデータは下記のようにdataを使います。notificationに、click_actionを追加していますが、これがないと、Androidのバックグラウンド時に、通知をタップしたあとの処理が動きませんでした。

これで、Androidの場合、フォアグラウンド時、バックグラウンド時ともに、プッシュ通知が表示され、アプリ側でdataの内容を操作できることが確認できました。

cordova + onsen ui + reactの開発環境

cordova + onsen ui + reactの開発環境を作成してみます。cordovaのテンプレートにして、メンテしていければと思います。環境は、windows10、npm3.10.8です。エディタは、visual studio code1.6.1を使ってます。

プロジェクトを作る

npmはインストール済みです。

必要なものをnpm install

下記のpackage.jsonを配置して、npm installを実行。

git

.gitignoreを編集

cordovaにプラットフォーム追加

babelの設定

.babelrcを編集

eslintの設定

.eslintrcの編集

.eslintignoreの設定

webpackの設定

元となるjsを入れるフォルダを作る

webpack.config.jsの編集

index.htmlの作成

www/index.html

Javascriptの作成

onsen ui + reactを使った簡単なjavascriptを作成してみる。

src/App.jsx

src/main.jsx

webpackする

webpackすると、www内に、assetsと、bundle.jsと、main.cssが出力される。

webpack-dev-serverを使う

webpack-dev-serverを使っていると、ウォッチしてくれて、対象ファイルに変更があると、webpackしなおして表示してくれる。
webpackした結果は、メモリに保存されるので、www内への展開はされない。

screen

Androidの実機で確認する

Visual Studio CodeでCordova開発をする

無償のVisual Studio CodeがCordovaに対応。HTML5/JavaScriptでのモバイルアプリケーション開発が可能に

Visual Studio Code
とりあえずインストールした。

MacでもLinuxでも使える! 無償の Visual Studio Code を使用した Cordova 開発
拡張機能のCordova Toolsをインストールすればいいらしい。

大体使い方わかったけど、上記記事の最後に、「Visual Studio Code ではなく Visual Studio 2015 を使用することをお勧めします」と書いてあるので、Visual Studio 2015もインストールしてみる。

記事の中でも書いていますが、Windows をお使いの方で、マシンのリソースがそれなりにあるのであれば、Apache Cordova を使用した開発には Visual Studio Code ではなく Visual Studio 2015 を使用することをお勧めします。Visual Studio 2015 は、Cordova 開発環境の構築、プロジェクトの作成やコーディングの際の豊富な入力支援機能、プラグインの管理や複数のシミュレーターの提供など、さまざまな機能が IDE 統合されており、それらをシームレスに使用することができます。

Visual Studio Community

visual studio codeと2015の違いは、下記に書いてあった。
マイクロソフトのクロスプラットフォーム対応新コーディングツール「Visual Studio Code」
visual studio codeの方が軽量でマルチプラットフォーム対応。macやlinuxでも使える。でも至れり尽くせりなのは、2015。ただ、Cordovaの場合、macでも開発するだろうし、studio code使った方がいいかもしれない。両方試してみよう。

Cordova

Apache Cordovaでハイブリッドアプリを作成する。

インストール

環境チェック

プロジェクト作成

プラットフォーム追加

プレビュー

実機デバッグ

ビルド

プラットフォーム削除