Cordova Firebase プラグイン

このCordovaプラグインは、プッシュ通知、分析、イベントトラッキング、クラッシュレポートなどを Google Firebase から アプリへ提供します。

デモ

iOSの準備

iOS向けのプッシュ通知を使用する場合は、APNs の認証キーまたは APNs 証明書が必要になります。 ここでは、iOS デバッグビルド用の Development APNs 署名書の作成方法を説明します。

リリースビルドでは、Production APNs 証明書が必要になります。

既に Apple Developer Program をお持ちの場合は、以下の手順に従って Development APNs 証明書を作成してください。

  1. Apple Developer page から、Account に移動します。

  2. Certificates, Identifiers & Profiles を選択します。

  3. APNs 証明書を作成する場合は、プッシュ通知を有効にした App ID が必要になります。Identifiers 項目の App IDs 選択し、右上隅の + ボタンをクリックします。

  4. 次のような App ID 情報を入力します。

    • App Description: アプリ名を入力します (例:Cordova Firebase Demo)
    • Explicit ID: プッシュ通知では、ワイルドカードの App ID を使用できないため、このオプションを選択します。 アプリの固有の識別子(io.monaca.firebaseなど)を入力します。

  5. App Services 項目の Push Notifications オプションをチェックし、Continue をクリックします。

  6. Confirm your App ID ページにリダイレクトされます。 Register をクリックします。

  7. iOS App IDs ページで作成した App ID を選択し、Edit をクリックします。

  8. Scroll down to Push Notifications section, click on Create Cerficate under Development SSL Certificate. Push Notifications 項目にある Development SSL CertificateCreate Cerficate をクリックします。

  9. Continue をクリックします。

  10. Choose File をクリックし、CSR ファイルを選択します。 CSR ファイルは、Monaca クラウド IDE の 設定 → iOS ビルド設定 から取得することができます。 秘密鍵と CSR の生成 をクリックし、CRSファイルを作成後 エクスポート ボタンをクリックしてダウンロードします。

  11. 次に、Continue をクリックします。 証明書の準備でき、ダウンロード可能になったら証明書をダウンロードします。次の項目の Firebase の設定に必要になります。

Firebase (プッシュ通知) の設定

  1. Firebase console にアクセスします。

  2. Firebase console にログインします。

  3. プロジェクトを追加 をクリックします。

  4. プロジェクト情報を入力し、 プロジェクトを作成 をクリックします。 その後、プロジェクト概要ページにリダイレクトされます。

プロジェクトを作成後、各プラットフォーム用プッシュ通知の設定を行うことができます。

iOS の場合

  1. プロジェクトの設定 を選択します。

  2. [全般] 項目で アプリを追加 をクリックし、iOS を選択します。

  3. iOS のバンドルID を入力します。( 設定 → iOS アプリ設定 ) で確認することができます)。 次に、アプリの登録 をクリックします。

  4. GoogleService-Info.plist ファイルをダウンロードし、プロジェクトのルートフォルダに配置します。 次に、 続行 をクリックします。

  5. [Firebase SDK の追加] では、Monacaで開発するアプリは、ネイティブアプリではないため、 続行 をクリックします。 次に、終了 をクリックして設定を完了します。その後、Firebase の概要ページに iOS アプリが表示されます。

  6. 作成したプロジェクトに APNs 証明書を追加します。 プロジェクトの設定 に移動し、 クラウド メッセージングを選択します。

  7. iOS アプリの設定 項目で、APNs 認証キーまたは APNs 証明書をアップロードします。

以上で、iOS 用の設定は完了です。

Android の場合

  1. プロジェクトの設定 を選択します。

  2. [全般] 項目で アプリを追加 をクリックし、Android を選択します。

  3. パッケージ名を入力します ( 設定 → Android アプリ設定 で確認することができます) 。 次に、アプリの登録 をクリックします。

  4. google-services.json ファイルをダウンロードし、プロジェクトのルートフォルダに配置します。 次に、 続行 をクリックします。

  5. [Firebase SDK の追加] では、Monacaで開発するアプリは、ネイティブアプリではないため、 続行 をクリックします。 次に、終了 をクリックして設定を完了します。その後、Firebase の概要ページに iOS アプリが表示されます。

Monaca クラウド IDE にプラグインを追加する

  1. IDE メニューから、 設定 → Cordova プラグインの管理 へ移動します。

  2. Cordova プラグインのインポート ボタンをクリックします。 次に、[ZIP ファイル] または [パッケージ名 / URL] を使用してプラグインをインポートします。

使い方

