Cordova Firebase プラグイン

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

• プラグイン リポジトリ: https://github.com/dpa99c/cordova-plugin-firebasex

• プラグイン ID/Package Name: cordova-plugin-firebasex

• テストバージョン: 16.5.0

Cordova Firebase プラグイン 16.5.0 は　プライバシーマニフェストに対応しています。

カスタムビルドデバッガーでは、プッシュ通知を確認することはできません。 プッシュ通知を確認する場合は、デバッグビルドかリリースビルドにてご確認ください。

デモ

プロジェクトをインポート

iOSの準備

iOS 向けのプッシュ通知には、APNs 認証キーまたは APNs 証明書が必要になります。

ここでは、iOS デバッグビルド用の Development APNs 証明書の作成方法を説明します。

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

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

1. AppIDの作成

2. APNs証明書の作成

3. APNs証明書の形式変換

AppIDの作成

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

2. 証明書 を選択します。

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

4. 次にApp IDsを選択します。

5. IDの種別は、Appを選択します。

6. 次に App ID 情報を入力します。

• Description: アプリ名を入力します ( 例：push test )

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

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

8. Register をクリックします。

ここまでで、App ID の作成は完了です。続いてこのApp IDに紐づくAPNsを作成します。

APNs証明書の作成

1. iOS App IDs ページで、ここまでの手順で作成した App ID を選択し、Push NotificationsのEditをクリックします。

2. Apple Push Notification service SSL Certificats 項目にある Development SSL Certificate の Create Cerficate をクリックします。

3. Choose File をクリックし、CSR ファイルを選択します。

4. CSR ファイルの取得 (Monaca上での操作)

CSRファイルは、Monaca クラウド IDE の 設定 → iOS ビルド設定 から取得することができます。

秘密鍵と CSR の生成 をクリックし、CSRファイルを作成後 エクスポート ボタンをクリックしてダウンロードします。

5. 作成したCSRファイルをApple Developer センターにアップロード後、Continue をクリックします。 APNs証明書の準備ができ、ダウンロード可能になったらAPNs証明書をダウンロードします。

APNs証明書の形式変換

Apple Developer センターで作成したAPNs証明書は、そのままの形式ではプッシュ通知サービスで利用できません。そのため、Monacaを通して、証明書の形式をp12ファイル形式に変換します。

ここからの手順は、Monacaサービス上での操作となります。

1. ダウンロードした証明書を iOS ビルド設定 の 証明書のアップロード ボタンをクリックしてアップロードします。

2. Monacaに登録された証明書 に表示された証明書の エクスポート アイコンをクリックして p12 ファイルをエクスポートします。p12ファイル次の項目の Firebase の設定に必要になります。

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

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

2. プロジェクトを追加 をクリックし、新しいプロジェクトを作成します。

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

iOS の場合

下記の手順でFirebase上でのアプリ登録と設定ファイル (GoogleService-Info.plist) を取得します。

アプリの登録と設定ファイルの取得

APNs証明書の登録

作成したプロジェクトに APNs 証明書を追加します。

プロジェクトの設定 に移動し、Cloud Messagingを選択します。

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

Android の場合

下記の手順でFirebase上でのアプリ登録と設定ファイル(google-services.json)を取得します。

アプリの登録と設定ファイルの取得

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

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

2. Cordova プラグインのインポートボタンをクリックします。 次に、[ZIP ファイル] または [パッケージ名 / URL] を使用してプラグインをインポートします。 パッケージ名を利用する場合は、 cordova-plugin-firebasex@16.5.0と指定してください。

iOS 12.2 以降のデバイスをサポートするには、config.xml に以下のように設定してください。

<platform name="ios">
    <preference name="deployment-target" value="12.2"/>

使い方

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

document.addEventListener("deviceready", function(){
    // デバイストークンを取得します
    window.FirebasePlugin.getToken(function(token) {
        console.log(token);
    }, function(error) {
        console.error(error);
    });

    // トークンが更新されたときに実行されます
    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);
    });

    // ユーザーが通知を開いたときに実行されます
    window.FirebasePlugin.onMessageReceived(function(message) {
        console.log("Message type: " + message.messageType);
        if(message.messageType === "notification"){
            alert("Notification message received");
            if(message.tap){
                alert("Tapped in " + message.tap);
            }
        }
    }, function(error) {
        console.error(error);
    }); 
}, false);

API リファレンス

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

getToken()

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

window.FirebasePlugin.getToken();

例

window.FirebasePlugin.getToken(function(token) {
    console.log(token);
}, function(error) {
    console.error(error);
});

onTokenRefresh()

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

window.FirebasePlugin.onTokenRefresh();

例

window.FirebasePlugin.onTokenRefresh(function(token) {
    console.log(token);
}, function(error) {
    console.error(error);
});

onMessageReceived()

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

window.FirebasePlugin.onMessageReceived();

例

window.FirebasePlugin.onMessageReceived(function(message) {
    console.log("Message type: " + message.messageType);
    if(message.messageType === "notification"){
        alert("Notification message received");
        if(message.tap){
            alert("Tapped in " + message.tap);
        }
    }
}, function(error) {
    console.error(error);
});

hasPermission()

プッシュ通知を受信するためのアクセス許可を確認します。プッシュ通知を受け取るための許可を確認し、その結果をコールバック関数に真偽値として返します。

window.FirebasePlugin.hasPermission();

例

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

grantPermission()

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

プッシュ通知の受信に必要な許可が付与されます。ユーザーに許可を求めるプロンプトが表示されます。この設定はiOSおよびAndroid 13以降のバージョンで必要です。

window.FirebasePlugin.grantPermission();

また、Androidで 「POST_NOTIFICATIONS」 権限を使用するには、AndroidManifest.xmlファイルにこの権限を追加する必要があります。これを行うには、config.xmlファイルに次の内容を挿入します。

<config-file target="AndroidManifest.xml" parent="/*">
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
</config-file>

例

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

setBadgeNumber()

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

window.FirebasePlugin.setBadgeNumber(badgeNumber);

例

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

window.FirebasePlugin.setBadgeNumber(5);

getBadgeNumber()

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

window.FirebasePlugin.getBadgeNumber();

例

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

unregister()

Firebase Cloud Messagingから現在のFCMデバイストークンを削除して登録解除します。これにより、現在のトークンに関連するプッシュ通知の受信を停止できます。

例えば、アプリからユーザーをログアウトする時にこれを呼び出します。デフォルトでは、古いトークンが削除されるとすぐに新しいトークンが生成されます。新しいトークンの生成を防ぐためには、unregister()を呼び出す前にsetAutoInitEnabled()を使って自動初期化を無効にしておくことが必要です。

window.FirebasePlugin.unregister();

例

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

setScreenName()

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

window.FirebasePlugin.setScreenName(screenName);

例

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

setUserId()

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

window.FirebasePlugin.setUserId(id);

例

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