Firebase Plugin

Plugin Reference: sf-plugin-firebase on GitHub

As a plugin, this plugin only works when published. Will not perform any action with regular run-on-device scenarios. Firebase gives you the tools to develop high-quality apps, grow your user base, and earn more money. We cover the essentials so you can monetize your business and focus on your users.


Smartface Firebase plugin can be installed via npm easily from our public npm repository. The installation is pretty easy via Smartface Cloud IDE.

  • Run command in terminal (cd ~/workspace/scripts && npm i -S sf-plugin-firebase)


Installation script automatically configures project.json. Please verify following records are in place. Configuration is needed once only


You can manually access the file from the link below. Sample :

Step 1

Download GoogleService-Info.plist from Firebase console and placed this file into workspace's /assets directory.

Step 2

Add firebase plugin to config/project.json.

"firebaseios": {
"path": "plugins/iOS/",
"active": true,
"crashlytics": true


Building Android Plugin It is necessary to place a few files & modification in order to use firebase plugin. Follow the below steps;

Step 1

Download google-services.json from Firebase console

Step 2

  • Place google-services.json file into ~/workspace/config/Android

  • This repository contains prepared android library project under ~/Native/Android directory.

  • Finally, specify firebase plugin library to config/project.json.

"plugins": {
"modules": {
"firebaseplugin": {
"path": "plugins/Android/firebaseplugin",
"active": true

Step 3

  • Get senderID from firebase and edit config/project.json's senderID ⇒ (senderID = gcm_defaultSenderId )

"googleCloudMessaging": {
"senderID": "${senderID}"

Step 4

  • Open this lines in config/Android/AndroidManifest.xml file.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

Step 5

  • By default, crashlytic and its ndk is disabled so enable it, apply plugins & specify library project in dependencies.gradle which is located under ~/workspace/config/Android folder. Such as;

dependencies {
implementation project(":firebaseplugin")
apply plugin: ''
apply plugin: '' //(Optional)
apply plugin: 'io.fabric'
crashlytics {
ext.enableCrashlytics = false
  • Congrats you have just done Android configuration.

Note: By post-install scripts, Firebase's Android & iOS libraries/zip will be placed to appropriate paths and specify the its configuration to config/project.json

API docs

After initializing the Firebase, Firebase APIs can be used.

  • Full API Docs - You can use intelliSense on Smartface Cloud IDE for better & faster development.

  • Predefined Analitics Events - You can access the values from code via intelliSense on


  • Initialize your SDK using the following code snippet: (You must write this code in app.ts)

Firebase has to be initialized before any use.

import Firebase from 'sf-plugin-firebase';
import File = require('sf-core/io/file');
var iOSPlistFile = new File({
path: 'assets://GoogleService-Info.plist'
var firebaseConfig = {
iosFile : iOSPlistFile
import Fabric from 'sf-plugin-firebase/fabric';
import Crashlytics from 'sf-plugin-firebase/fabric/crashlytics';
import Answers from 'sf-plugin-firebase/fabric/answers';
if (Firebase.apps().length === 0) {
Fabric.with([new Crashlytics(), new Answers()]);

Sample Page for Crashlytics

import Crashlytics from 'sf-plugin-firebase/fabric/crashlytics';
import Answers from 'sf-plugin-firebase/fabric/answers';
import Page1Design from 'generated/pages/page1'; // Generated default page on ts workspace
export default class Page1 extends Page1Design {
constructor () {
this.onShow = onShow.bind(this, this.onShow.bind(this));
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
function onShow(superOnShow) {
this.statusBar.visible = true;
this.headerBar.visible = true;
You can use Crashlytics.setUserIdentifier to provide an ID number, token, or hashed value that uniquely
identifies the end-user of your application without disclosing or transmitting any of their personal
information. This value is displayed right in the Fabric dashboard.
// If you would like to take advantage of advanced user identifier features, you can additionally use both:
Crashlytics allows you to associate arbitrary key/value pairs with your crash reports, which are viewable
right from the Crashlytics dashboard. Setting keys are as easy as calling: Crashlytics.setString(key, value)
or one of the related methods. Options are:
Crashlytics.setString("key", "value");
Crashlytics.setBool("key", true);
Crashlytics.setFloat("key", 15.5);
Crashlytics.setInt("key", 12);
To log a custom event to be sent to Answers, use the following.
You can also include a series of custom attributes to get even deeper insight into what’s happening in your
In addition to the recommended attributes for each event, you can also add custom attributes for any event.
To log an event with a custom attribute, use the following.
// Value must be only string or number
new Answers.CustomAttribute("key1","value1"),
new Answers.CustomAttribute("key2",2)
function onLoad(superOnLoad) {


All of the samples assumes that initialization has been completed

Push Notifications

import * as Application from 'sf-core/application';
import Firebase from 'sf-plugin-firebase';
* Init code
Application.onReceivedNotification = (e) => {
alert("Notification: " + typeof e);
alert("Notification: " + JSON.stringify(e.remote));
Firebase.messaging.subscribeToTopic("all"); //this triggers register for notifications

Sample Analytics

import Firebase from 'sf-plugin-firebase';
* Init code