I've been searching on how to make a bridge between React Native and Android Native code for a while, but I still don't quite get it. I've read the documentation here , but I don't quite understand it.
What I want to do is, I want to build an apps that utilize push notification, but since I need to push message to China, I can't use GCM (thanks to the great firewall), so I use another third party push SDK.
I've managed to integrate the push into my apps (resulting a console.log() message whenever I push something), the next step is I want to re-route it to certain page
Any help will be appreciated :)
Note: If you are using common push notification (i.e. GCM and APNS), use this instead. Since I need to use another third party push service, I need to find a way myself to bridge the SDK (which is native) to React Native.
So after several hours tinkering with this problem, I found a solution for my problem. This solution divided into 2 parts:
emitter, this will emits an event whenever the server send a push.
listener, this will listen to the event that you emits before.
emitter
This happens on the native side (Android in my case)
For this part I learnt it from how this library did using GCM. And found a tutorial here on the RN documentation.
Basically after you receive your push on SomeBroadCastReceiver onReceive() function, you can pass the bundle as params in this function
reactContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
//this eventName is a key so you need to remember it, because you need to call it on the listener
.emit(eventName, params);
listener
The listener will be built on the RN side. this documentation helps me. I missed this documentation before, because it only appear in the RN iOS docs only.
import { NativeEventEmitter, NativeModules } from 'react-native';
//import your already created package name here
const { YourCustomPackageName} = NativeModules;
then in ComponentWillMount()
const yourCustomPackageEmitter = new NativeEventEmitter(YourCustomPackageName);
pushListenerEmitter.addListener(eventName, this.handlePush, this);
then you just need to create handlePush function and get the params there
handlePush = (event) => {
console.log('event triggered..');
console.log(event);
}
The best way to do push notification is Deep Linking. If you are using React Navigation its much simple to do. Deep Linking React Native
You can define unique URL like yorApp://employee/1 and navigate easily to that screen.
Related
I am developing app using react native and expo & I have to implement push notifications in app. So far sending and receiving the notifications has no issues but my problems are mainly related to UI design on push notification panel :
Following is my simple notification message configuration :
scheduleNotificationAsync({
content: {
title: “You’ve got mail! :mailbox_with_mail:”,
body: ‘Here is the notification body’,
data: { data: ‘goes here’ },
},
})
Is there any way to design multi line notification?
I can use title, subtitle (which only works in iOS) but I want multiple lines in body part. I tried using \n in my body text but it doesn’t work.
How to navigate to specific screen in app when button is pressed in notification?
I have setup sample category as below :
Notifications.setNotificationCategoryAsync(“daily_question”, [
{
actionId: “yes”,
buttonTitle: “Yes”,
},
{
actionId: “no”,
buttonTitle: “No”,
},
]);
I would like to navigate to specific screen upon pressing of “Yes/No” button but I’m not able to figure out/able to find out, how I can write any action code in configuration.
Is there any way I can design the notification panel content UI part as html/jsx code to have better control over how UI will look like?
Is there any way to add image/table kind of components in notification ui?
It seems like adding image to push notification is under consideration.
Any pointers/guidance on achieving above points using expo notification?
If expo notification, cannot achieve above functionalities then what are my options?
Thanks
You have a lot of questions but I can respond to some of them.
"I would like to navigate to a specific screen upon pressing of “Yes/No” button...."
For navigating to a specific screen upon yes/no you should check this link which contains "Managing Notification Categories" and there're useful functions how to achieve that behavior. I leave the link below. If you have difficulties to find the exact way to do write here one comment, then I will leave a detailed explanation.
https://docs.expo.dev/versions/latest/sdk/notifications/#managing-notification-categories-interactive-notifications
"Is there any way I can design the notification panel content UI part as..."
In expo managed projects it is almost impossible to design the UI of notification panel
"Is there any way to add image/table kind of components in notification ui"
In Expo managed projects there is no option to add images to the notification panel, you should eject the project to do that.
"If expo notification, cannot achieve [...] are my options"
You should eject the project and start to write native code which is not recommended if you are a newbie in react-native and expo.
But if you eject to a bare project then you will have full access to your application and you can modify everything that needs native code.
Recommendation: Try to understand what you can do with managed and bare projects then you will understand what you can modify and what you can't. I leave the link below with a full explanation of the difference.
https://docs.expo.dev/introduction/managed-vs-bare/
I was asked to develop a sample app integrated with Amazon Pinpoint. Since I am not a pro at developing apps, I decided to follow this simple tutorial and develop the app following the steps described in it. The only differences are that, instead of using an emulator, I executed the project in my own cell phone (a Xiaomi Redmi 4x) and instead of GCM, I used Firebase.
At first, it seemed to work perfectly, but when I moved the app to the background and went back to my homescreen, I could no more receive push notifications from my app. When the app is open and running, everytime I send a push notification a pop-up appears with Title "New Notification" and buttons "Ignore"/"View". But when in background, nothing is visible in my system tray!
Also, if someone knows which part of the code is responsible for this notifications, just warn me and I upload it here.
Okay, so after some tests I made it work (not through console, but through CLI). To do so, I followed some steps I found this question, that took me to two other documents: one from Amazon teaching how to send push notifications through CLI and a simple but very detailed tutorial of phonegap-plugin, the plugin used in our Ionic application to process the pushes.
First of all, replace the phonegap-plugin in your app with the master version avaliable in the github link I sent you.
Then, putting all those information together, I figured out how to write a .json file containing the information we need to send the pushes. Here is a sample of the code I used:
{
"MessageRequest": {
"Addresses": {
"YOUR_DEVICE_ADDRESS_HERE": {
"ChannelType": "GCM"
}
},
"MessageConfiguration": {
"GCMMessage": {
"RawContent": "{\"data\":{\"title\":\"StackOverflow rocks!\",\"body\":\"Am I right?\",\"actions\":[ { \"title\":\"Yes!\", \"callback\":\"app.yes\", \"foreground\":true }, { \"title\":\"No!\", \"callback\":\"app.no\", \"foreground\":false }]}}"
}
}
}
}
As you can see, to change the content in the push notificationm, you'll have to edit it's "RawContent". To do so, use the phonegap-plugin tutorial I sent you and find out how to do the alterations you wish.
Last step: once you updated your plugin version AND saved the code above in a .json file (let's call it test.json), you can send it to your phone oppening command line in the folder containing your .json and writting:
aws pinpoint send-messages --color on --region YOUR_SERVICE_REGION --cli-input-json file:///test.json
This should do the trick! Hope it works for you. If any doubts, just let me know!
I am successfully sending Push Notifications from the Mixpanel Dashboard to a Cordova app on both iOS and Android devices, using phonegap-plugin-push.
However, the title and body values entered in the default fields only appear on iOS devices.
For the notification to appear on Android devices, I currently need to include a custom payload in Mixpanels "Custom Data":
{
"title":"Title for Android only",
"body":"Content for Android only"
}
This is an error prone step for any non-technical using Mixpanel to send notifications.
Does someone know an easier way to do this?
The short answer here is that Cordova/Phonegap and similar third party frameworks are not 100% optimized for Mixpanel functionality (although they work pretty great), and as such you'll need to generate separate push notifications for both iOS and Android in your Mixpanel project.
Providing context, all iOS pushes regardless of app deliver a JSON payload to APN using the same keys to deliver their messages (alert, badge, sound). However, the keys that Android apps process for incoming GCM pushes are entirely dependent on how the GCM receiver is established, and therein lies the problem here.
Mixpanel's Android SDK initializes pushes and uses a GCM receiver that is specific to Mixpanel messages, and fully expects its custom keys (mp_message, mp_title) in order to render the notification. The webapp reformats the message input to meet these key requirements (http://bit.ly/1OGgU1y)
However, the Phonegap GCM receiver expects different keys as you've noticed. I'd recommend referring to the phonegap github page in order to get more context into the expected push format and behavior (looks like they expect "title" and "message" as the keys): http://bit.ly/1KDScye
Unfortunately, what this means is that the Android app is not optimized to receive the default, web-app generated Mixpanel pushes, although your iOS one is. Mixpanel's SDKs are intended to maximize capabilities for that platform, and it isn't guaranteed that Cordova or similar JS frameworks will translate 100%.
So to conclude - Creating a message in the Mixpanel push editor will send to iOS, but for Android you'll need to use the custom JSON payload in a separate notification, including keys that the phonegap GCM receiver is compatible with.
If its help to anyone this is how I solved the problem
in phonegap-plugin-push
you need to modify two files
GCMIntentService.java
private String normalizeKey(String key) {
if (key.equals(BODY) || key.equals(ALERT) || key.equals(MP_MESSAGE) || key.equals(GCM_NOTIFICATION_BODY)) { // added MP_MESSAGE
PushConstants.java
public static final String MP_MESSAGE = "mp_message";
I need to send a push notification to mobile devices that have registered on my notification hub.
The hub is set up to allow windows phone, apple and android devices to register, and I have the appropriate keys and certificates in place. (According to the documentation!)
I am using the latest release of the Microsoft.Azure.NotificationHubs namespace, version 2.16, as advised by the NuGet package manager.
I want to send one message, to all registrations as well as sending a message to a specific device. I can see the devices have all registered correctly with the hub, and have tags that allow me to send notifications to them.
I am trying to use the SendDirectNotificationAsync() method
that takes a Dictionary and a string tag as parameters.
I have also tried the SendNotificationAsync() method that takes a Notification object as a parameter.
Neither method causes a notification to appear on my windows phone with the parameters I have provided, so without an example or more information from the help files, I am stuck.
I cannot find any current examples using these methods and classes.
The examples I have found pre-date the release, and do not show what to send to the notification hub for a cross platform notification to work.
I know these have only just been released, but any help / guidance would be appreciated, as I have reached a complete dead-end with this.
Just a quick update...
Although I never got this to work as I wanted to (as described above), what I ended up doing was to use each platforms native notification as below;
var result1 = await hub.SendMpnsNativeNotificationAsync(windowstoast, mobileDeviceId);
var result2 = await hub.SendGcmNativeNotificationAsync(androidToast, mobileDeviceId);
var result3 = await hub.SendAppleNativeNotificationAsync(iOStoast, mobileDeviceId);
The 'toast' was formatted as per the individual platforms requirements in the documentation.
The 'mobileDeviceId' was the tag that each device registered with the notification hub.
So, clumsy, but it works reliably to achieve the same end.
I still would like to get the cross platform way to work though. Will look into it a bit more when I have time.
I created an app for iPhone and Android using Phonegap.
Now I wanted to add push functionality which already works pretty good.
When a push message arrives on my iPhone I get a message on the homescreen. If I swipe it, iOS will open my application. - So far so good.
Now, within my PhoneGap app I need to check what that message actually says in order to open the correct view within my app via JavaScript.
I know there are quite some posts about this but I couldn't find some clear answers to these questions:
Does PhoneGap support push messages?
If yes, where is the documentation for that?
If not, which plugins/frameworks can be recommended? So far I found pushwoosh and Urbanair. Are they any good?
Regarding Pushwoosh, I noticed that I need some kind of pushwoosh ID - Why that?
By Pushwoosh ID you most probably mean Pushwoosh App Id or Application Code. It's an ID of your application in Pushwoosh Control Panel (current format is XXXXX-XXXXX). You will see it as soon as you add a new app in Pushwoosh.
There was quite an extensive blog post made by Holly Schinsky on easy PhoneGap integration with Pushwoosh
http://devgirl.org/2012/12/04/easy-phonegap-push-notifications-with-pushwoosh/
It should be very helpful for all PhoneGap developers aiming to integrate push notifications into their apps.
I found a really easy solution without using a framework.
I simply added the following code to the very end of the method didFinishLaunchingWithOptions (Right before the return statement):
if (launchOptions != nil)
{
NSDictionary* dictionary = [launchOptions objectForKey:UIApplicationLaunchOptionsRemoteNotificationKey];
if (dictionary != nil)
{
NSLog(#"Launched from push notification: %#", dictionary);
[self addMessageFromRemoteNotification:dictionary updateUI:NO];
}
}
Also, I added this new method to my AppDelegate.m which gets the payload from the push message:
- (void)application:(UIApplication*)application didReceiveRemoteNotification:(NSDictionary*)userInfo
{
NSLog(#"Received notification: %#", userInfo);
[self addMessageFromRemoteNotification:userInfo updateUI:YES];
}
(The NSLog calls above will show you what's inside the push message)
As a last step, I added this listener to do what ever I want with the payload:
- (void)addMessageFromRemoteNotification:(NSDictionary*)userInfo updateUI:(BOOL)updateUI
{
// do what ever you want with userInfo
}
If you want to do an additional JavaScript call with this info, I recommend using:
[self.viewController.webView stringByEvaluatingJavaScriptFromString:#"callSomeJSFunction()"];
Of course you can also pass arguments as strings into that JS function if you want.