Bennett Hollstein

Web developer

How to use Firebase (Cloud Messaging)/cordova-plugin-firebase with Phonegap Build

Hello,

you are probably here because you are building an app with Phonegap and want to use the Firebase Cordova plugin (cordova-plugin-firebase) but as you use Phonegap Build and the plugin isn’t compatible you can’t… – unless you follow these steps:

1. Clone the repository

You’ll need to clone the GitHub repository (https://github.com/arnesson/cordova-plugin-firebase.git) to your local machine so you can edit the files.

2. Hard-code your app credentials

Next, replace the files located at „src/android/google-services.json“ and „src/ios/GoogleService-info.plist“ with your own files that you got from the Firebase Console

3. Edit plugin.xml

Now you’ll need to edit some things in the plugin.xml. As you can’t use the plugin id „cordovan-plugin-firebase“ you need to use a different one – in this example „my-app-firebase-plugin“

In the second line of the file replace the plugin id with the plugin name you chose

<plugin id="my-app-firebase-plugin" version="0.1.25">

Optionally replace the name of the plugin in line 5

<name>My App Firebase Plugin</name>

In line 24 replace the app id with your app id.

IMPORTANT: The app id is not the same as the project id you find in the Firebase Console. While the project id might be something like „my-app“ the app id is in the format  „1:12345667890:android:a12b3cdef123g12“. You can find it in your google-services.json around line 11 under „mobilesdk_app_id“.

<string name="google_app_id">YOUR APP ID HERE</string>

And replace the API Key with your app API Key on line 27 – you can find this is your Firebase console

<string name="google_api_key">YOUR API KEY</string>
4. Edit package.json

The last file you need to edit is „package.json“ where you just have to replace the repository url, name and Cordova ID. You may also want to delete the description and keywords as you don’t want people to find your repo when searching for the Cordova firebase plugin.

{
author: {
name: Robert Arnesson
},
license: MIT,
repository: {
type: git,
url: https://github.com/my/repository
},
name: „my-app-firebase-plugin,
version: 0.1.25,
description: ,
cordova: {
id: „my-app-firebase-plugin,
platforms: [
android,
ios,
browser
]
}
}
6. Publish

You now have two options: Use a private plugin on Phonegap Build or publish to npm. If you can publish it as a private plugin to Phonegap Build but as It haven’t upgraded my account I can’t.

To publish on npm follow these instructions:

Login using „npm login“, then publish using „npm publish“.

7. Require plugin in your app config.xml

The last thing you’ll need to do is require the plugin you just published in your app config.xml using

<plugin name="my-app-firebase-plugin" source="npm" />

You should now be able to use Firebase as described in the plugin docs.

Kommentar verfassen