Creating customized push notification in Worklight

Question

is there a way to direct the user to another html page upon opening a push notification?

Thank you in advanced.

Answer 1

If you will take a look at the sample Worklight project for Push Notifications, you can see the following in common\js\main.js:

function pushNotificationReceived(props, payload) {
    alert("pushNotificationReceived invoked");
    alert("props :: " + JSON.stringify(props));
    alert("payload :: " + JSON.stringify(payload));
}

This function tells the application to display 3 alerts, telling us that:

• a push notification was received
• its props
• its payload

Instead of the above, or in addition, you could - depending on your method of multi-page navigation in your app - to navigate to another "page".

You can take a look at:

• the multi-page navigation Worklight sample project
• Learn how to do it using jQuery Mobile, or any other framework of your choosing... (stand-alone sample project showing multi-page navigation using jQuery Mobile)

---

Here is a small example.
These are the modifications I did to the Push Notifications sample project:

common\css\main.css
Added a successfulPush ID

#AppBody, #AuthBody, #successfulPush {
    margin: 0 auto;
    background-color: #ccc;
    overflow: hidden;
    overflow-y: auto;
}

common\index.html
Added an additional DIV:

    

        
Notification received
        back to application
        

    
  

common\js\main.js
Modified the following function:

function pushNotificationReceived(props, payload) {     
    $("#AppBody").hide();
    $("#successfulPush").show();
    $("#pushContents").html(
        "Notification contents:
" +
         "Payload: " + JSON.stringify(payload) + "
" + 
         "Props: " + JSON.stringify(props)
    );
}

Also binding the 'back' button in wlCommonInit:

$("#back").bind("click", function() {
    $("#successfulPush").hide();
    $("#AppBody").show();
});

The end result
After a push is received and you tap the notification in the notification bar, the app opens and you see the successfulPush DIV. There you have a button to return you to the AppBody DIV. Works just fine.

As explained, this is only one possible approach. You can do whatever you want...