菜单 搜索
首页 前端知识 HTML5 push消息推送

HTML5 push消息推送

2024-07-30 22:07:56 前端知识 前端哥 180 89 我要收藏

HTML5+ push消息推送

  • push消息推送
  • 关键 API 介绍
    • plus.push
      • addEventListener
      • clear
      • createMessage
      • getAllMessage
      • getClientInfo
      • setAutoNotification
      • remove
  • 实践
    • 消息推送
    • 开启权限

push消息推送

HTML5+ 的 Push 消息推送功能是一个强大的特性，它允许开发者在 Web 应用中实现服务端向客户端主动推送消息的能力。这种机制对于提升用户体验、实现实时通信等场景非常有用。
HTML5+ 是对 HTML5 标准的扩展，它提供了一系列增强的 API 以支持更丰富的 Web 应用功能。Push 消息推送是其中之一，它允许开发者通过特定的 API 接收来自服务端的消息，并在客户端进行展示或处理。

关键 API 介绍

plus.push

plus.push 是 HTML5+ 中用于管理推送消息的主要对象。通过它，开发者可以添加事件监听器、清空推送消息、创建本地消息、获取所有推送消息、获取客户端推送标识信息等。

addEventListener

addEventListener：添加推送消息事件监听器，支持的事件类型包括“click”（用户点击推送消息）、“receive”（应用接收到推送消息）等。

void plus.push.addEventListener( type, listener, Boolean );
  • type: ( String ) 必选 事件类型
    支持事件类型：“click”-从系统消息中心点击消息启动应用事件；“receive”-应用从推送服务器接收到推送消息事件。
  • listener: ( PushReceiveCallback ) 必选 事件监听器回调函数，在接收到推送消息时调用
  • capture: ( Boolean ) 可选 是否捕获事件，此处可忽略

clear

clear：清空所有推送消息，包括系统消息中心中的推送消息。

void plus.push.clear();

createMessage

createMessage：在本地创建推送消息，并添加到系统消息中心。

void plus.push.createMessage( content, payload, option );

参数：

  • content: ( String ) 必选
    消息显示的内容，在系统通知中心中显示的文本内容。
  • payload: ( String | Object ) 可选
    消息承载的数据，可根据业务逻辑自定义数据格式。
  • options: ( MessageOptions ) 可选
    创建消息的额外参数，参考MessageOptions。

返回值：
void : 无

getAllMessage

getAllMessage：获取客户端接收到的所有推送消息。 仅包括在系统消息中心显示的推送消息，不包括调用setAutoNotification(false)方法设置不显示推送消息后接收到的消息。

PushMessage[] plus.push.getAllMessage();

返回值：
PushMessage : Array[PushMessage]对象，推送消息PushMessage数组。

getClientInfo

getClientInfo：获取客户端的推送标识信息，如设备令牌（token）、推送服务令牌（clientid）等。
客户端标识信息用于业务服务器下发推送消息时提交给推送服务器的数据，用于说明下发推送消息的接收者（客户端）。 通常需要客户端在第一次运行时获取并提交到业务服务器绑定。

ClientInfo plus.push.getClientInfo();

返回值：
ClientInfo : 客户端推送标识信息对象

setAutoNotification

setAutoNotification：设置程序是否将接收到的推送消息显示在系统消息中心。

默认情况下程序在接收到推送消息后将会在系统消息中心显示，通过此方法可关闭默认行为，
接收到推送消息后不在系统消息中心显示，通过addEventListener方法的“receive”事件监听处理接收到的消息。
 在这种模式下可通过createMessage方法创建在系统消息中心显示的消息。
void plus.push.setAutoNotification( notify );

参数：
notify: ( Boolean ) 必选 是否自动提示推送消息
可取值true或false，true表示自动显示推送消息，false则不显示。默认值为true。
返回值：
void : 无

remove

remove：删除指定的推送消息，但 iOS 平台不支持对单条消息的删除操作。
删除系统消息中心指定的推送消息，可通过getAllMessage方法获取所有的消息后进行操作。

