Firebase Push notifications with PhoneGap Build using cordova-plugin-fcm

Question

I need to implement push notifications in a PhoneGap Build app that I'm developing.

I didn't find much documentation on using the new Google service, Firebase Cloud Messaging (FCM), but since it is supposed to be what we have to use now I searched for an API that could make my life easier.

I found: https://www.npmjs.com/package/cordova-plugin-firebase

So I added to my config.xml:

<plugin name="cordova-plugin-fcm" source="npm" />

And put the google-services.json I've created from https://console.firebase.google.com/ in the root of the folder I zip to upload to the Phonegap Build.

But I get the following error:

Execution failed for task ':processReleaseGoogleServices'.
> File google-services.json is missing. The Google Services Plugin cannot function without it. 
  Searched Location: 
  /project/src/release/google-services.json
  /project/google-services.json

I created the "project" folder in the root and put the file there but that doesn't work neither.

Currently my app folder looks like:

\css
\img
\js
\res (icons and splashscreens)
index.html
config.xml
google-services.json

If anyone knows where I've to put that file or have any other way to implement this even using other API, I would really appreciate it. I've never used Phonegap CLI, I've always been using Phonegap Build.

Answer 1

Cordova introduced the resource-file tag some time ago and it also works in Phonegap Build.

You can use that instead of a forked plugin to copy the google-services.json and GoogleService-Info.plist files

Put the in the root of your project and the use the resource-file tag in the config.xml like this:

If using cordova-android 7 or newer:

<platform name="android">
  <resource-file src="google-services.json" target="app/google-services.json" />
</platform>

older versions

<platform name="android">
  <resource-file src="google-services.json" target="google-services.json" />
</platform>

iOS

<platform name="ios">
  <resource-file src="GoogleService-Info.plist" />
</platform>

You can also put it inside www folder, in that case in my examples add www/ before the file name in the src field.

https://cordova.apache.org/docs/en/7.x/config_ref/index.html#resource-file

Answer 2

The files need to be alongside the www folder, problem is that Phonegap Build only lets you upload the contents of said folder, so you can't upload the files.

Fortunately there's something you can do; Build installs the plugins directly from npm, and plugins can work thought the whole project, so what you need is a plugin that copies the files [google-services.json, GoogleService-Info.plist] for you.

Most of the work has already been done: cordova-plugin-fcm-config.

This plugin copies the required FCM configurations in the project root folders and Xcode project. It is used in combination with the great cordova-plugin-fcm plugin.

It wasn't built for this purpose but works wonderfully.

There's an added complexity though; since you can't upload plugins (you can only add a reference to it in your config.xml), and this plugin needs your own app configuration files, you'll have to:

1. Clone/Fork the plugin into your own repository.
2. Replace the configuration files.
3. Upload it somewhere Build can find.

Where do you upload it? That might be tricky. The infrastructure is built around the idea that plugins are for general purposes and can be configured in each project xml, so npm makes sense. But in this case your plugin will contain very specific data to your project, so uploading to npm would pollute the namespace in my opinion.

I don't know about you, but I have a paid account, so I publish the plugin in my own repository and submit as a private plugin. This is what I recommend.