How to implement push notification on Nativescript Angular 2


#21

tried that…yes on device… oh dear


#22

Are you receiving the notification message on firebase.addOnMessageReceivedCallback ? if not maybe you are sending wrong the message on firebase.


#23

After extensive work with Eddy, it turns out Angular is the culprit!!! Per Eddy: “As NativeScript Angular hijacks the appdelegate which push notifications rely heavily on.” So you need to set a timeout after you receive the token, like this:

/ this import should be first in order to load some required settings (like globals and reflect-metadata)
import { platformNativeScriptDynamic } from "nativescript-angular/platform";

import { AppModule } from "./app.module";
import { BackendService } from "./services/backend.service";
const dialogs = require("ui/dialogs");

setTimeout(function() {
 let firebase = require("nativescript-plugin-firebase");
 firebase.init({
   onPushTokenReceivedCallback: function(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: "W00t!"
     });
   },
   //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) {
       BackendService.token = data.user.uid;
     }
     else {
       BackendService.token = "";
     }
   }
 }).then(
     function (instance) {
       console.log("firebase.init done");
     },
     function (error) {
       console.log("firebase.init error: " + error);
     }
 );
}, 3000);

platformNativeScriptDynamic().bootstrapModule(AppModule);

and you get a push for the backgrounded app!!!


#24

Can you help me with a step by step tutorial for push notification as am confuse with push notification plugin or firebase plugin for ios?


#25

I’ll be working on this tutorial next week


#26

@jen.looper: question is that… I have implemented plugin but I do not have much idea to handle push notification and navigation to respected screen…
I have developed project using Angular2…

Do we have any sample project to handle push notification onMessageReceivedCallback method…??


#27

@jen.looper

I am also trying to implement notifications and a sample project would be very much appreciated.

Also, Iam trying to get the notifications go sit in a inbox on the app. Can you suggest how this can be handled?

regards
Katy


#28

hi @katy, thanks for your note.

I have push notifications working (the code in main.ts is currently commented out) right now using Firebase with a NativeScript Angular app here: http://www.github.com/jlooper/yowwlr

I find that backgrounded notifications right now are buggy on iOS specifically, - on Android they seem to work fine. This is stopping me from writing a blogpost on it, though, but working on it.

There are other push solutions out there if you don’t want to use Firebase. OneSignal is one, and we have a plugin for it on plugins.nativescript.org. I’ve used Pushbots with great results in the past too.

For your own use case, you could initialize the push service in main.ts, and then copy the push messages into a database to display permanently (until the user deletes them, anyway) in your app’s inbox. Curious what you are building! :slight_smile:


#29

hi @jen.looper,

Thanks for the quick reply, and recommending how we could save the messages to show in the inbox.Iam new to nativescript ng2, but will try and implement it :heart_eyes:

One of the key features in our app is a system by which users can thank each other. For example, when user x appreciates something by user y, user y gets a thanks. I am trying to use the push notifications to do the following
a. when user x presses a “Thanks” button the app needs to generate a push notification message to user y
b. use FCM to send the message to user Y
c. and then user Y can see it in his/her system tray (if in background) or in the inbox if in foreground)

  1. Iam assuming using push notifications would be the right thing in this case. Would that be correct?

  2. How can i trigger a push notification from one device/ app instance to another? Is there a method to do this?

  3. Further, reading your note it seems like I should explore one signals or push bots to implement the above (i expect many users will be on iOS). Am I understanding that correctly?

Thanks again,
Katy


#30

hi, I think using push notifications for this would be great, sort of like what the ‘Happier’ app does.

You can trigger a push from device to device using Firebase, but it requires a little more work: https://firebase.googleblog.com/2016/08/sending-notifications-between-android.html

Each push notification service is slightly different. I think you should look at all the implementations and decide what works best for you. We unfortunately don’t have a plugin for pushbots (yet) but OneSignal looks particularly promising and we have a plugin for it. We do have our own push service at Telerik, Telerik Backend Services, which is yet another option! Bottom line, it depends on your requirements and pricing considerations.


#31

I can confirm that setting a timeout works! Thank you so much @jen.looper

This is not Angular related btw. It fixed it for me on a --tsc build too


#32

Hey, Did you find any solution to redirect a user to a particular route when a notification is tapped?

PS: Angular way?


#33

In firebase.init code

	onMessageReceivedCallback: (message: any) => {
				if (message['route']) this.router.navigate(message.route);
			    if (message['toast']) this.toast.show(message.body)
			}

This is the way I am doing it


#34

Sorry if I’m digging up some old skeletons here, but I figured this would be useful for people when it comes to push notifications in iOS:

As of right now, the push notification plugin for NativeScript only generates APNS tokens for iOS, not FCM tokens. This means when you try to use those tokens with the Firebase APIs, it will fail. Instead you need to convert those APNS tokens to FCM tokens, then it will work.

Above is a solution until FCM is baked into the plugin for iOS, not just Android.


#35

how to implement real time notification


#36

@lukashlobil I had a question.
When the app is in the background and you receive a notification. On tapping on the notification are you able to route to the desired location on both android and IOS. In our case it works only on IOS and not on android?
Thanks