C2 Push Notification using Cordova FCM

FirebaseCloudMessaging is simple C2 plugin that can be used to send messages (push notification) to mobile devices using the free Google firebase cloud messaging (FCM) service. The plugin uses Cordova Firebase Plugin, so C2 should be exported as Corodva project then complied to APK as described below. Note: cordava-ios, seems to be working but we did not test it.

Installing FirebaseCloudMessaging Plugin

Installing FirebaseCloudMessaging Plugin

  1. Open C2 plugin Folder:

i.e: C:\Program Files\Construct 2\exporters\html5\plugins

  1. Drop the folder (FirebaseCloudMessaging) into C2 plugin folder
  2. Restart C2

Using FirebaseCloudMessaging Plugin

(C2 Example can be founded at: plugin folder/ Example-Test)

Call the three actions on the start of the layout:

  1. CheckTokenID: Try to get Token ID (Trigger Conditions: OnTokenID, OnTokenIDError)
  2. CheckTokenIDRefresh: Use it once on the start of the layout to check if Token ID has been refreshed (Trigger Conditions: OnTokenIDRefresh)
  3. CheckNotificationOpen: Use it once on the start of the layout to check if Notification has been opened (Trigger Conditions: onNotificationOpen)

Create three condition to handle the triggered for each action:

  1. OnTokenID: Return true if has a Token ID, save “TokenID” afterword. Usually save this token at server-side and use it to push notifications to this device.
  2. OnTokenIDRefresh: Check if Token ID has been refreshed (changed), save “TokenID” afterword. Similarly, save this token at server-side and use it to push notifications to this device. Note: The difference between OnTokenID and OnTokenIDRefresh, the former is triggered after calling the action CheckTokenID manually, the later will register for token changes (triggers anytime token is changed)
  3. onNotificationOpen: Check if Notification has been opened, use “FirebaseCloudMessaging.Notification” afterword to get notification information as string.

Notification flow as follows

  1. App is in foreground: 
    onNotificationOpen is triggered (without any notification on the device itself), notification data can be read using (FirebaseCloudMessaging.Notification).
  2. App is in background
    User receives the notification message in its device notification bar.
    User taps the notification and the app opens.
    onNotificationOpen is triggered and notification data can be read using (FirebaseCloudMessaging.Notification)

 

Exporting & Building

Video tutorial:  Push Notification (FCM) using Construct 2 and Cordova Plugins

First step to export C2 project you need to add your project ID. It should match project ID you’ve created at Google FCM. So, we will create FCM android project first:

Create account and create project at FCM:

  1. Login to firebase console: https://console.firebase.google.com/
  2. Create a project: add Project => Name it => Enable Google Analytics => Continue => Choose or create a Google Analytics account => Create Project
  3. Add android project: Register app => Add project ID => Download google-services.json file.

Export C2 Project

  1. Update project ID (to match FCM ID)
  2. Export Cordova (android)

 Build Using Cordova

>cordova –v                        (to check cordova-cli version)

>cordova platform list    (to check android version)

Based on the above output, add cordova plugin as follows:

cordova-cli cordava-ios  cordava-android Plugin to be used
>= 9.x.x >= 5.0.1 >= 8.x.x cordova plugin add cordova-plugin-firebase-lib
<= 8.1.1 <= 4.5.5 >= 8.x.x cordova plugin add [email protected] –save
<= 7.1.0 <= 4.5.5 <= 7.1.4 cordova plugin add [email protected] –save

 

Send Test Notifications

Use our free online firebase tester (you can get your own copy)

Server Key: Your FCM server key (can be found at: Firebase console => Settings => Project credentials => Server Key)

Token ID: that you will get from mobile device.

Add other paramters and click send.

Support

 

Please contact me at: [email protected]