Cordova プラグインをプロジェクトにインポートすることで、デバイストークンの取得や、プッシュ通知を開いたときのイベントを設定することができます。[deviceready] イベント後にプラグイン API を使用します。

document.addEventListener("deviceready", function(){
    window.FirebasePlugin.getToken(function(token) {
        // save this server-side and use it to push notifications to this device
        console.log(token);
    }, function(error) {
        console.error(error);
    });

    // Get notified when a token is refreshed
    window.FirebasePlugin.onTokenRefresh(function(token) {
        // save this server-side and use it to push notifications to this device
        console.log("Refresh to get new token: " + token);
    }, function(error) {
        alert(error);
    });

    // Get notified when the user opens a notification
    window.FirebasePlugin.onNotificationOpen(function(notification) {
        console.log(JSON.stringify(notification));
        alert("The notification is open!");
    }, function(error) {
        console.error(error);
    });    
}, false);

API リファレンス

ここでは、デモ で使用されている主な API について説明します。 完全なAPIリファレンスについては、 こちら を参照してください。

getToken()

デバイストークンを取得します。 トークンが確立できない場合は、null になります。

window.FirebasePlugin.getToken();

戻り値

  • Promise

window.FirebasePlugin.getToken(function(token) {
    // save this server-side and use it to push notifications to this device
    console.log(token);
}, function(error) {
    console.error(error);
});

onTokenRefresh()

トークンがリフレッシュされたときに通知を受け取ります。 トークン確立後、すぐにデバイスの有効なトークンを取得することができます。

window.FirebasePlugin.onTokenRefresh();

戻り値

  • Promise

window.FirebasePlugin.onTokenRefresh(function(token) {
    // save this server-side and use it to push notifications to this device
    console.log(token);
}, function(error) {
    console.error(error);
});

onNotificationOpen()

プッシュ通知を開いたときに、通知データを取得します。

window.FirebasePlugin.onNotificationOpen();

戻り値

  • Promise

window.FirebasePlugin.onNotificationOpen(function(notification) {
    console.log(JSON.stringify(notification));
    alert("The notification is open!");
}, function(error) {
    console.error(error);
});    

hasPermission()

プッシュ通知を受信するためのアクセス許可を確認します。

window.FirebasePlugin.hasPermission();

戻り値

  • Promise

window.FirebasePlugin.hasPermission(function(data){
    if (data.isEnabled)
        alert("Permission to receive notification is granted.");
    else
        alert("Permission to receive notification is NOT granted.");
});

grantPermission() (iOS)

iOS でプッシュ通知を受信する権限を与えます (まだ権限が与えられていない場合は、プロンプトを表示します)。

window.FirebasePlugin.grantPermission();

戻り値

  • Promise

window.FirebasePlugin.grantPermission(function(){
    alert("Permission is granted for iOS");    
}, function(error){
    alert(error);
});

setBadgeNumber()

バッジに数字を設定します。

window.FirebasePlugin.setBadgeNumber(badgeNumber);

パラメーター

パラメーター名 説明
badgeNumber Number バッジ表示する数値

戻り値

  • Promise

バッジに表示する数値を設定して実行した後、アプリを終了します。 次に、アプリアイコンにバッジ数が表示されます。 番号を削除する場合は、0 を設定します。

window.FirebasePlugin.setBadgeNumber(5);

getBadgeNumber()

バッジの数値を取得します。

window.FirebasePlugin.getBadgeNumber();

戻り値

  • Promise

window.FirebasePlugin.getBadgeNumber(function(n) {
        alert("Badge Number is " + n);
    });

unregister()

firebase からの登録を解除してプッシュ通知の受信を停止します。アプリからユーザーをログアウトするときに呼び出します。

window.FirebasePlugin.unregister();

戻り値

  • Promise

window.FirebasePlugin.unregister(function(){
    alert("Stop receiving push notifications."); 
}, function(error){
    alert(error);
});

setScreenName()

アナリティクスで現在のスクリーン名を設定します。

window.FirebasePlugin.setScreenName(screenName);

パラメーター

パラメーター名 説明
screenName String スクリーン名

戻り値

  • Promise

var page="FirebaseHome";
window.FirebasePlugin.setScreenName(page);
alert(page + " screen is tracked.");

setUserId()

アナリティクスで使用するユーザーID を設定します。

window.FirebasePlugin.setUserId(id);

パラメーター

パラメーター名 説明
id String 特定のユーザーに関連付けられた一意の識別子は、ヒットごとに送信する必要があります。

戻り値

  • Promise

//user ID for testing purpose
var myUserId="35009a79-1a05-49d7-b876-2b884d0f825b";
window.FirebasePlugin.setUserId("user_id");
alert("UserID is set to: " + myUserId);