Firebase is a platform for developing mobile and web application that provides analytics, authentication, real-time databases, notifications, cloud messaging, crash reporting and other services for your application. In this post, I will discuss how to use the Firebase Analytics in Cordova applications for measuring app usage and user engagement.

Analytics for Firebase

This is a free service that can be used for both Android and iOS applications. It provides unlimited reporting of up to 500 distinct events and a number of user properties.

Events allow you to see what happens in an application, such as user actions, system events, or errors. There is a number of automatically collected events and you can define your own events. However, you have to keep in mind that:

  • there is a limit of 500 distinct events that can be reported.
  • each event can have up to 25 parameters associated with it.
  • event names can be up to 40 characters long, may only contain alphanumeric characters and underscores (“_”), and must start with an alphabetic character.
  • “firebase_”, “google_” and “ga_” prefixes are reserved and cannot be used.
  • names are case-sensitive and logging two events whose names differ only in case will result in two distinct events.

See FirebaseAnalytics.Event for more information.

User properties are information about the user that is recorded together with the events. Default collected user properties include user info (age, gender, country, language, interests), device info (brand, category, model) and app info (version, app store, first open time, new/established).

Appart from the implicitly collected user properties you can define your own. For that, however, you must use the Firebase console. You must be careful with the properties that you add because for now these cannot be renamed or deleted (you can only change their description).

Getting started

To be able to use Firebase for your Android or iOS app you need to enroll it. For that, you must create a project and then add applications to it.

  1. Open the Firebase console.
  2. Create a new project (or select an existing one).
  3. Add a new Android, iOS or web app.
  4. Follow to instructions to register the app, download the config files or perform other necessary setups.

If you need more help for setting up your app read the Firebase documentation or additional web resources.

Cordova plugin

There is an official Cordova plugin called cordova-plugin-firebase that provides push notifications, analytics, event tracking, crash reporting and other services from the Firebase platform for you Cordova application.

When you start using Firebase, make sure you have the config files properly setup (present and valid). Otherwise, your app will crash on boot or Firebase features won’t work.

Recording events and user properties

To record a user property you should call setUserProperty. This has the form:

The name is the case-sensitive name you defined in the Firebase console. In the example above the name was login_type and possible values were demo and live. The purpose of this is to indicate that for an application that supports a demo mode where the users don’t have to create an account to try the app, the user is either properly authenticated on or actually using the demo feature.

When this call is made the Debug view shows the change of the user property value in the live stream.

If you look at the recorded user properties for all following events you will see the logon_type with the demo value attached to it.

As mentioned ealier, there are a series of events that are automatically recorded. These include screen_view (collected whenever the page has changed) and user_engagement (collected periodically when the app is in foreground). However, you can send any other event, each with any number of parameters. To record events you must use the logEvent function that has the following form:

Let’s suppose that in your app users can bookmark items (whatever those items might be) but also remove them from the bookmarks (or favorites). You want to record the event of adding and removing an item. You can define an event called favorites_action with two parameters: action that can be either add or remove, and type, that indicates what kind of item was added or removed.

These are added automatically to the stream of events, recorded with both the the auto collected and user defined parameters and user properties.


All the events have several implicit parameters, including firebase_screen, firebase_screen_class, and firebase_screen_id. Screen class is the class name of the Activity, and the ID is a numerical ID that is probably hard to use to figure where the event came from. The screen name on the other hand (firebase_screen) is what you probably want to look at. This can be set with a call to setScreenName. All events will have the param firebase_screen set to the last value passed to setScreenName. Therefore, you probably want to make this call whenever the user opens a new page in your application. The call has the form:

Here is an example:

Debugging Firebase Analytics

The events recorded by Firebase are not instantly sent to the servers. Instead they are cached, archived and periodically dispatched. However, you can enable live streaming of events for debugging purposes, both on Android and iOS. This was used for all the screen shots used previously.

For Android devices:

  • To enable execute:
  • To disable execute:

For iOS devices:

  • To enable specify -FIRDebugEnabled as an argument in XCode
  • To disable specify -FIRDebugDisabled as an argument in XCode

