I'm showing notification in my PWA. It works and it shows the notification. But i cant seem to find out how to bring the app to foreground if you click the notification (if possible)?
Usecase:
A notification is showned to the user while he is on facebook. Then when the user clicks the notification, then i would like my app to go to foreground.
Is this possible when im not working natively?
Here is my test code:
navigator.serviceWorker.register('service-worker.js');
Notification.requestPermission(function(result) {
if (result === 'granted') {
navigator.serviceWorker.ready.then(function(registration) {
registration.showNotification('Notification with ServiceWorker');
});
}
});
So my problem was my lack of knowledge! I had not figured out that the onclick handler should be placed in the service-worker.
I found good help here:
https://developers.google.com/web/fundamentals/push-notifications
https://web-push-book.gauntface.com/demos/notification-examples/
You can open a URL within your PWA. It will open it in a new tab in the browser, even if there is a tab already open to your PWA.
handleResponse( event ) {
console.log( '[Service Worker] Notification click Received. ${event}' );
if ( event.action && validURL( event.action ) ) {
clients.openWindow( event.action );
}
event.notification.close();
}
Related
I have a react-native app using react-native-firebase-messaging to send push notifications to android and iOS devices. I'm trying to embed a deep link in the FCM message so that users clicking on the notification will be routed to a specific section of the app. I've seen this SO post which shows how the link property can be added but it's specific to android. How can I add a deep link url to notifications sent to both iOS and Android devices?
Without having deep link you can use notification click handler of react-native-firebase-messaging and pass the data in the notification payload which screen you want to navigate.
Check this link for documentation and make sure you have register background handler in index.js as shown here
useEffect(() => {
// Assume a message-notification contains a "type" property in the data payload of the screen to open
messaging().onNotificationOpenedApp(remoteMessage => {
console.log(
'Notification caused app to open from background state:',
remoteMessage.notification,
);
navigation.navigate(remoteMessage.data.type);
});
// Check whether an initial notification is available
messaging()
.getInitialNotification()
.then(remoteMessage => {
if (remoteMessage) {
console.log(
'Notification caused app to open from quit state:',
remoteMessage.notification,
);
setInitialRoute(remoteMessage.data.type); // e.g. "Settings"
}
setLoading(false);
});
}, []);
I'm trying to get notifications and update launcher icon badge on IOS with React-Native/RNFirebase when app is closed. But unfortunately it seems RNFirebase doesn't have any support for it. onNotification() listener doesn't seem working when app is closed. (background modes/push notifications are enabled on XCode)
Is there any workaround for that to update launcher icon badge when notification received and app is closed?
If your app is closed, you can check if it was opened by a notification using:
firebase.notifications().getInitialNotification()
here is a sample using it:
const notificationOpen = await firebase
.notifications()
.getInitialNotification();
if (notificationOpen && notificationOpen.notification) {
let { title, body, data } = notificationOpen.notification;
if (!title && !body) {
title = data.title;
body = data.body;
}
const notification: Notification = notificationOpen.notification;
//firebase.notifications().removeDeliveredNotification(notification.notificationId);
this.handleNotificationActions(
title,
body,
data,
navigator,
t,
"background"
);
}
As the title, how can we start a react-native app from background to foreground, like we tap on push notification, it will show the app?
Thank you!
Look at https://github.com/geektimecoil/react-native-onesignal library it is easy to use and you can even specify what screen you want to open within your app with the
opened event listener
OneSignal.addEventListener('opened', (data) => {
if (data.notification.payload.title === 'New mensaje!') {
this.props.pushNewRoute('chat'); // open specific app screen (Redux)
}
});
I am running sample application..... I am using this module for push notifications..... My problem is when clicking on push notifications after clearing the instance of the app...In onNotification() console is printed but the alert is not displayed.... even try to keep time out for the alert but it doesn't work..... this is a problem is getting for the only iOS....... Please give any suggestions.......
onNotification: notification => {
console.log('NOTIFICATION:', notification)
if(notification.notificationType === XXX){
alert('NOTIFICATION:'+JSON.stringify(notification))
}
}
I am using react native v0.45.1.
How can I add to my application notification (no matter if the app is in the background or foreground) that the user can remove only after click an acknowledge button.
I don't want the user to swipe the notification aside without notice it.
how can it be done?
I am not sure https://github.com/wix/react-native-notifications will do what I need.
Edit
I want to have a notification that will act like:
'USB debugging connected
'Touch to disable USB debugging'
The notification can't be removed unless the user actively do something, in my case it will be 'click' on a button
after a lot of digging the solution I implemented was:
setting repeat interval for the notification.
for android:
repeatType: 'time',
repeatTime: timeSpan,
for iOS:
repeatType: 'minute',
when the user click the notification (decided its not the right approached to add actions - buttons - to notification):
PushNotification.configure({
onNotification: (notification) => {
console.log('NOTIFICATION:', notification);
const clicked = notification.userInteraction;
if (clicked) {
if (Platform.OS === 'ios') {
PushNotification.cancelLocalNotifications({ id: notification.data.id });
} else {
PushNotification.cancelLocalNotifications({ id: notification.id });
}
}
},
});
I am aware that this might not be the exact answer to this question. However,
I was looking for a similar solution earlier; how to remove notifications that hasn't been dismissed or opened by a user.
Sometimes the user might open the application / screen, without clicking on the notification. The notification will still be displayed in that case.
Using React Native with Expo, this is the solution I created for removing old notifications created using their Push Notification API.
import * as Notifications from "expo-notifications";
//...
// Remove notifications that exists for this conversation!
useEffect(() => {
Notifications.getPresentedNotificationsAsync().then(res => {
for (let k in res) {
if (
res[k].request.content.data &&
res[k].request.content.data.screen === "Conversations" &&
res[k].request.content.data.conversationId === conversationId
) {
Notifications.dismissNotificationAsync(res[k].request.identifier);
console.log("removed a notification for this conversation");
}
}
});
}, []);
By using the data sent to the Push Notification API, we can determine which notifications should be removed. in this case all notifications containing a conversationId matching the current value from the route are dismissed.