在Worklight中创建自定义推送通知 [英] Creating customized push notification in Worklight

问题描述

有没有办法在打开推送通知时将用户引导到另一个html页面？

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

先谢谢你。

推荐答案

如果你看一下推送通知的示例Worklight项目，您可以在common \ js \ main.js中看到以下内容：

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));
}

此函数告诉应用程序显示3个警报，告诉我们：

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

• 收到推送通知


• 其道具


• 其有效负载

除了上述内容外，您还可以 - 根据应用中的多页导航方法 - 导航到另一个页面。

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

您可以查看：

• 多页导航Worklight示例项目


• 了解如何使用jQuery Mobile 或您选择的任何其他框架......（独立的样本使用jQuery Mobile显示多页导航的项目）

• 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)

这里这是我对Push Notifications示例项目所做的修改：

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

common \css \main .css

添加了successPush ID

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

添加了额外的DIV：

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

修改了以下函数：

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)
    );
}

还绑定中的'后退'按钮wlCommonInit ：

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

最终结果

推送后收到并点击通知栏中的通知，应用程序打开，您会看到successfulPush DIV。在那里，您有一个按钮可以返回AppBody DIV。工作正常。

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

这篇关于在Worklight中创建自定义推送通知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！