For more information see Debugging Events.

, , , , , , Hits for this post: 988 .

I am building a hybrid mobile app with Visual Studio Tools for Apache Cordova that is able to make phone calls, send text message or emails, view a location on a map, etc. These are all handled with external applications (for instance use Gmail to send an email or Maps to pinpoint a location). They are placed in an anchor tag in HTML, such as <a href="tel:12345678">, <a href="sms:12345678">, <a href="mailto:name@domain.com"> or <a href="geo:...">. These work fine except that when you execute one of these actions and the system opens another app you see for a short time a webview with an error: “Web page not available”. Then the external app opens, you take the action and then go back to the app. At that point you again see this webview with the error as shown below.

ERR_UNKNOWN_URL_SCHEME when sending a text message

ERR_UNKNOWN_URL_SCHEME when sending a text message


This seem to be a known issue as I found many references of it on the web. Here are several for reference:

I am using the InAppBrowser plugin to open links in external apps. In order for this to work the schemes must be white-listed in Cordova’s config.xml file and the launch-external attribute should be set to true (which was already set in my case).

The indicated solution is to override WebView.shouldOverrideUrlLoading method.

I added the following in plugins\cordova-plugin-inappbrowser\src\android\InAppBrowser.java in the plugin’s WebView extension, but that did not work as the code did not even execute.

Looking for a solution I have noticed that this was only working OK for tel: and for others it was exhibiting this behavior. Then I found the following code in the InAppBrowser plugin class, in the execute() method.

I have changed that to include the other schemes and that fixed the problem.

With this in place, the web page error no longer shows up for any URL scheme.

I’m not sure if this is the best solution, but it is the only one that I managed to implement.

, , , , , , , Hits for this post: 27518 .

When you create a Cordova project with Visual Studio Tools for Apache Cordova it generates a set of splash screens for all supported iOS (both iPhone and iPad) resolutions. These are found under res\screens\ios.

Visual Studio project showing the splash screen images.

Visual Studio project showing the splash screen images.

XCode project showing the splash screen images.

XCode project showing the splash screen images.

There are two things to notice here:

  • First, the names in Visual Studio are like screen-iphone-portrait.png or screen-ipad-portrait.png and in XCode are like Default~iphone.png or Default-Portrait~ipad.png.
  • Second, if you actually look at the files you’ll see they are not the same. The splash screens generated in VS are ignored and default Cordova images are used.
Default Visual Studio splash screen image for iPhone.

Default Visual Studio splash screen image for iPhone.

Default Cordova splash screen image for iPhone.

Default Cordova splash screen image for iPhone.

You can see the default Cordova splash screen image in the iOS built if you open the generated XCode project on the Mac where the iOS app is built.

Splash screen image in the XCode project generated by Cordova.

Splash screen image in the XCode project generated by Cordova.

The questions are: why are the file names different in Visual Studio and XCode, and why are the images not correctly copied from Visual Studio project to XCode project.

I’ll start with the second question. The problem here is that just because the files are in the Visual Studio project does not mean much. If you open the Cordova configuration file, config.xml, it only contains this (for a newly created blank project):

However, if you look at the Cordova documentation for images and splashes you’ll see the config.xml file should contain something like this:

The names here look like the ones that appear in the XCode project. But key is the platform element with its splash children. We have to add these to the config.xml file, but it can only be done by manually changing the configuration file, as Visual Studio Tools for Apache Cordova do not support this in the IDE yet.

Note: the Visual Studio names for the splash screens were used here, not the Cordova ones.

With this change, when you build, the right splash files are generated for the application.

XCode project with correct splash screen images.

XCode project with correct splash screen images.

This leads us to the first question: why are the file names different in Visual Studio and XCode and how are they mapped correctly? If you set the MSBuild output to Diagnostic, you’ll see something like this in the output:

