Remote Notifications
In this page you'll learn how notifications are handled in your app and what all the options at your disposal to create a great messaging experience for your users.
Receiving Notifications
Whenever a new notification arrives the following listener will be triggered. You can use it to refresh your UI to indicate the user that there is unread messages:
DeviceEventEmitter.addListener('notificationReceived', (e: Event) => {
//Update UI
});If your app is inactive or in the background whenever a notification arrives and the user only happens to open the notification from the device’s notification center you will need to handle it by implementing the following listener:
DeviceEventEmitter.addListener('notificationOpened', (e: Event) => {
Notificare.openNotification(e.notification);
});Deep Links
In modern apps, this is a great way of creating interactions between notifications and your own app content, allowing you to send messages that can eventually drive the user to open content hidden deeper in your app.
To prepare your app to handle deep links is not complicated and will allow you to handle not only Deep Link notification types, but also any link made from an web page. In order to indicate that your MainActivity should handle a custom URL scheme you will have to declare the following in your AndroidManifest.xml file:
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:launchMode="singleTop"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter>
<action android:name="re.notifica.intent.action.NotificationOpened" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
<intent-filter android:label="my_deep_link">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="@string/app_url_scheme"/>
</intent-filter>
</activity>The example above assumes you've added the value of your URL Scheme in res/values/strings.xml as follows:
<?xml version="1.0" encoding="utf-8"?>
<resources>
...more
<string name="app_url_scheme">your.deep.link</string>
...more
</resources>To handle a notification of type Deep Link or when a user clicks in an action of type Open App you should implement the following in your javascript:
componentDidMount() {
...more code
if (Platform.OS === 'android') {
Linking.getInitialURL().then(url => {
this._handleOpenURL(url); // <-- this function should handle the url, e.g., navigate the deeplink
});
Linking.addEventListener('url', this._handleOpenURL);
}
...more code
}
componentWillUnmount() {
...more code
if (Platform.OS === 'android') {
Linking.removeEventListener('url', this._handleOpenURL);
}
...more code
}There is yet another situation where you will also want to handle deep links and that is when users click in a link in a HTML or Web Page notification. If that link should open a view in your app you will want to intercept those clicks and handle it the same way you handle deep links.
First make sure you declare those URL Scheme in res/values/url_schemes.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="url_schemes">
<item>your.deep.link</item>
</string-array>
</resources>Our library will then intercept all the links using those URL Schemes and trigger the following event:
DeviceEventEmitter.addListener('didClickURL',(data) => {
//Handle URL
});Inbox
With our library it's extremely easy to implement an in-app inbox. Implementing an inbox increases considerably the engagement rate with notifications simply because messages will always be available inside your app. To activate the inbox functionality, please follow the instructions described here.
After activating this functionality you can start implementing your inbox. Use the following listener in your component to bind any UI elements when the badge count changes:
DeviceEventEmitter.addListener('notificationReceived', (e: Event) => {
//Fetch latest items in the inbox
});To retrieve the list of messages the user have previously received, invoke the following method:
//Use null to ignore this parameter. If not null it should be a date in the past.
var since = new Date('2018-01-01T00:00:00');
//Use null to ignore this parameter. If not null it should be an integer corresponding to the number of inbox items it should skip. Use it in combination with limit to paginate the results.
var skip = 0;
//Use null to ignore this parameter. It will default to 25 if null is provided. If not null it should be an integer corresponding to the number of inbox items it should return. Use it in combination with skip to paginate the results.
var limit = 100;
Notificare.fetchInbox(since, skip, limit, (error, data) => {
console.log(data.inbox, data.total, data.unread);
});To open a message from the list of messages in the inbox, please use the following method:
//Use an inbox item object as the parameter
Notificare.openInboxItem(inboxItem);To retrieve the full notification object for an inbox item, please use the following method:
//Use an inbox item object as the parameter
Notificare.fetchNotificationForInboxItem(inboxItem, (error, data) => {
});At anytime you can also delete a notification from the inbox:
//Use an inbox item object as the parameter
Notificare.removeFromInbox(inboxItem, (error, data) => {
});Additionally you can also mark a message as read by invoking the following method:
//Use an inbox item object as the parameter
Notificare.markAsRead(inboxItem, (error, data) => {
});Finally to remove all the items in the inbox you would do the following:
Notificare.clearInbox((error, data) => {
});