Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@oxyu8

Firebaseによるpush通知[cordova]

More than 1 year has passed since last update.

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

前提条件

  • os: win32
  • cordova: 9.0.0
  • Node: v10.16.2
  • npm: 6.10.3
  • cordova-android: 8.1.0

流れ

  1. cordovaプロジェクトファイルの作成
  2. プラグインの導入
  3. firebaseのプロジェクト作成
  4. google-service.jsonを配置する
  5. メッセージの送信・受信

プロジェクトファイルの作成

今回は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」によって入れるプラグインバージョンが多少異なります。

私は以下のサイトを参考にしました。
https://github.com/wizpanda/cordova-plugin-firebase-lib/tree/v5.1.1

「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でアプリを起動

firebaseのプロジェクト作成

  1. 「プロジェクトを追加」から新規のプロジェクトを作成する

  2. プロジェクトの名前を設定
    image.png

  3. firebaseプロジェクト作成後、アプリの追加
    今回はアンドロイドを選択する。
    image.png

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

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

google-service.jsonを配置する

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

メッセージの送信・受信

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

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

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

image.png

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

参考文献

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
oxyu8

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?