1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-ipad-landscape-2x.png to res\screens\ios\screen-ipad-landscape-2x.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-ipad-landscape.png to res\screens\ios\screen-ipad-landscape.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-ipad-portrait-2x.png to res\screens\ios\screen-ipad-portrait-2x.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-ipad-portrait.png to res\screens\ios\screen-ipad-portrait.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-568h-2x.png to res\screens\ios\screen-iphone-568h-2x.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-landscape-736h.png to res\screens\ios\screen-iphone-landscape-736h.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-portrait-2x.png to res\screens\ios\screen-iphone-portrait-2x.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-portrait-667h.png to res\screens\ios\screen-iphone-portrait-667h.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-portrait-736h.png to res\screens\ios\screen-iphone-portrait-736h.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-portrait.png to res\screens\ios\screen-iphone-portrait.png (TaskId:36)

and

1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-portrait.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default~iphone.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-portrait-2x.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default@2x~iphone.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-ipad-portrait.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-Portrait~ipad.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-ipad-portrait-2x.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-Portrait@2x~ipad.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-ipad-landscape.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-Landscape~ipad.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-ipad-landscape-2x.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-Landscape@2x~ipad.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-568h-2x.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-568h@2x~iphone.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-portrait-667h.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-667h.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-portrait-736h.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-736h.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-landscape-736h.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-Landscape-736h.png (TaskId:36)

Here is a table of the iOS splash screens with the mappings between Visual Studio files and Cordova files.

Resolution Device Model VS file Cordova file
320×480 iPhone 1st Gen, 3G & 3GS screen-iphone-portrait.png Default~iphone.png
640×960 iPhone 4 & 4S screen-iphone-portrait-2x.png Default@2x~iphone.png
640×1136 iPhone 5, 5C & 5S screen-iphone-568h-2x.png Default-568h@2x~iphone.png
750×1334 iPhone 6 screen-iphone-portrait-667h.png Default-667h@2x~iphone.png
1242×2208
2208×1242
iPhone 6 Plus screen-iphone-portrait-736h.png
screen-iphone-landscape-736h.png
Default-736h@3x~iphone.png
Default-Landscape-736h.png
768×1024
1024×768
iPad 1, 2 & Mini screen-ipad-portrait.png
screen-ipad-landscape.png
Default-Portrait~ipad.png
Default-Landscape~ipad.png
1536×2048
2048×1536
iPad Air & Mini Retina screen-ipad-portrait-2x.png
screen-ipad-landscape-2x.png
Default-Portrait@2x~ipad.png
Default-Landscape@2x~ipad.png

Note: Though the actual iPhone 6 devices are down-sampled to a resolution of 1080×1920, the splash images must have the size of 1536×2048 and 2048×1536 pixels.

Note: Also take notice that for iPhone 6 Plus, unlike all the other iPhone models, you must provide both portrait and landscape splash screens (just like with iPads).

But where are the mappings handled? In the cordova-lib module there is a file called ios_parser.js where you can find the following code:

This code shows an array of (source) splash screens as defined in the config.xml file and an array of pre-defined target splash screen files and their expected resolution. The splash screens in these arrays are mapped by their size (width and height) and source files are copied into destination files. This means that the actual source file names are not important, and in fact you can name your files in any way you want, with the right size they will be correctly mapped.

Note: Be aware of a subtle issue: just copying content from the Cordova documentation for images and splashes to your config.xml file and changing file names won’t work. The path in the Cordova docs looks like res/screen/ios/ while the Visual Studio project path is res/screens/ios/. The mismatch of screen and screens can lead headaches trying to figure out why splash screen images are not correctly setup.

, , , , , , Hits for this post: 21495 .

Visual Studio Tools for Apache Cordova (VSCordovaTools for short) is a great Visual Studio toolset to develop hybrid applications for multiple platforms, including Android, iOS and Windows. One of the nice things about the tool is that it installs everything you need to develop with Cordova. You don’t have to care about installing multiple components, runtimes, setting system environment variables, etc. However, one of the drawbacks is that it is not currently supporting updating those components to newer versions.

