一、概述
TUINotification 是腾讯云即时通信 IM 官方 VUE UI 组件 chat-uikit-vue 的消息通知组件。
TUINotification 利用浏览器的消息推送能力（Web Notification），支持在即时通信应用处于登录状态时（但不处于 focus 聚焦状态），即时收到新消息通知，并且可以通过点击通知，跳转回消息所在的会话。
TUINotification 本质上是利用 JavaScript、Web、浏览器的能力实现的一套 Api[1]，因此实际上与框架（Vue、React等）无关，可以剥离出来使用。
注意
在即时通信应用没有关闭并且没有主动退出登录的情况下，应用处于最小化或正在浏览其他页面时，TUINotification 可以进行消息推送。
如果应用主动调用 logout 退出登录，或者被多端登录踢下线，即使接入了 TUINotification 组件，也收不到推送通知。
当收到新消息，且新消息所在的会话处于聚焦状态下，不会推送通知。
二、效果
是否显示预览 | 普通消息 | 通话消息 |
显示: 显示消息具体内容 |  |  |
不显示：不显示消息具体内容 |  |  |
三、条件说明
3.1 浏览器兼容信息
消息通知 TUINotification 仅支持 Web 端，不支持 H5 端、Webview 等。Web 端 TUINotification 支持浏览器版本限制如下：
浏览器类型 | 浏览器最低版本要求 |
Chrome | 22+ |
Edge | 14+ |
Firefox | 22+ |
Opera | 25+ |
Safari | 6+ |
注意：
iframe、webview、浏览器隐私模式等特殊环境下，TUINotifications 不可用。
3.2 页面访问协议说明
浏览器厂商出于对用户安全、隐私等问题的考虑，生产环境下限制网站于 https 协议下才能正常使用 TUINotifications（Web Notification）的全部功能[1]。为确保生产环境用户顺畅接入和体验 TUINotifications 的全部功能，请使用 https 协议访问即时通信 IM 应用页面。
本地开发环境请使用
http://localhost生产环境请使用
https 协议3.3 设备授权说明
此处需要进行两步授权，分别是：
1. 操作系统允许浏览器发送通知。
macOS：系统偏好设置 > 通知，打开对应浏览器的通知权限。
Windows：设置 > 隐私 > 通知，打开对应浏览器的通知权限。
2. 浏览器允许网站发送通知。
浏览器会根据域名授权设备的使用权，当 TUINotification 获取页面通知权限时，如果没有授权就会弹出授权对话框，需要单击允许才可以进行消息通知。
四、快速接入 TUINotification
您可以在项目的根文件中进行新消息的监听和通知，也可以自定义您想要通知的位置，下面以Vue项目的
${workspace}/src/main.ts为例：import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';import TUINotification from './TUIKit/components/TUINotification/index';/*** Init TUINotification configuration.* 初始化 TUINotification 相关配置信息*/TUINotification.setNotificationConfiguration({// 是否显示预览信息showPreviews: true,// 是否允许通知allowNotifications: true,// 通知标题notificationTitle: "Tencent Cloud Chat",// 通知图标notificationIcon: "https://web.sdk.qcloud.com/im/demo/latest/faviconnew.png",});/*** Listen for new messages and use notification components.* This capability is only available in the web environmen.* 使用 TUI 相关能力监听 newMessageList 字段 进行消息通知* 该能力仅可使用在原生 Web 环境下*/TUIStore.watch(StoreName.CHAT, {// 监听 newMessageList 字段的变化newMessageList: (newMessageList) => {// 回调函数返回新的 messageListif (Array.isArray(newMessageList)) {newMessageList.forEach(message => TUINotification.notify(message));}}});
五、TUINotification API
TUINotification 是用单例模式实现的通知组件，
TUINotification/index.ts 默认导出 TUINotification 的实例，因此不需要使用 new 关键字创建对象。setNotificationConfiguration(params: INotificationConstructorParams): void
描述：配置 TUINotification 的配置项。
TUINotification.setNotificationConfiguration({// 是否显示预览信息showPreviews: true,// 是否允许通知allowNotifications: true,// 通知标题notificationTitle: "Tencent Cloud Chat",// 通知图标notificationIcon: "https://web.sdk.qcloud.com/im/demo/latest/faviconnew.png",});
参数说明：
名称 | 类型 | 可选类型 | 描述 | 默认值 |
showPreviews | boolean | 可选 | true | |
allowNotifications | boolean | 可选 | 是否允许通知，true开启通知，false关闭通知 | true |
notificationTitle | string | 可选 | 通知的标题 | 腾讯云 IM |
notificationIcon | string | 可选 | 通知的图标 | https://web.sdk.qcloud.com/im/demo/latest/faviconnew.png |
返回值
voidnotify(message: Message): void
描述：对消息进行通知。
说明：
首次调用
notify 方法时，方法内部会自动检查浏览器的通知能力，如果浏览器有能力发送通知，会自动申请网站的通知权限，如果申请成功则继续发送该通知。const message = ITUIStore.getMessageModel(messageID);TUINotification.notify(message);
参数说明：
名称 | 类型 | 可选类型 | 描述 | 默认值 |
message | Message | 必选 | 被通知的消息 | 无 |
返回值
voidcheckNotificationAbility(): boolean
描述：检查浏览器是否有通知能力，同兼容性。（与通知权限无关）
说明：
首次调用
notify 方法时，方法内部会自动检查浏览器的通知能力并继续发送通知，因此其实并不需要主动调用该方法。const hasAbility = TUINotification.checkNotificationAbility();if (hasAbility) { ... }
参数说明：
无
返回值
booleanrequestNotificationPermission(): Promise<boolean>
描述：向浏览器申请该网站发送通知的权限，并返回申请结果，如果浏览器没有能力发送通知返回
false。说明：
首次调用
notify 方法时，方法内部会自动检查浏览器的通知能力并申请权限，因此其实并不需要主动调用该方法。该方法也会主动调用
checkNotificationAbility()。const result = await requestNotificationPermission();
参数说明：
无
返回值
Promise<boolean>常见问题
1. 为什么收不到消息通知？
首先，请按照 条件说明 检查您是否满足消息通知条件并且已打开相应设备权限。
之后，请检查
即时通信 IM 所在应用界面是否保持为登录状态。注意
当
即时通信 IM 所在应用界面为激活状态（onFocus）且当前开启的会话（currentConversation）是新消息所在会话时，此时认为您正专注于该会话，不会发送消息通知。2. 如何关闭消息通知的接收？
如果您想关闭消息通知，可以通过设置 setNotificationConfiguration 方法配置自定义参数项中
allowNotifications 参数为 false 来实现。TUINotification.setNotificationConfiguration({allowNotifications: false,});