void plus.push.remove( message )

参数：
message: ( PushMessage ) 必选 要删除的消息对象，可通过getAllMessage()方法来获取消息。
返回值：
void : 无

实践

消息推送代码在onLaunch生命周期中监听

onLaunch: function() {
			isAppLunched = false
			// asyncClientInfo()
			getUserInfoAsync({
				connectSocket: true
			}).then(() => {
				setTimeout(() => {
					initPlusListener()  //消息推送
					initPlusPermissions()  //通知权限
					isAppLunched = true
				}, 1000)
			})
		},

消息推送

export const initPlusListener = () => {
	plus.push.setAutoNotification(true)  //设置了推送消息的自动通知功能
	// ios端 存在点击异常: https://ask.dcloud.net.cn/question/135753
	plus.push.addEventListener('receive', (msg) => {
		try {
		//
			handleAppNoticeReceive(msg)//处理接收到的消息
		} catch (error) {
			track( 'appMsgNoticeReceive', { msg, desc: '处理出错' })
		}
	}, false)

	plus.push.addEventListener('click', (msg) => {
		try {
		//当用户点击通知栏中的推送消息时，会触发这个事件。
		//在事件处理函数中，调用 handleAppNoticeClick 函数来处理点击事件。
			handleAppNoticeClick(msg)
		} catch (error) {
			track('appMsgNoticeClick', { msg, desc: '处理出错' })
		}
	}, false)
}

//收到透传消息    
//只有APP在线时，才会触发receive事件，透传消息不会触发系统消息,需要创建本地消息  
const handleAppNoticeReceive = (rawMsg) => {
	let msgPayload = {}
	log.info('[handleAppNoticeReceive] 收到推送消息 ', JSON.stringify(rawMsg))
	track( 'appMsgNoticeReceive', { rawMsg, desc: '收到推送消息' })
     //尝试解析消息rawMsg.payload赋给msgPayload
	try {
		if (typeof rawMsg.payload === 'string') { //如果是字符串
			msgPayload = JSON.parse(rawMsg.payload)
		} else if(isPlainObject(rawMsg.payload)) {  //如果是object对象
			msgPayload = rawMsg.payload
		}
	} catch(e) {
		const desc =  '解析 app 消息 msg.payload 异常'
		track( 'appMsgNoticeReceive', { rawMsg, desc })
		log.error(desc, e)	
		return
	}
  //从 msgPayload 中提取 data 字段，并解构出 id, shortMessage, title, type。
	const msgData = get(msgPayload,'data') || msgPayload || {}
	const { id, shortMessage, title, type } = msgData
 //验证 id 和 type 是否存在，以及 shortMessage 和 title 是否为空。如果验证失败，记录错误并返回。
	if (isUndefined(id) || isUndefined(type)) {
		const desc = '消息携带 data 数据中 id,type 异常'
		log.error(desc, msgData)	
		track( 'appMsgNoticeReceive', { msgData, desc })
		return
	}
	if (!shortMessage || !title) {
		const desc = '消息携带 data 数据中 shortMessage,title 异常'
		log.error(desc, msgData)	
		track( 'appMsgNoticeReceive', { msgData, desc })
		return
	}
 //记录解析成功的消息数据
	track( 'appMsgNoticeReceive', {
		msgData,
		desc: '解析 msgPayload.data 数据'
	})
	log.info('解析 msgPayload.data 数据', msgData)	

	// TODO: 不本地创建消息，可能存在BUG 推送太多。
	// plus.push.createMessage(shortMessage, rawMsg.payload, {title});  
	// setAppBadgeNum('message', 1); 
}

