I am successfully able to send push notifications using IONIC Framework. But these notifications doesn't looks like I receive other android notifications, rather it these looks like normal Javascript alert.
Is there any setting to set push notification type like (alert or something else) ?
I go through the following link : https://devdactic.com/ionic-push-notifications-guide/
If someone has faced and resolved this, then please comment.
First screenshot shows push notification as Javascript alert.
Second screenshot shows default Android notification after locking phone's screen.
Third screenshot shows default Android notification after unlocking screen
I solved this problem by applying below code to $ionicPlatform.ready in my app.js file which shows notifications with onNotification event, if onNotification is not present then IONIC show default Javascript alert.
var push = new Ionic.Push({
onNotification: function(notification) {
var payload = notification.payload;
console.log(notification, payload);
},
pluginConfig: {
ios: {
alert: true,
badge: true,
sound: true
},
android: {
sound: true,
vibrate: true,
forceShow: true,
iconColor: "#601dc2"
},
}
});
While working with push notification you have Two possibilities to get notification One in the notification tray on the head of screen while your app is in background mode and Second when you are working with your app in foreground mode
First one is display like other notifications to notify that you got a notification for your app with message and logo whatever you set
But for other notification it is just use to get the data and message whatever you passed through it, and now its on you that how you want to show it in the application
Either you can set a div and hide show it when notification display with the design and position as you like or as per your app theme
<script>
function devicePushNotification(data)
{
if (data.additionalData.foreground == true)
{
$("#setNotificationText").text(data.message);
$("#setNotificationText").css("display","block");
}
}
</script>
<div style="width:50%;margin: 0 auto;display:none" id="setNotificationText">
</div>
Or you can just alert the message that you got a notification for anything you have passed like,
<script>
function devicePushNotification(data)
{
if (data.additionalData.foreground == true)
{
alert(data.message);
}
}
</script>
So, if you get the notification successfully, then you just have to create any well formed container to display it.
Hope this helps you
Related
I'm currently using this library in react-native to schedule local notification, when i tap of notification either from notification centre or from top of the app, i want to redirect the user to specific screen. Currently react-native-push-notification lib using old UILocalNotification classes which are already deprecated.
Below is my code to configure local notification.
onNotification is a callback method triggers when user launches the app from notification centre for iOS and similarly onAction is for Android.
/**
* To configure for local notifications
*/
export function localNotificationConfigure() {
PushNotification.configure({
onNotification: async function (notification) {
console.log('notification.data', notification.userInteraction);
notification.finish(PushNotificationIOS.FetchResult.NoData);
},
onAction: async function (notification) {
console.log('notification', notification.userInteraction);
},
permissions: {
alert: true,
badge: true,
sound: true,
},
popInitialNotification: true,
requestPermissions: Platform.OS === 'ios',
});
}
Is there any way that i can achieve this. Is it because of lib using UILocalNotification which is deprecated and i'm not able to get the action back in the code. Any help is appreciated.
This link helped me in achieving my desired functionality.
I'm setting up notifications for a react-native app by using react-native-firebase. iOS works, in Android I have strange behaviour, that the notification banner only shows if there is already another notification sitting in the bar.
Problem Demonstration:
send the same message twice, the first message is only displayed in the upper bar, the second message is shown with a banner.
Goal:
I want the notifications to be always shown with a banner.
I listen for messages on android and generate local notifications. I was hoping to have the notification always showing by setting show_in_foreground: true. But that is only partially the case. The behavior in the gif above is the same for the app being in the foreground or background.
this.messagingListener = firebase.messaging().onMessage((message) => {
const { data} = message;
const localNotification = new firebase.notifications.Notification({
show_in_foreground: true,
sound: 'default'
})
.android.setChannelId('fcm_default_channel')
.setTitle(data.title)
.setBody(data.body)
.android.setColor('#222222') // you can set a color here
.android.setPriority(firebase.notifications.Android.Priority.High);
firebase.notifications()
.displayNotification(localNotification)
.catch(err => console.error(err));
});
This issue seems to be a Android 10 problem. The notification works fine on Android 9.0. I will update this answer as soon as i know more about a fix for Android 10.
I am developing a react-native messaging app with Expo. Every time a user receives a new message, I send a notification from my server.
Is there any way to not display the notification if the app is currently open?
Right now I am using this as soon as the notification is received:
Notifications.dismissNotificationAsync(notification.notificationId);
But there is a 0.5 second delay where the notification has time to appear in the tray and trigger a sound before it gets dismissed. I would like to not show it at all.
When a notification is received while the app is running, using setNotificationHandler you can set a callback that will decide whether the notification should be shown to the user or not.
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: false,
shouldSetBadge: false,
}),
});
When a notification is received, handleNotification is called with the incoming notification as an argument. The function should respond with a behavior object within 3 seconds, otherwise the notification will be discarded. If the notification is handled successfully, handleSuccess is called with the identifier of the notification, otherwise (or on timeout) handleError will be called.
The default behavior when the handler is not set or does not respond in time is not to show the notification.
If you don't use setNotificaitonHandler, the new notifications will not be displayed while the app is in foreground.
So you can simply set setNotificationHandler to null when your app is initialized.
Notifications.setNotificationHandler(null);
See Documentaition
The answer is yes to your question
Is there any way to not display the notification if the app is
currently open?
The default behavior of Notification in Expo is not to show notification if the App is in foreground. You must have implemented Notifications.setNotificationHandler similar to the following code -
// *** DON'T USE THE FOLLOWING CODE IF YOU DON'T WANT NOTIFICATION TO BE DISPLAYED
// WHILE THE APP IS IN FOREGROUND! ***
// --------------------------------------------------
// Sets the handler function responsible for deciding
// what to do with a notification that is received when the app is in foreground
/*
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: true,
shouldSetBadge: false,
}),
});
*/
If you don't use setNotificaitonHandler, the new notifications will not be displayed while the app is in foreground.
Use below code snippet. It works on press notification.
_handleNotification = async (notification) => {
const {origin} = notification;
if (origin === ‘selected’) {
this.setState({notification: notification});
}
//OR
if (AppState.currentState !== 'active') {
this.setState({notification: notification});
}
}
I assume you setup a simple FCM - Firebase cloud messaging
And use that to push messages to the client?
The official Expo guide has a section for receiving-push-notifications
This is the actual workflow of FCM (weird can be called as a common issue) that it'll handle the notifications by itself when the application is in the foreground.
The solution which i did for my project was to create a custom notification JSON rather than using their default template which won't be parsed by FCM.
{
"hello":" custom key and value",
"message":{
"SampleKey":"Sample data",
"data":{
"SampleKey" : "Sampledata",
"SampleKey2" : "great match!"},
}}
In console you can add your own custom JSON objects, and when you get the notification parse the notification by using these objects, then you will be able to override that issue.
You can also add a channel for the request to categorize your notifications
this.createNotificationListeners = firebase.notifications()
.onNotification((notification) => {
let{ hello,data,message} = notification;
});
I am developing an application using cordova and ibm mobile first 8 and wanted to integrate a push notification system.
I registre the device in the server and i can send the notification from the server to client app then the client app handle a received push notification by operating on its response object in the registered callback function :
var notificationReceived = function(message) {
alert(JSON.stringify(message));
};
Here is my issues :
alert issues
I don't want the alert to be displayed.
And I want that when I click on the notification A function is called.
how can i do this ? Please i need your help thanks .
In the code snippet you have in your question there is an alert. Remove the alert snippet and no alert dialog will be displayed...
You can then put there instead anything else you'd like, like logging the notification contents, or performing any other action, like calling a function.
var notificationReceived = function(message) {
myFunction();
};
function myFunction() {
...
}
I'm using Cordova 3.5.0-0.2.6 to cerate an Android application and using PushPlugin 2.2.1 to push notifications.
Everything works fine and get the notifications in my droid notifications bar when the app is in background, but when it's in foreground nothing happens when it get the notification. Wanted to make it play a sound or even show a popup alert to let the user know he has a new notification. Copied the example code from the plugin's github page (https://github.com/phonegap-build/PushPlugin) but it isn't working. The corresponding part of the code is this:
case 'message':
// if this flag is set, this notification happened while we were in the foreground.
// you might want to play a sound to get the user's attention, throw up a dialog, etc.
if (e.foreground)
{
// on Android soundname is outside the payload.
// On Amazon FireOS all custom attributes are contained within payload
var soundfile = e.soundname || e.payload.sound;
// if the notification contains a soundname, play it.
// playing a sound also requires the org.apache.cordova.media plugin
var my_media = new Media("/android_asset/www/"+ soundfile);
my_media.play();
}
else
{ // otherwise we were launched because the user touched a notification in the notification tray.
window.location = 'iframe.html?url=' + e.payload.url;
if (e.coldstart) {
//$("#app-status-ul").append('<li>--COLDSTART NOTIFICATION--' + '</li>');
} else{
//$("#app-status-ul").append('<li>--BACKGROUND NOTIFICATION--' + '</li>');
}
}
Not sure where the beep.wav file should be placed, I placed it into the www folder, but I'm 100% sure that's the place to put it.
Any one had this problem before? Any idea what I might be missing here?
Thanks,
Luciano
For android please add property "forceShow": "true" and it should work..
example code is below:
var push = PushNotification.init({
"android": {
"senderID": "xxxxxxxxx",
"forceShow": "true",
"icon": "icon",
"sound": true,
"vibration": true,
"badge": true
},
"browser": {
},
"ios": {
"senderID": "xxxxxxxxx",
"icon": "icon",
"gcmSandbox": true,
"sound": true,
"vibration": true,
"badge": true
},
"windows": {}
});
but when it's in foreground nothing happens when it get the notification
This is the default behavior of PushPlugin. It creates a notification and the associated sound only when the application is in the background or closed.
Wanted to make it play a sound or even show a popup alert to let the user know he has a new notification.
The easiest solution would be to use Cordova Plugin Dialogs. All you would have to do is:
switch( e.event )
{
case 'message':
if (e.foreground) {
navigator.notification.beep(1);
}
.
.
}
Note that this beep will be the message tone configured by the user on his/her device.
Not sure where the beep.wav file should be placed, I placed it into the www folder
Not sure either, but I think it is the www directory too.
See also: Android won't play push sound while app not running