More than 5 years have passed since last update.

Firebaseによるpush通知[cordova]

Posted at 2019-10-25

cordovaプロジェクトでfirebaseからプッシュ通知をしたかったのですが、plugin導入でコケまくりました。
今回は私が成功した方法についてまとめました。

前提条件

今回はvue.js OnsenUIによるプロジェクトを作成しました。

vue init OnsenUI/vue-cordova-webpack プロジェクト名
cd プロジェクト名
npm install

プラットフォームの追加
私の場合アンドロイド端末による開発のためアンドロイドのみを追加しました。

cordova plarform add android

最後にビルドを行います
npm run build

cordova-firebaseのプラグインには「cordova-plugin-firebase」「cordova-plugin-fcm」などがあるがこれらではうまくいきませんでした。
私は「cordova-plugin-firebase-lib」を使用しました。

こちらのプラグインを導入する際は、「cordova-cli」「cordova-android」「cordova-ios」によって入れるプラグインバージョンが多少異なります。

「cordova-android」「cordova-ios」のバージョンはプロジェクト内のpackage.jsonから確認できます。

私が導入したプラグインは次に3種類です。

cordova plugin add cordova-plugin-firebase-lib
cordova plugin add cordova-plugin-androidx
cordova plugin add cordova-plugin-androidx-adapter

最後に、cordova run androidでアプリを起動

(アンドロイドパッケージ名は作成したプロジェクトファイルの「config.xml」から参照)

4.google-service.jsonをダウンロードずる。
ダウンロードしたらその後は[次へ]→[このステップをスキップ]を選択

cordovaプロジェクトフォルダの直下に配置します。

firebaseからメッセージを作成し、送信します。
[Cloud messageing]→[Send your first message]

通知の作成を行う。
通知のタイトルとテキストを設定し、ターゲットの設定をする

ターゲットはアプリ選択の項目にアンドロイドパッケージ名を指定

設定後、確認をクリックする。
起動しているアプリからプッシュ通知を受信することができます。