Creating customized push notification in Worklight - ibm-mobilefirst

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...