requestAuth 检查APP是否允许通知 APP开发实现APP桌面角标本地通知能力

requestAuth 检查APP是否允许通知 APP开发实现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

requestAuth 检查APP是否允许通知 APP开发实现APP桌面角标本地通知能力

♦ 检查用户是否允许或禁止了通知提醒;
♦ 如果用户已禁止,可以提醒用户去开启,执行 jsBridge.appSettings() 跳转到设置界面;
♦ iOS 调用 setBadge 设置角标需“允许”通知,否则无法设置;

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

jsBridge.notification.requestAuth(function(granted){
  alert(granted ? "已允许" : "已禁止");
});

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核心代码到此{}括号内-->
jsBridge.notification.requestAuth(function(granted){
  alert(granted ? "已允许" : "已禁止");
});

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

按钮执行JS示例代码

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


<!--这里可以直接复制JS核心代码到此{}括号内-->
jsBridge.notification.requestAuth(function(granted){
  alert(granted ? "已允许" : "已禁止");
});

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

getBadge 获取APP角标 APP开发实现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

getBadge 获取APP角标 APP开发实现APP桌面角标能力

♦ 仅支持 苹果 iOS,安卓始终返回 0
♦ 如果用户禁用了通知,则始终返回 0;

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

jsBridge.notification.getBadge(function(badge) {
  alert(badge);
});

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核心代码到此{}括号内-->
jsBridge.notification.getBadge(function(badge) {
  alert(badge);
});

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

按钮执行JS示例代码

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


<!--这里可以直接复制JS核心代码到此{}括号内-->
jsBridge.notification.getBadge(function(badge) {
  alert(badge);
});

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

setBadge 清除角标 APP开发实现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开发实现APP桌面角标清除能力

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

// 设置为 0 则清除角标
jsBridge.notification.setBadge(0);

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核心代码到此{}括号内-->
// 设置为 0 则清除角标
jsBridge.notification.setBadge(0);

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

按钮执行JS示例代码

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


<!--这里可以直接复制JS核心代码到此{}括号内-->
// 设置为 0 则清除角标
jsBridge.notification.setBadge(0);

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

setBadge 设置APP角标 APP开发实现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角标 APP开发实现APP桌面显示角标能力

♦ 角标 即是显示在APP图标右上角的数字;
♦ iOS 完美支持;
♦ Android 版兼容性不好,推荐使用 notify 接口发送本地通知;
♦ 如果用户禁用了通知,则无法设置;

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

// 参数为不小于 0 的数字
// 设置为 0 则清除角标
jsBridge.notification.setBadge(23);

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核心代码到此{}括号内-->
// 参数为不小于 0 的数字
// 设置为 0 则清除角标
jsBridge.notification.setBadge(23);

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

按钮执行JS示例代码

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


<!--这里可以直接复制JS核心代码到此{}括号内-->

// 参数为不小于 0 的数字
// 设置为 0 则清除角标
jsBridge.notification.setBadge(23);
}
</script>
<!-- //执行核心代码;
//如果需要进入页面就执行,去掉点击事件即可; -->

个推消息推送角标设置

个推消息推送角标设置

一、需求背景

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开发接入个推消息推送SDK

用做网页的技术做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开发接入个推消息推送SDK

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

jsBridge.getui.setBadge({
  badge: 0
});

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核心代码到此{}括号内-->
jsBridge.getui.setBadge({
  badge: 0
});

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

按钮执行JS示例代码

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


<!--这里可以直接复制JS核心代码到此{}括号内-->
jsBridge.getui.setBadge({
  badge: 0
});

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

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

小米手机APP桌面应用角标适配说明

小米手机桌面应用角标适配说明

1. 默认逻辑

当应用向通知栏发送了一条通知 (除了进度条样式和常驻通知外),应用图标的右上角就会显示「1」。角标的数字代表应用的通知数,即应用发送了「x」条通知,角标就会显示为「x」。

2. 开发者如何设置桌面角标

2.1 MIUI6-MIUI11桌面应用角标适配方法

可通过反射调用设置桌面角标,参考代码如下:

try {
    Field field = notification.getClass().getDeclaredField(“extraNotification”);
    Object extraNotification = field.get(notification);
    Method method = extraNotification.getClass().getDeclaredMethod(“setMessageCount”, int.class);
    method.invoke(extraNotification, mCount);
} catch (Exception e) {
    e.printStackTrace();
}

2.2 MIUI12及以后桌面应用角标适配方法

由于Google屏蔽了hideAPI的反射调用,因此MIUI12及以后可以使用notification.number,可参照Android开发者文档https://developer.android.google.cn/reference/android/app/Notification#number,参考代码如下:

Notification notification = new Notification.Builder(context, CHANNEL_ID)
            .setSmallIcon(R.drawable.notification_icon)
            .setContentTitle(textTitle)
            .setContentText(textContent)
            .setNumber(int number)
            .build();

3. 如何判断MIUI版本

可参考文档https://dev.mi.com/console/doc/detail?pId=1312,其中6.1节有具体方法说明。