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

9 posts, 0 answers
  1. Craig
    Craig avatar
    7 posts
    Member since:
    Apr 2015

    Posted 29 Apr 2015 Link to this post

    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.

  2. Zdravko
    Admin
    Zdravko avatar
    657 posts

    Posted 01 May 2015 Link to this post

    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
     
    Everlive is now Telerik Backend Services, and is part of the Telerik Platform.
     
  3. Craig
    Craig avatar
    7 posts
    Member since:
    Apr 2015

    Posted 01 May 2015 in reply to Zdravko Link to this post

    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.

  4. Craig
    Craig avatar
    7 posts
    Member since:
    Apr 2015

    Posted 01 May 2015 in reply to Zdravko Link to this post

    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.

     

  5. Craig
    Craig avatar
    7 posts
    Member since:
    Apr 2015

    Posted 01 May 2015 in reply to Zdravko Link to this post

    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. 
  6. Anton Dobrev
    Admin
    Anton Dobrev avatar
    539 posts

    Posted 05 May 2015 Link to this post

    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

    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
     
    Everlive is now Telerik Backend Services, and is part of the Telerik Platform.
     
  7. Craig
    Craig avatar
    7 posts
    Member since:
    Apr 2015

    Posted 08 May 2015 in reply to Anton Dobrev Link to this post

    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.

  8. Anton Dobrev
    Admin
    Anton Dobrev avatar
    539 posts

    Posted 11 May 2015 Link to this post

    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
     
    Everlive is now Telerik Backend Services, and is part of the Telerik Platform.
     
  9. Craig
    Craig avatar
    7 posts
    Member since:
    Apr 2015

    Posted 11 May 2015 in reply to Anton Dobrev Link to this post

    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
Back to Top