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:

<div id="successfulPush" style="display:none">
    <div class="wrapper">
        <h2>Notification received</h2>
        <button id="back" >back to application</button>
        <p id="pushContents"></p>
    </div>  
</div>

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

function pushNotificationReceived(props, payload) {     
    $("#AppBody").hide();
    $("#successfulPush").show();
    $("#pushContents").html(
        "<b>Notification contents:</b><br>" +
         "<b>Payload:</b> " + JSON.stringify(payload) + "<br>" + 
         "<b>Props:</b> " + 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...