Cooking with Firebase: an ode to Cordova plugin hell

Tl;dr avoid using Cordova plugins as much as possible.

Cross compiling to 3 platforms (browser, android, iOS) is hard. Cordova does a fantastic job for the most part hiding this pain by essentially abstracting everything to a simple local Webserver. Sometimes though you want to do something a bit complicated and Cordova plugins try and be helpful to fill the gap.

Too helpful.

Let me summarise the long and frustrating story I had of integrating with Google Firebase.

Why Firebase

Firebase gives me:

1. User login, complete with anonymous and invite support
2. Push notification platform
3. Cloud functions
4. Nosql online database with offline support

And all that for free until Swrl becomes super popular.

How to integrate with Cordova

What I tried and failed:

Googling “Cordova Firebase” returns many options for using Cordova plugins which I tried first. Annoyingly there was a plugin for each feature of firebase (as listed above). More annoyingly, none of them worked!

Problems I had:

1. Cordova-plugin-firebase: Wouldn’t build on iOS due to Cocaopod issues (I didn’t seem to have any dependency issues as per this reported issue
2. Cordova-plugin-firebaseui-auth: this simply didn’t work on the browser for mobile. Also, looks terrible with no easy way to change the looks afaict.
3. Cordova-plugin-firebase-authentication: can’t remember exactly, but this didn’t work either. I think for similar Cocaopod issues.

What I’m using that works

Following this guide: official google docs, I simply used the firebase web SDK with my project and that’s working great so far!

Obviously, there were still some things the guide missed out, so for others wishing to use it, take note of the following:

1. When following the guide to add firebase to your JavaScript project, use `npm install firebase` and webpack to install the libraries locally and ensure your app works offline too. I use cordova-plugin-webpack which runs the webpack commands for me when building my project.
2. When installing cordova-universal-links-plugin, use the fork here instead which fixes a critical android build error.
3. When installing cordova-plugin-browsertab, add the following hook as a fix for version incompatibility errors.

Now to create some pretty Swrl screens!