//消息点击事件    
//【APP在线】，收到透传消息通过，不会提醒至通知栏目，需要发送本地消息，再进行点击触发的点击事件。    
//【APP离线】，收到离线透传消息，必须通过Java后台的Intent字符串携带payload，且符合格式才能触发click事件，格式不符合不会触发
const handleAppNoticeClick = (rawMsg) => {
  //日志记录和跟踪
	log.info('[handleAppNoticeClick] 点击推送消息 ', JSON.stringify(rawMsg))
	track( 'appMsgNoticeClick', { rawMsg, desc: '点击推送消息' })
 //尝试解析 rawMsg.payload，如果解析失败则记录错误并返回。
	let msgPayload = {}
	try {
		if (typeof rawMsg.payload === 'string') {
			msgPayload = JSON.parse(rawMsg.payload)
		} else if(isPlainObject(rawMsg.payload)) {
			msgPayload = rawMsg.payload
		}
	} catch(e) {
		const desc =  '解析 app 消息 msg.payload 异常'
		track( 'appMsgNoticeClick', { rawMsg, desc })
		// 解析 app 消息 msg.payload 异常
		log.error(desc, e)
		return	
	}
  //从 msgPayload 中提取 data 字段，并解构出 ext, id, type, orgId, orgName。
	const msgData = get(msgPayload,'data') || msgPayload || {}
	const { ext, id, type, orgId = '', orgName = ''} = msgData
 //验证 id 和 type 是否存在。如果验证失败，记录错误并返回。
	if (isUndefined(id) || isUndefined(type)) {
		const desc = '消息携带 data 数据中 id,type 异常'
		log.error(desc, msgData)	
		track( 'appMsgNoticeClick', { msgData, desc })
		return
	}
 //记录解析成功的消息数据
	track( 'appMsgNoticeClick', {
		msgData,
		desc: '解析 msgPayload.data 数据'
	})
	log.info('解析 msgPayload.data 数据', msgData)	
 //解析 ext 字段，如果解析失败则记录错误并返回。(ext是从传递进来的参数里解析出来的数据)
	let extInfo = {}
	if (typeof ext === 'string' && ext !== '' && ext !== 'null') {
		try {
			extInfo = JSON.parse(ext) // TODO: 提取逻辑
		} catch(e) {
			// 解析 消息数据中 ext 信息异常
			const desc = '解析 消息数据中 ext 信息异常'
			log.error(desc, e)	
			track('appMsgNoticeClick', {ext, desc })
			return
		}
	}
 //根据 type(根据传递进来的参数解析出来的) 的值进行不同的页面导航，并记录相应的跟踪信息。
	let routeData = {}
	switch (type == 0) {
		case 0: 
			routeData = {id,orgId,orgName}
			track( 'appMsgNoticeClick', { desc: '进入 bjjk', routeData })
			navToPage('console.alarm.detail', routeData)
			break
		case 1: 
			routeData = {
				id,
				orgId,
				orgName,
				title: extInfo.modelName,
				...extInfo,
			}
			track( 'appMsgNoticeClick', { desc: '进入 mxjk', routeData })
			navToPage('console.model.detail', routeData)
			break
		case 2: 
			if (extInfo.isBatch) {
				track( 'appMsgNoticeClick', { desc: 'gd列表' })
				navToPage('console.work.orgList')
				return
			}
			routeData = {
				orgId,
				info: {
					status: extInfo.status || 0,
					id: extInfo.ticketId,
					type: extInfo.ticketType
				}
			}
			track( 'appMsgNoticeClick', { desc: '进入 gd详情', routeData })
			navToPage('console.work.workDetail', routeData)
			break
	}
}

开启权限

export const initPlusPermissions = () => {
	try {
		plus.screen.lockOrientation('portrait-primary') //竖屏正方向锁定
		handleNoticePermission()
	} catch (error) {
		log.error('initPlusPermissions error', error)
		//
	}
}

