Remote Notifications

In this page you'll learn how notifications are handled in your website and what all the options at your disposal to create a great messaging experience for your users.

Please note that all the browsers, except for Safari, will need to be opened to receive notifications. Safari in MacOS will still receive notifications even when the browser is not opened at all. Users will receive notifications even if your website is not focused or opened at all, as long as the browser is running.

Receiving Notifications

When your website is opened (even when it is not focused) and a notification is received the following callback method will be triggered:

notificare.didReceiveNotification = (payload) => {
    //Update UI?
}

Please note that this event will not be triggered if your website is not opened. In most cases you will also not need to do anything when this event happens since the browser will display a native alert in the top right corner that users can click if they are interested in opening the notification. But in case you would like to update your UI, you can use this event to do so.

When a notification is displayed and a user is clicks on it, the browser will redirect them to the URL Format String you've configure the Website Push service to use and the following callback method will be triggered:

notificare.didOpenNotification = (notification) => {
    //Handle all the notification types
}

When using 2.1.0 or higher, you can use the following method to handle all the types of notifications our library supports:

notificare.didOpenNotification = (notification) => {
    notificare.presentNotification(notification);
}

This will be all you need to handle all notification types supported by our library. This includes not only the content types but aslso all the actions you might want to include in your notifications.

If you are not using 2.1.0 or higher or you want to customize the look and feel of your notifications, then you need to use this event to do so. When triggered, you will obtain a notification object containing everything you need to handle the content and actions of the message.

Here's an example of how content and actions are handled in most cases:

notificare.didOpenNotification = (notification) => {

    if (notification.type === 're.notifica.notification.Alert') {

        //Alert does not contain any content other than the message
    } else {
        //All the other types will additionally contain an array with content
        notification.content.forEach((content) => {

        });
    }

    //If a message contains actions you should access them like this
    if (notification.actions && notification.actions.length > 0) {

        notification.actions.forEach((action) => {

            let button = document.createElement("button");
            button.setAttribute('class', 'action-button');
            button.dataset.label = action.label;
            button.dataset.notification = notification._id;
            button.appendChild(document.createTextNode(action.label));
            document.getElementById('actionsPlaceholder').appendChild(button);

        });

    }

}

Finally consider the following example in how to handle the functionality attached to each action:

document.querySelector('.action-button').addEventListener('click', function(e) {
    e.preventDefault();
    notificare.handleAction(this.dataset.notification, this.dataset.label);

});

Inbox

With our library it's extremely easy to implement an inbox. Implementing an inbox increases considerably the engagement rate with notifications simply because messages will always be available inside your web app. To activate the inbox functionality, please follow the instructions described here.

After activating this functionality you can start implementing your inbox in any page of your website. To get all the items in the inbox you would basically invoke the following:

notificare.inboxManager.fetchInbox(since, skip, limit).then((response) => {
    console.log(response.inboxItems); //An array of inbox items
    console.log(response.count); //An integer representing the total number of items in the inbox
    console.log(response.unread); //An integer representing the number of unread inbox items
}).catch((e) => {
    //Handle error
});

You can open each in inbox item by invoking the following method (in 2.1.0 or higher):

notificare.inboxManager.openInboxItem(inboxItem).then((notification) => {

    notificare.presentNotification(notification);

}).catch((e) => {
    //Handle error
});

Or if you're not using 2.1.0 or higher or you want to customize the look and feel of your notifications, you should handle as follows:

notificare.inboxManager.openInboxItem(inboxItem).then((notification) => {

    if (notification.type === 're.notifica.notification.Alert') {

        //Alert does not contain any content other than the message
    } else {
        //All the other types will additionally contain an array with content
        notification.content.forEach((content) => {

            //Handle content
        });
    }

    //If a message contains actions you should access them like this
    if (notification.actions && notification.actions.length > 0) {

        notification.actions.forEach((action) => {

            //Handle actions
        });

    }

}).catch((e) => {
    //Handle error
});

Pretty much as explained above in the notificare.didOpenNotification callback method, You will want to handle the notification accordingly.

If you wish to mark a message as read without opening it, invoke the following method:

notificare.inboxManager.markAsRead(inboxItem).then((notification) => {
    //Handle success
}).catch((e) => {
    //Handle error
});

To remove an item from the inbox you would invoke the following method:

notificare.inboxManager.removeFromInbox(inboxItem).then((notification) => {
    //Handle success
}).catch((e) => {
    //Handle error
});

Finally to remove all the items in the inbox you would do the following:

notificare.inboxManager.clearInbox(inboxItem).then((notification) => {
    //Handle success
}).catch((e) => {
    //Handle error
});

Whenever a message is opened, mark as read, deleted or all inbox items are cleared, the following callback method will be triggered:

notificare.didUpdateBadge = (badge) => {
    //Handle badge count
}

This will give you the opportunity to display an unread messages count which you can use to show a badge in your web app.

Action Callbacks

Optionally, you can implement callback methods which can inform your web app when certain operations are done or failed, so you can show more UX/UI elements, perform other operations, etc. Below you find all the action's callback methods available for you:

notificare.willExecuteAction = (notification, action) => {
    //Triggered when an action is about to be executed
}

notificare.didExecuteAction = (notification, action) => {
    //Triggered when an action was executed
}

notificare.didNotExecuteAction = (notification, action) => {
    //Triggered when an action is not executed because the user cancelled it
}

notificare.didFailToExecuteAction = (notification, action) => {
    //Triggered when an action failed to be executed
}

SDK

Remote Notifications

Receiving Notifications

Inbox

Action Callbacks