0. 前段
2016年のGoogle I/Oで、大幅にFirebaseのアップデートが発表されました。
その中でも、注目度の高かったFirebase Notifications。
多くの人が
「これでPush通知が自在に送れる！」
と思ったわけですが、Firebase Notifications自体は、GUIからPush通知を送るための機能でした。
しかしこのFirebase Notificationsは今回、Google Cloud MessagingからFirebase Cloud Messagingと名前を変えたサービスを利用したツールのため、このFirebase Cloud Messagingを使ってPush通知が送れます。
今回は、その中でもCordovaを利用してiOSアプリでFirebase Cloud MessagingのPush通知が送れるか試して見たいと思います。
※この記事は、2016年6月18日に行われたGCPUG仙台のイベントでの個別ワークとして実際にやってみたことを書いています。
1. Cordovaのアプリビルド
いつものように、プロジェクトディレクトリで
cordova create notification
2. アプリの登録
iOSのアプリをDev Centerで登録します。
その時に"Push Notification"にチェックを入れるのを忘れずに。
3. プラグインのインストール
今回使うプラグインはこちら。
cordova-plugin-fcm
プラグインをインストールします。
cd notification
cordova plugin add cordova-plugin-fcm
ただこのプラグインは、CordovaのiOSのバージョンが4.0.0以上だとエラーが出るようで、ドキュメントにはバージョンを下げろと書かれています。
cordova platform add ios@3.9.2
4 Cordovaのconfig.xmlを編集しておきます
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.thedott.notification" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>notification</name>
<description>
Firebase Cloud Messagingのサンプル
</description>
<author email="shimizu@thedott.io" href="http://thedott.io">
:.shimizu
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<preference name="BackupWebStorage" value="local"/>
</widget>
で、Cordovaをbuild
cordova build
xcodeを立ち上げると、ビルドは通ってます。
5 Firebase側にiOSアプリに登録する
6 iOSアプリにFirebaseを追加する
Cordovaの場合は、root folderに置けと言われているのでダウンロードしてきたGoogleService-Info.plistをxCodeからプロジェクト直下にドラッグドロップしてコピーします。
[2017.1.15 追記]
久しぶりに試したところ、cordova-plugin-fcmでは、cordovaのプロジェクトのrootフォルダーに、上記のplistを置くようにエラーがでてしまったので、正しくは、rootフォルダーに置くようにしてみてください。
7 受け取る側の準備
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
FCMPlugin.onNotification(
function(data){
setTimeout(function(){
alert(data.notification.body);
}, 100);
console.log('data');
},
function(data){
console.log('succsess');
},
function(data){
console.log('error');
}
);
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();
cordovaが生成したindex.jsのonDeviceReadyのところに、追加しました。
onDeviceReady: function() {
app.receivedEvent('deviceready');
FCMPlugin.onNotification(
function(data){
setTimeout(function(){
alert(data.notification.body);
}, 100);
console.log('data');
},
function(data){
console.log('succsess');
},
function(data){
console.log('error');
}
);
},
これでAlertだけですが、メッセージを受け取る準備ができました。
8 時間がなくなったので、アラートだけでもNotificationsからテストしよう。
これで送信すると…
とりあえず、Notificationsから、Cordovaでもメッセージを受け取ることができました。