Integrate NativeScript With Google Firebase Notification (FCM ) In Android

In this article, we will learn how to use NativeScript using Angular2 and TypeScript to build a native Android mobile app that is integrated with Google's notification service Firebase Cloud Messaging (FCM).

Prerequisites

Install node.js.
Install NativeScript - Open Command Prompt and type the following command.

npm install -g nativescript
Install Java 1.8
Install Android SDK (23 or later)
Open system properties, then add ANDROID_HOME environment variable and set its value with Android SDK path c:\\Android\android-sdk

Then, add SDK tools to the PATH variable - %ANDROID_HOME%/tools
You must have at least one AVD (Android Virtual Device) configured on your development machine.
If you don’t have any AVD, open CMD Prompt and type " android"

Open "Tools" menu at the top, then select manage AVDs.

Click on "Create" button.

Set AVD Settings.

Create native script app

Create new native script app using existing template (groceries). For this, open the command prompt, browse root folder for the project, and then type

tns create Groceries --template nativescript-template-ng-groceries
Browse the created project to install required library, using the below command.

npm install require
Install all libraries.

npm install
Change component template in NativeApps\Groceries\app\app.component.ts to be as the below code to create login screen.
1. import {
2. Component
3. } from "@angular/core";
4. @Component({
5. selector: "my-app",
6. template: `
7. <StackLayout>
8. <TextField hint="Email Address" keyboardType="email"
9. autocorrect="false" autocapitalizationType="none"></TextField>
10. <TextField hint="Password" secure="true"></TextField>
11. <Button text="Sign in"></Button>
12. <Button text="Sign up for Groceries"></Button>
13. </StackLayout>
14. `
15. })
16. export class AppComponent {}
Run the app on Android

tns run android

This command will create an Android platform in C:\NativeApps\Groceries\platforms

Integrate NativeScript with FCM

Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably deliver messages at no cost. Now, we will integrate our NativeScript app with Firebase.

Install clipboard plugin to copy Firebase registered device key later.

tns plugin add nativescript-clipboard
Install Firebase plugin.

tns plugin add nativescript-plugin-firebase
Browse node_modules/nativescript-plugin-firebase to run the setup of Firebase on our app.

npm run setup
To reset the configuration again, use the below command.

npm run config
Create googleservices.json file from https://firebase.google.com/

i. Login using your Google account

ii. Create new project called (for example) NativeApps

iii. Get app package name from C:\NativeApps\Groceries\package.json
"nativescript": {
"id": "org.nativescript.Groceries",
"tns-android": {
"version": "2.4.1"
}
iv. Click on "Add Firebase to your Android app" icon.

v. Put app package name, then click "ADD APP" button. Click "Continue", then "Finish".

vi. Then, it will download google-services.json automatically in your download folder.

vii. Copy google-services.json into C:\NativeApps\Groceries\app\App_Resources\Android

viii. Update C:\NativeApps\Groceries\app\main.ts to initiate Firebase plugin and handle MessageReceivedCallback to display dialog box as well as put device token in clipboard to use it later for sending the notification for specific device.
import {
platformNativeScriptDynamic
} from "nativescript-angular/platform";
import {
AppModule
} from "./app.module";
const dialogs = require("ui/dialogs");
let deviceToken = "";
setTimeout(function() {
let firebase = require("nativescript-plugin-firebase");
let clipboard = require("nativescript-clipboard");
firebase.init({
onPushTokenReceivedCallback: function(token) {
dialogs.alert("--onPushTokenReceivedCallback token :" + token);
clipboard.setText(token).then(function() {
console.log("OK, copied to the clipboard");
});
deviceToken = token;
console.log("Firebase push token: " + token);
},
onMessageReceivedCallback: function(message) {
dialogs.alert({
title: "Push message: " + (message.title !== undefined ? message.title : ""),
message: JSON.stringify(message),
okButtonText: "OK"
});
dialogs.alert("--onMessageReceivedCallback deviceToken :" + deviceToken);
clipboard.setText(deviceToken).then(function() {
console.log("OK, copied to the clipboard");
});
// clipboard.setText(deviceToken).then(function() { console.log("OK, copied to the clipboard"); });
},
//persist should be set to false as otherwise numbers aren't returned during livesync
persist: false,
//storageBucket: 'gs://yowwlr.appspot.com',
onAuthStateChanged: (data: any) => {
console.log(JSON.stringify(data))
if (data.loggedIn) {
//nn// BackendService.token = data.user.uid;
} else {
//nn// BackendService.token = "";
}
}
}).then(function(instance) {
console.log("firebase.init done");
}, function(error) {
console.log("firebase.init error: " + error);
});
}, 3000);
platformNativeScriptDynamic().bootstrapModule(AppModule);
Now, we have to run the app.

tns run android
Copy c:\NativeScript\Groceries\platforms\android\build\outputs\apk\Groceries-debug.apk to an Android mobile that has an internet connection.
When the app is running, the FCM token for this device will be stored in clipboard, so we can use it to send the notification for this specific device. Later, we can store it in database.
Finally, send notification from Google to the app or to the specific device.

i. Click on "Notifications" in left menu.

ii. Click on "Send your first message" and insert message details such as text, app, sound,…

iii. When sending the message and the app is running, the following screen will display.

References

http://docs.nativescript.org/angular/tutorial/ng-chapter-0
https://firebase.google.com/docs/cloud-messaging/
https://github.com/EddyVerbruggen/nativescript-plugin-firebase
https://discourse.nativescript.org/t/how-to-implement-push-notification-on-nativescript-angular-2/173/23

2 Comments

Join the conversation! Your thoughts help the community grow.

Nesreen Maged8y ago
Hi,1.Install Android SDK (23 or later) 2.Open system properties, then add ANDROID_HOME environment variable and set its value with Android SDK path c:\\Android\android-sdk
Sarvesh Kumar8y ago
Hi Nesreen Maged , I received following error "The ANDROID_HOME environment variable is not set or it points to a non-existent directory. You will not be able to perform any build-related operations forAndroid."