Push notifications with Firebase/Angular


#1

i followed a tutorial to set up the push notifications with firebase on my app and i was able to made that notifications run if my app is on background but when i send a notification with the app in foreground i cant catch the notification.

i only found this two links with documentation about it:

https://www.npmjs.com/package/nativescript-push-notifications

But the examples was make without angular and the only code that i saw to catch the notifications was this:

var pushPlugin = require("nativescript-push-notifications");
    var self = this;
    pushPlugin.register({ senderID: '<ENTER_YOUR_PROJECT_NUMBER>' }, function (data){
        self.set("message", "" + JSON.stringify(data));
    }, function() { });

    pushPlugin.onMessageReceived(function callback(data) {
        self.set("message", "" + JSON.stringify(data));
    });

where i shoud put this code to run it on angular?

If anyone have some example running on angular i would be very gratefully

Thanks in advance


#2

I’ll be writing a tutorial on this as soon as I can get to it this week. Sounds like a major pain point. It’ll be done in Angular, no fear. :slight_smile:


#3

Thank you jen, i’ll be waiting!


#4

Finally i found the solution, just put the next code after initialize firebase on main.ts:

    firebase.addOnMessageReceivedCallback(function (data ){
          console.info("message", "" + JSON.stringify(data));
    })     

You could put it whereever you want capture the notification, for example in the constructor of a component…

The full file :

import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
import { AppModule } from "./app.module";
import firebase = require("nativescript-plugin-firebase");
import { BackendService } from "./shared/backend.service";
import { Router, CanActivate } from "@angular/router";


firebase.init({
  
  persist: false,
  storageBucket: 'gs://xxxxxxxxxxxxxxxxxxxxxxx',
  onAuthStateChanged: (data: any) => {
    if (data.loggedIn) {
      // do something
    } else {
     // do something
    }
  
  }
}).then(
  function (instance) {
    console.log("firebase.init done");
  },
    function (error) {
      console.log("firebase.init error: " + error);
    }
  );

    firebase.addOnMessageReceivedCallback(function (data ){
          console.info("message", "" + JSON.stringify(data));
    })     


platformNativeScriptDynamic().bootstrapModule(AppModule); 

The push plugin is not necesary finally…


#5

The ZetPush https://zetpush.com/ is the most reliable push notification in my opinion.