Push Notification - How can I customise and format the message within the app

[Craig]

Hi,

 

I am new to Telerik so apologise is this is a simple question. I have implemented push notifications for iOS and Android using the Sample-telerik-bass-push-notification sample. I am sending the notifications through the backend service. How can I customise the notifications to use a different icon, title and format the text so it appears without /n within the alert box. 

 I have a Index.js file with 

        function onPushNotificationReceived(e) {
        alert(JSON.stringify(e));

         };

and tried adding this code to it

    "Android": {
        "data": {
            "title": "Push Title",
            "message": "Push message for Android",
            "customData": "Custom data for Android"
        }
    },
    "IOS": {
        "aps": {
            "alert": "Push message for iOS",
            "badge": "+1",
            "sound": "default",
            "category": "MY_CATEGORY"
        },
        "customData": "Custom data for iOS"
    },
    "WindowsPhone": {
        "Toast": {
            "Title": "Push title",
            "Message": "Push message for Windows Phone"
        }
    },
    "Windows": {
        "Toast": {
            "template": "ToastText01",
            "text": ["Push message for Windows"]
        }
    }

but think I'm doing it wrong.

 

Thanks for any help you can provide.

[Zdravko]

Hi Craig,

As you can see in the sample app separate callbacks are registered for each platform to handle the push message sent.
In order to represent the title and the message instead of the object content you can do the following:

var onAndroidPushReceived = function(args) {
            var obj = $.parseJSON(str);
            navigator.notification.alert(
                obj.payload.message, // message
                someCallbackFunction, // callback
                obj.payload.title, // title
                'Done'                  // buttonName
                );
        };

I am showing the android callback but you can handle it the same way for the other platforms.
For the alert I am using Cordova notification.alert so you will have to enable the integrated Notification plugin from Properties > Plugins.

Currently, the icon used in the status bar is app's icon so if you change it, it should change the notification icon as well.
You can also use the latest version of the Push plugin which lets you use custom icon.

Regards,
Zdravko
Telerik

 

 

[Craig]

Thanks Zdravko.

Also I have a simple hybrid drawer app. How would I integrate notifications into that app. As theirs only one js file (app.js) and I'm setting the initial view as home (initial: 'views/home.html'), not just running from the index.html view like in the notification app.

 I also don't want to ask the user to register for notifications I just want them to be able to receive them.

[Craig]

Hi Zdravko,

 I am getting an error now: https://bs-static.cdn.telerik.com/lastest/everlive.all.min.js:121:Uncaught EverliveError: The push notification plugin is not availavle. Ensure that the pushNotification plugin is included and use after 'deviceready' event has been fired.

 

[Craig]

Tried doing what you said but I get no notification now. With regards to the integrated notification plugin have i chosen the right one. Have attached a pic of the one I chose. 

[Anton Dobrev]

Hi Craig,

Unfortunately, there was a problem in the latest version of the JS SDK available on the CDN which is now fixed and you should not experience such problems (with the everlive.all.js file). Also, you can use this link to the resource

https://bs-static.cdn.telerik.com/1.3.1/everlive.all.min.js

and optionally install it in your project as explained here. You also need to make sure that you have incorporated the Telerik Push plugin in your project.

If the problem persists, please provide a sample code that illustrates the issue.

I can confirm that the Notification plugin you added to the project could be used to implement the code my colleague suggested.

Let me know if further questions arise.

Regards,
Anton Dobrev
Telerik

 

 

[Craig]

Hi,

 I have again tried to implemented this but my alert notifications are still not formatted.

I have attached a screenshot of what I am receiving. When I use this code

             var onAndroidPushReceived = function (args) {
                alert('Android notification received: ' + JSON.stringify(args));
            };

 

When I try an format it using this code, I don't get any alert notification.

 

            var onAndroidPushReceived = function (args) {
                var obj = $.parseJSON(str);
                navigator.notification.alert(
                    'You are the winner!', // message
                    alertDismissed, // callback
                    'Game Over', // title
                    'Done' // buttonName
                );
            };

            var devicePushSettings = {
                iOS: {
                    badge: 'true',
                    sound: 'true',
                    alert: 'true'
                },
                android: {
                    projectNumber: 'projectNumber'
                },
                wp8: {
                    channelName: 'EverlivePushChannel'
                },
                notificationCallbackIOS: onAndroidPushReceived,
                notificationCallbackAndroid: onAndroidPushReceived,
                notificationCallbackWP8: onWP8PushReceived
            };

I am testing on a Android device. I have edited my android project number just because I'm posting here.

 

Thanks for any help you can give.

[Anton Dobrev]

Hello Craig,

I am assuming that there are some JavaScript errors that are preventing the second code from running seamlessly. You can explore them with the Debug on Device functionality in AppBuilder.

On a first look, may I suggest that you verify that you have callback defined in this function call:

navigator.notification.alert(
                   'You are the winner!', // message
                   alertDismissed, // callback - is this defined?
                   'Game Over', // title
                   'Done' // buttonName
               );

Also, you can use an anonymous function:

navigator.notification.alert(
                   'You are the winner!', // message
                   function() {
                         // do something here
                   }, // callback
                   'Game Over', // title
                   'Done' // buttonName
               );

Also, it is not clear where the str variable is defined - var obj = $.parseJSON(str);. You can access the required key in the notification payload and display it like this:

var messageFromPayload = args.message;

navigator.notification.alert(
                    messageFromPayload ,
                    function() {
                       // do something
                    }, // callback
                    'You have new notification', // title
                    'OK' // buttonName
                );

Here is more information about the notification.alert method from the Cordova Notification API.

Let me know if this helps and if I may be of any further assistance.

Regards,
Anton Dobrev
Telerik

 

 

[Craig]

Thanks was a case of just defining the str to the value of the notification.

var onAndroidPushReceived = function (args) {
    var str = JSON.stringify(args);
    var obj = $.parseJSON(str);

    navigator.notification.alert(
        obj.payload.message, // message
        alertDismissed, // callback
        obj.payload.title, // title
        'Done' // buttonName
    );
};

Thanks