NativeScriptでPUSH通知を受信する（Firebase編）

前提

数多くの{N}アプリを作成してきて、PUSH通知の実装も色々手がけてきたのですが、現時点ではAndroidもiOSもFirebaseで送信するのがベストという結論にいたりました。
APNs(iOS)はAPIの叩き方がソケットな上に、非同期でエラーとかが返ってきて大変にハンドリングがめんどくさい。
最近はPOSTでもいけるようになったみたいですけど、Firebase Consoleから手軽に通知テストとかできたりして、運用も便利になります。
というわけで、今回はFirebaseを用いたPUSH通知について解説します。

必要なパッケージ

親切な方がパッケージを作成してくださっています。
https://github.com/EddyVerbruggen/nativescript-plugin-firebase

以下でインストールしましょう。

tns plugin add nativescript-plugin-firebase

設定ファイルの取得

Firebase Consoleにアプリを登録して、FCM用の設定ファイルをダウンロードしてきます。
このへんはぐぐればいくらでも出てきますし公式ドキュメントも丁寧なので迷わないでしょう。
最終的に

• GoogleService-Info.plist # iOS用
• google-services.json #Android用

を取得できれば良いです。
それぞれ、app/App_Resources/iOS及びAndroidフォルダに設置します。

パッケージのセットアップ

一手間かかるのですが、以下のコマンドを叩く必要があります。

cd ./node_modules/nativescript-plugin-firebase
npm run setup
cd ../..

Android

利用するGoogleライブラリを最新にするため、
/app/App_Resources/Android/app.gradle
ファイルの該当箇所を下記のように書き換えます。

project.ext {
    ・・・
    googlePlayServicesVersion = "+"
    ・・・
}

iOS

通常のアプリと同様に、アプリのPUSH通知を有効にします。
/app/App_Resources/iOS/info.plist
ファイルへ下記を追記します。

<key>UIBackgroundModes</key>
<array>
  <string>fetch</string>
  <string>remote-notification</string>
</array>

さらに、
/app/App_Resources/iOS/【パッケージ名】.entitlements
ファイルを作成し、以下の内容にします。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>aps-environment</key>
    <string>development</string>
</dict>
</plist>

コード

適当な初期化部で、以下を呼び出すだけでOKです。

    let firebase = require('nativescript-plugin-firebase');
    firebase.init({
        onMessageReceivedCallback: function(message){
            //PUSH通知を受信した時にコールされます
            //message.dataに独自のpayloadが格納されます
        },
        onPushTokenReceivedCallback: function (token) {
            console.log("Firebase push token: " + token);
            //トークンを保持したりする
        },
    }).then((instance) => {
        console.log('Firebase init succeeds.');
    }, (error) => {
        console.log('Firebase init failed.');
    });

iOSの場合、OS側の通知して良いか確認ダイアログはこのタイミングで表示されます。

受信するだけなら上記でOKですが、FCMは他にも色々機能があります。
詳しくは
https://github.com/EddyVerbruggen/nativescript-plugin-firebase/blob/master/docs/MESSAGING.md
に色々書いてあるので参考にして下さい。