CODEWITHSUNDEEP
angularfirebasenativescript
Aubrey Quinn
Aubrey Quinn

Reputation: 311

How to receive push notifications with NativeScript & Angular?

I’m working on trying to get push notifications working on my project. I’m working on a new project with NativeScript and Angular 8.

I have created a free account with Firebase:

https://console.firebase.google.com/

I linked my app id to the Firebase project and added Android. I downloaded the file ‘google-services.json ’ and put it in app/App_Resources/Android/google-services.json

I found a plugin for NativeScript for using Firebase:

https://github.com/EddyVerbruggen/nativescript-plugin-firebase

I followed the steps on both the firebase console and on the plugin github page but I’m not getting any notifications through on my phone.

How can I get my app to receive the push notifications?

Here is my app.components.ts file:

import { Component, OnInit } from "@angular/core";
const firebase = require("nativescript-plugin-firebase");
//import * as firebase from "firebase";

@Component({
    selector: "ns-app",
    templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {

    ngOnInit() {
      firebase.init({

        showNotifications: true,
        showNotificationsWhenInForeground: true,

        // Optionally pass in properties for database, authentication and cloud messaging,
        // see their respective docs.

        onPushTokenReceivedCallback: (token) => {
          console.log('[Firebase] onPushTokenReceivedCallback:', { token });
        },

        onMessageReceivedCallback: (message) => {
          console.log('[Firebase] onMessageReceivedCallback:', { message });
        }

      }).then(
        () => { console.log("firebase.init done"); },
        error => {
          console.log(`firebase.init error: ${error}`);
        }
      );
    }

}

package.json:

{
  "nativescript": {
    "id": "org.nativescript.FireBaseTest2",
    "tns-android": {
      "version": "6.1.2"
    },
    "tns-ios": {
      "version": "6.1.0"
    }
  },
  ....

Here are my push notification attempts:

enter image description here

Upvotes: 2

Views: 2002

Answers (2)

athira renjan
athira renjan

Reputation: 31

From Nativescript app side you need to do the following for working with FCM.

1)Add the google-services.json file from fcm to the path

"App_Resources/Android"

2)Add nativescript firebase plugin based on your ns version if above NS 7 use following

tns plugin add @nativescript/firebase

3)Add the following dependency inside the "App_Resources/Android/app.gradle file

dependencies {
 implementation 'com.google.firebase:firebase-iid'
}

4)Add firebase init code inside the app.component.ts

    ngOnInit(): void {
       firebase.init({
          showNotifications: true,
          showNotificationsWhenInForeground: true,
    
          onPushTokenReceivedCallback: (token) => {
            console.log('[Firebase] onPushTokenReceivedCallback:', { token });
          },
    
          onMessageReceivedCallback: (message: firebase.Message) => {
            console.log('[Firebase] onMessageReceivedCallback:', { message });
          }
        })
          .then(() => {
            console.log('[Firebase] Initialized');
          })
          .catch(error => {
            console.log('[Firebase] Initialize', { error });
          });
}

Upvotes: 0

Fabio
Fabio

Reputation: 21

Your code looks okay.....

Just copy the token from the app console log when firebase is initialised, then use it in the firebase console when sending the message to the target device.

Upvotes: 2

Related Questions