const handleNoticePermission = () => {
	let type = uni.getSystemInfoSync().platform
	if (type === 'android') {
		var main = plus.android.runtimeMainActivity();
		var pkName = main.getPackageName();
		var NotificationManagerCompat = plus.android.importClass(
			"android.support.v4.app.NotificationManagerCompat");
		if (NotificationManagerCompat == null) {
			NotificationManagerCompat = plus.android.importClass(
			'androidx.core.app.NotificationManagerCompat');
		}
		var packageNames = NotificationManagerCompat.from(main);
		if (!packageNames.areNotificationsEnabled()) { //手机没有开启通知的权限
			uni.showModal({
				title: '通知管理',
				content: '是否允许消息推送',
				success: function(res) {
					if (res.confirm) {
						var uid = main.getApplicationInfo().plusGetAttribute("uid");
						var Intent = plus.android.importClass('android.content.Intent');
						var Build = plus.android.importClass("android.os.Build");
						//android 8.0引导  
						if (Build.VERSION.SDK_INT >= 26) {
							var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
							intent.putExtra('android.provider.extra.APP_PACKAGE', pkName);
						} else if (Build.VERSION.SDK_INT >= 21) { //android 5.0-7.0  
							var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
							intent.putExtra("app_package", pkName);
							intent.putExtra("app_uid", uid);
						} else { //(<21)其他--跳转到该应用管理的详情页
							var Settings = plus.android.importClass("android.provider.Settings");
							var Uri = plus.android.importClass("android.net.Uri");
							var intent = new Intent();
							intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
							var uri = Uri.fromParts("package", main.getPackageName(), null);
							intent.setData(uri);
						}
						// 跳转到该应用的系统通知设置页  
						main.startActivity(intent);
					} else if (res.cancel) {

					}
				}
			});

		}
		return
	}


	if (type === 'ios') {
		var UIApplication = plus.ios.import("UIApplication");
		var app = UIApplication.sharedApplication();
		var enabledTypes = 0;
		if (app.currentUserNotificationSettings) {
			var settings = app.currentUserNotificationSettings();
			enabledTypes = settings.plusGetAttribute("types");
			// console.log("enabledTypes1:" + enabledTypes);
			if (enabledTypes == 0) {
				plus.nativeUI.confirm("消息推送没有开启，是否去开启？", function(e) {
					if (e.index == 0) {
						var NSURL2 = plus.ios.import("NSURL");
						var setting2 = NSURL2.URLWithString("app-settings:");
						var application2 = UIApplication.sharedApplication();
						application2.openURL(setting2);
						plus.ios.deleteObject(setting2);
						plus.ios.deleteObject(NSURL2);
						plus.ios.deleteObject(application2);
					}
				}, {
					"buttons": ["Yes", "No"],
					"verticalAlign": "center"
				});
			}
			plus.ios.deleteObject(settings);
		} else {
			enabledTypes = app.enabledRemoteNotificationTypes();
			if (enabledTypes == 0) {
				console.log("推送未开启!");
			} else {
				console.log("已经开启推送功能!")
			}
			console.log("enabledTypes2:" + enabledTypes);
		}
		plus.ios.deleteObject(app);
	}
}
转载请注明出处或者链接地址：https://www.qianduange.cn//article/14590.html
标签
uniapp
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

python用requests的post提交data数据以及json和字典的转换

2024-08-12 10:08:46

如何设置vscode编辑器代码格式化(settings.json)

2024-08-12 10:08:43

AE、Lottie、JSON简单介绍

2024-08-12 10:08:42

VSCode配置settings.json

2024-08-12 10:08:42

通过node脚本读取app.json路径对应的页面标题记录

2024-08-12 10:08:42

MySQL JSON_TABLE 功能详解与实战应用【含代码示例】

2024-08-12 10:08:41

JSON 格式说明

2024-08-12 10:08:34

2024年最全数据中快速查找和提取的强大工具 JSON_提取json数据里的值,性能，软件测试开发应该了解的Binder原理

2024-08-12 10:08:32

UNI-APP_getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json

2024-08-12 10:08:28

npm‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。

2024-08-12 10:08:28

大家推荐的文章
1

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
2

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
3

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
4

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
5

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
6

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
7

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
8

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
9

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
10

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！