The latest release available for VS 2013 is CTP 3.1 and this build comes with Cordova 3.5.0. Should you need to use a newer version you have to do it manually. In this blog post I will list all the steps you need to do to update to the latest version Cordova (currently 5.1.1) both on Windows and on Mac (where you build the iOS version of the hybrid apps). However, in these steps I will also include how to update Node.js and npm.

Update Cordova on Windows

Note: Make sure you close all instances of Visual Studio before starting this process.

  1. Download and install the latest version of Node.js from nodejs.org.
  2. Update npm. To check your current npm version run the following command in a console:

    To update to the last version of npm run the following command in a console (elevated As Administrator):
  3. Update Cordova. To check your Cordova version run the following command in a console:

    To update to the last version of cordova run the following command in a console (elevated As Administrator):
  4. Update the vs-mda version of Cordova with the latest you just installed in the previous step. Cordova is (globally) installed at %APPDATA%\npm\node_modules\cordova. vs-mda copy of Cordova is available at %APPDATA%\npm\node_modules\vs-mda\node_modules\cordova. Replace the entire content of this folder with the one of the global Cordova installation.
  5. Install missing modules (this might depend on the latest version you install). For 5.1.1 I had to install concat-map and balanced-match. If anything else is necessary it should show up in the output log when you build your Cordova project.

Update Cordova on Mac

Note: Make sure you stop the vs-mda-remote agent before performing this upgrade.

  1. Open a Terminal session and run the following command:
  2. Update the vs-mda-remote version of Cordova with the the latest you just installed in the previous step. Cordova is (globally) installed at /usr/local/lib/node_modules/cordova. vs-mda-remove copy of Cordova is available at /usr/local/lib/node_modules/vs-mda-remote/node_modules/cordova. Replace the entire content of this folder with the one of the global Cordova installation.
  3. Restart the vs-mda-remote agent.

With all these installed you should be all set to start building with the latest version of Cordova.

, , , , , , Hits for this post: 22423 .

I was working on transforming a Windows Store app into an Universal app so that it worked not just for Windows Store but also for Windows Phone. When you do this two new projects are added to the solution. One of them is a special one, called shared project that you can use to keep files shared between platforms.

universalapp1

universalapp2

In my case, one of those shared files were the App.xaml and App.xaml.cs. So what I did was moving these files from the original Windows Store app to the shared folder and then delete the copies from each platform specific project.

universalapp3

When I did this however, I run into several problems.

C:\Program Files (x86)\MSBuild\Microsoft\WindowsXaml\v12.0\8.1\Microsoft.Windows.UI.Xaml.Common.targets(327,9): Xaml Internal Error error WMC9999: Object reference not set to an instance of an object.

This was fixable by rebuilding the project. However, a new error appeared:

CSC : error CS5001: Program ‘c:\Work\Demos\DemoApp\obj\Debug\intermediatexaml\DemoApp.exe’ does not contain a static ‘Main’ method suitable for an entry point

Everything looked good, but whatever I tried the error still persisted. Eventually, I figured it out that the build action for the App.xaml file was wrong. When the files where included in the project, App.xaml was added as a simple Page.

universalapp4

However, this is not a regular page, it’s an application definition and the build action must be manually changed accordingly.

universalapp5

When you make this change and rebuild again (a simple build won’t suffice) everything works fine again.

, , , , , Hits for this post: 23659 .

My first Windows Store app (for Window 8.1) is now available in Windows Store. It’s called Your Chemical Name and shows names (and text) using chemical elements symbols in the Breaking Bad style.

yourchemicalname11

The application allows to:

  • customize the appearance of text, colors, background
  • customize the position of the text on the background
  • save image to a file
  • post image on a facebook album
  • share image with other apps

yourchemicalname12

yourchemicalname13

yourchemicalname14

You save the images to disk or share them on facebook or with apps supporting the Windows Share Charm.

yourchemicalname15

Here are a few screenshots:
yourchemicalname2

yourchemicalname3

yourchemicalname5

More about the application here.

Download Your Chemical Name from Windows Store.

, , , , , , , Hits for this post: 31811 .