接入华为webpush webpush总结

webpush

Webpush协议：

W3c规范 https://www.w3.org/TR/push-api/

1.浏览器订阅推送

2.上传token

3.发送推送

4.浏览器厂商推送服务器根据浏览器状态，缓存或发送推送消息。

原生浏览器接入方式存在部分局限性：

ios 不支持webpush ，safri使用私有的api，各大厂商推送中心差异化，推送消息展示差异

原生方式使用webpush：

使用命令行生成您的秘钥，导入密钥时去除任何的换行符
1.生成VAPID秘钥：
openssl ecparam -name prime256v1 -genkey -noout -out vapid_private.pem

端侧js：

  function urlB64ToUint8Array(base64String) {const padding = '='.repeat((4 - base64String.length % 4) % 4);const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');const rawData = window.atob(base64);const outputArray = new Uint8Array(rawData.length);for (let i = 0; i < rawData.length; ++i) {outputArray[i] = rawData.charCodeAt(i);}return outputArray;}navigator.serviceWorker.getRegistration('sw.js').then(function (sw) {if(sw){   // 这里为方便测试每次刷重新订阅sw.unregister().then(function () {swRegister()})}else{swRegister()}})
function swRegister() {navigator.serviceWorker.register('sw.js').then(function (sw) {sw.pushManager.getSubscription().then(function (sub) {if (!sub) {subNew(sw)} else {sub.unsubscribe().then(function(successful) {subNew(sw)}).catch(function(e) {})}})})}function subNew(sw) {var key = urlB64ToUint8Array('生成的公钥');sw.pushManager.subscribe({applicationServerKey: key,userVisibleOnly: true,}).then(function (sub) {// sub包含后面需要使用的endpoint  秘钥信息}).catch(function (e) {});}

服务端java demo：

使用lib：https://github.com/web-push-libs/web-push

提供python nodejs java

Security.addProvider(new org.bouncycastle.jce.provider.BouncyCastleProvider());   //添加密码库
PushService pushService = new PushService(上步生成的秘钥信息);Notification nc = new Notification("浏览器订阅endpoint","浏览器订阅p256dh","浏览器订阅auth"),"消息内容");
HttpResponse r = pushService.send(nc);

返回消息中的http statuscode为消息发送结果：

详细含义参照：

https://autopush.readthedocs.io/en/latest/http.html#push-service-http-api

errorcode 部分

使用huawei 华为Push推送接入webpush;

huawei 提供了对端侧js和云侧发送接口的封装，可以和发送android消息一样的形式发送web消息，不用关心原生endpoint 秘钥等信息：

参照华为开发者联盟接入webpush，这里web推送目前是挂在android应用下。

https://developer.huawei.com/consumer/cn/doc/development/HMS-Guides/push-webpush

这里编写了一个demo：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script src="https://push-static.dbankcdn.com/hms-messaging.js"></script>
<input type="button" id="tk" value="getToken">
<input type="button" id="tkdel" value="delToken"> <br><p id="tkv">token:</p>
<script>var cf = {apiKey: "{{apikey}}",appId: "{{appid}}",};hms.initializeApp(cf);var msg = hms.messaging();msg.usePublicVapidKey("{{pubkey}}");msg.onMessage((payload) => {console.log('Message received.', payload);// alert('Message received.', payload);});var tkv = '';function getTk() {msg.getToken().then((currentToken) => {if (currentToken) {console.log('getToken succ: ', currentToken);$('#tkv').text("token: " + currentToken)tkv = currentToken;// alert('getToken Success.');} else {console.log('拿不到token');}}).catch((err) => {console.log( err.message);});}$("#tkdel").on("click", function () {if(tkv!=''){msg.deleteToken(tkv).then(function (r) {console.log(r?'删除ok:':'删除失败')});}});$("#tk").on("click", function () {Notification.requestPermission().then((permission) => {if (permission === 'granted') {console.log('granted');getTk()} else {console.log('拒绝推送 ' + permission);}})})navigator.serviceWorker.register("/webpush/sw.js", {scope: "/"}).then((reg) => {console.log('register sw.js success');msg.useServiceWorker(reg);})
</script></body>
</html>

在/webpush/sw.js 提供后台servicework处理js：处理后台消息，不设置默认将通知消息弹出，数据类消息丢弃，设置后应自行处理通知类消息弹出。

importScripts('https://push-static.dbankcdn.com/hms-messaging.js');
var cf = {apiKey: "{{apikey}}",appId: "{{appid}}",
};// Initialize hmsConfig
hms.initializeApp(cf);
var msg = hms.messaging();
msg.setBackgroundMessageHandler(function (d) {console.log('[sw.js] Received background msg ', d);// data consumer here// return self.registration.showNotification(notificationTitle,//   notificationOptions);
});

获取到token之后应该存储到自己的服务器

云侧发送使用华为push sdk：

按照接口文档发送即可：

https://developer.huawei.com/consumer/cn/doc/development/HMS-References/push-sendapi

接入华为webpush webpush总结相关推荐

魅族手机使用鸿蒙系统,魅族宣布接入华为鸿蒙系统，这应该是黄章最正确的决定...
安卓能有现在的成就一切源于苹果之外其它所有品牌都在使用,俗话讲"众人拾柴火焰高"就是这个道理.相对来讲华为鸿蒙要想做大做强必须有其它品牌支持才可以,如果华为自己一家使用是无法做到与 ...
【伙伴故事】智慧厨电接入华为云+HarmonyOS，你的未来厨房长这样
摘要:国内集成灶的头部企业-火星人,正是通过华为云IoT接入HarmonyOS生态,打造云端智慧厨房的整体解决方案,为我们描绘出一副未来厨房新趋势的蓝图. 本文分享自华为云社区<[伙伴故事]智慧 ...
云起智慧中心连接华为_LifeSmart云起全系列产品接入华为HiLink生态系统
本网9月16日讯近期,LifeSmart云起旗下全屋智能系列产品正式接入华为 HiLink生态平台,成为华为 HiLink智能家居生态伙伴,为更多用户提供全新的产品体验. 自2019年接入苹果Hom ...
魅族使用华为鸿蒙,魅族官宣接入华为鸿蒙，以后我们还能用魅族自家的flyme系统吗？...
魅族Flyme系统一向在UI设计和交互方式上备受好评, Flyme系统可谓是第二个miui系统,但它又比小米miui更精致,精简,即使是小白,也非常容易上手.可以说魅族在 Flyme系统上是真的用心良 ...
华为鸿蒙联合品牌,魅族官宣：接入华为鸿蒙！这是国产智能手机品牌的首个公开表态！...
魅族官宣:接入华为鸿蒙!鸿蒙部署临近,这是国产智能手机品牌的首个公开表态! 在5月28日,魅族科技官方微博"魅族智享生活"发微博称: "你好,鸿蒙.一起拥抱全场景智能生活 ...
安卓和鸿蒙系统,对标Apple Watch！魅族推首款智能手表，官宣接入华为鸿蒙系统...
本文系网易新闻•网易号特色内容激励计划签约账号[智东西]原创内容,未经账号授权,禁止随意转载. 智东西(公众号:zhidxcom) 作者 | 韦世玮编辑 | 心缘智东西5月31日消息,今天,魅族发 ...
springboot接入华为云短信
#记一次接入华为云短信几个月前,也就是公司网站第一个版本上线的时候,当时有业务需要短信验证,于是购买了华为云的短信业务.在此简单的记录一下华为云短信api的接入,比较简单,拿来就可以用这里我首先定义 ...
移远BC20模组使用LwM2M协议接入华为IoT平台（NB-IoT专栏—进阶篇2）
目录 1.背景 2.部署华为云 3.华为云与BC20模组进行数据收发实验 1.背景最近在做一个智慧路灯项目,构思使用STM32结合NB-IoT模组实现数据上传和联动控制,并且可以使用GPS模块上传路 ...
工业智能网关BL110应用之61：如何实现智能楼宇控制BACnet 接入华为云平台
COM口采集楼宇控制BACnet的配置工业智能网关一共有四个COM 接口, 以COM口采集楼宇控制BACnet MS/TP设备为例,COM口 485接口A+.B-分别对应楼宇控制 BACnet M ...
NB模组（BC28/NB86-G）使用域名接入华为云方法
现象截止目前(2020-05-21),移远NB模组BC28在使用域名的情况下无法接入华为云平台,利尔达的NB模组NB86-G使用域名接入未测试. 方法通过AT指令进行域名解析,得到IP后使用IP接 ...

接入华为webpush webpush总结

接入华为webpush webpush总结相关推荐

最新文章

热门文章