个推消息推送角标设置

个推消息推送角标设置

一、需求背景

1.1 背景描述

应用badge角标,是手机桌面应用图标右上角圆点或者数字角标,常见的场景是伴随通知栏消息显示,提醒用户及时点阅新消息。iOS手机系统能够较好的支持角标,Android手机系统由于碎片化严重,品牌众多,版本各异,所以角标功能适配较难。个推后续会在Android角标功能适配继续努力,为开发者提供较好的角标功能体验。

1.2 各手机品牌角标支持情况

机型是否支持角标/红点显示适配说明
华为支持角标参考当前文档
小米支持角标遵从系统默认逻辑,感应通知栏通知数目,按 1 自动增减
OPPO支持红点圆点展示需由用户在通知设置中手动开启,遵从系统默认逻辑,有通知则展示,无则不展示;
数值展示只对指定应用开启,例如 QQ、微信,需向官方进行权限申请,暂无明确适配说明
VIVO支持角标高版本系统自带离线通知数字角标展示功能,默认+1处理,打开清零,低版本没有角标功能。
魅族支持红点遵从系统默认逻辑,仅支持红点展示,有通知则展示,无则不展示
iOS支持角标参考当前文档

二、功能实现

角标功能适用于 通知消息

2.1 iOS (APNs)

iOS 系统需要客户端和服务端配合实现角标功能

服务端

"push_channel":{
    "ios":{
        "type":"notify",
        "payload":"自定义消息",
        "aps":{
            "alert":{
                "title":"通知标题",
                "body":"通知内容"
            },
            "content-available":0
        },
        //离线走apns推送时,设置的iOS角标。
        "auto_badge":"+1" //可以实现显示数字的自动增减,如“+1”、 “-1”、 “1” 等,计算结果将覆盖badge
    }
}

客户端

客户端打开 app 可更改角标数或清空角标(设置角标数为 0):客户端设置iOS角标

示例:

设置角标减 1
1、在点击后的方法中,调用 application.applicationIconBadgeNumber 获取到角标数减 1
2、通过 [application setApplicationIconBadgeNumber:]设置当前的角标
3、然后通过个推的 [GeTuiSdk setBadge:] 将角标同步给个推服务器

2.2 华为

华为手机系统需要客户端和服务端配合实现角标功能。

服务端:

{
    "request_id": "fhfjkhwej478414",
    "settings": {
        "ttl": 259200000
    },
    "audience": {
        "cid": [
            "bae1fdd10477db63b17af9e76dd41863"
        ]
    },
    "push_message": {
        "notification": {
            "title": "个推在线标题",
            "body": "个推在线内容",
            "click_type": "url",
            "url": "https://www.getui.com/",
            //在线推送时,设置的华为角标,1表示在当前的角标数上+1。
            "badge_add_num": "1"
        }
    },
    "push_channel": {
        "android": {
            "ups": {
                "notification": {
                    "title": "厂商离线标题",
                    "body": "厂商离线内容",
                    "click_type": "url",
                    "url": "https://www.getui.com/"
                },
                "options": {
                    "HW": {
                        "/message/android/notification/badge/class": "应用入口Activity路径名称",
                        //add_num 为离线推送时,设置的华为角标,1表示在当前的角标数上+1
                        "/message/android/notification/badge/add_num": 1
                    }
                }
            }
        }
    }
}

客户端:

客户端打开 app 可更改角标数或清空角标(设置角标数为 0): 客户端设置华为角标

setBadge 设置角标数字 APP开发接入个推推送消息能力

用做网页的技术做APP
一门提供标准化的jsbridge-mini.js库,您只需要在页面引用执行JS即可实现各种原生APP、原生PC的功能能力。

==================APP端==================
【APP端】(安卓版&苹果版)目前提供200+原生功能,2000+JS映射接口,用做网站的技术即可实现各种原生APP能力、APP demo地址https://www.yimenapp.com/doc/demo.cshtml下载教程:
♦ JS-SDK 引用方式:
♦ 普通网页 script 方式加载:下载最新版,请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库;
♦ js module 方式引用:npm install ym-jsbridge 具体请参考 npm package
一门APP开发平台通用JS

setBadge 设置角标数字 APP开发接入个推推送消息能力

核心代码示例,详情参阅demo

//仅支持苹果iOS和安卓华为、OPPO、VIVO
//服务器端推送华为角标 
//应用入口Activity路径名称为:com.lt.app.MainActivity
jsBridge.getui.setBadge({
  //角标数字,0则清除角标
  badge: 18
}, function(succ) {
  alert(succ ? "设置成功" : "设置失败");
});

A标签执行JS示例代码

<a href="javascript:void(0)" onclick="zhixing()">执行</a> 
<!-- 写入一个A标签href值为"javascript:void(0)",定义点击事件onclick;-->
<script src="您的服务器URL/jsbridge-mini.js"></script>
<!-- 在您的服务器引入一门JS地址,请下载jsbridge-mini.js上传您自己的服务器获取链接;-->
<script type="text/javascript">
function zhixing() {


<!--这里可以直接复制JS核心代码到此{}括号内-->
//仅支持苹果iOS和安卓华为、OPPO、VIVO
//服务器端推送华为角标 
//应用入口Activity路径名称为:com.lt.app.MainActivity
jsBridge.getui.setBadge({
  //角标数字,0则清除角标
  badge: 18
}, function(succ) {
  alert(succ ? "设置成功" : "设置失败");
});

}
</script>
<!--执行核心代码;
//如果需要进入页面就执行,去掉点击事件即可;-->

按钮执行JS示例代码

<button onclick="zhixing()" >执行</button>
<!-- //写一个按钮,定义点击执行事件; -->
<script src="您的服务器URL/jsbridge-mini.js"></script>
<!-- //在您的服务器引入一门JS地址,请下载jsbridge-mini.js上传您自己的服务器获取链接; -->
<script type="text/javascript">
function zhixing() {


<!--这里可以直接复制JS核心代码到此{}括号内-->
//仅支持苹果iOS和安卓华为、OPPO、VIVO
//服务器端推送华为角标 
//应用入口Activity路径名称为:com.lt.app.MainActivity
jsBridge.getui.setBadge({
  //角标数字,0则清除角标
  badge: 18
}, function(succ) {
  alert(succ ? "设置成功" : "设置失败");
});

}
</script>
<!-- //执行核心代码;
//如果需要进入页面就执行,去掉点击事件即可; -->