一、概述

TUINotification 是腾讯云即时通信 IM 官方 VUE UI 组件 chat-uikit-vue 的消息通知组件。TUINotification 利用浏览器的消息推送能力（Web Notification），支持在即时通信应用处于登录状态时（但不处于 focus 聚焦状态），即时收到新消息通知，并且可以通过点击通知，跳转回消息所在的会话。TUINotification 本质上是利用 JavaScript、Web、浏览器的能力实现的一套 Api^[1]，因此实际上与框架（Vue、React等）无关，可以剥离出来使用。注意在即时通信应用没有关闭并且没有主动退出登录的情况下，应用处于最小化或正在浏览其他页面时，TUINotification 可以进行消息推送。如果应用主动调用 logout 退出登录，或者被多端登录踢下线，即使接入了 TUINotification 组件，也收不到推送通知。当收到新消息，且新消息所在的会话处于聚焦状态下，不会推送通知。

二、效果

单击 腾讯云 IM DEMO 进行消息通知体验，显示效果如下（以 macOS 为例）：

是否显示预览	普通消息	通话消息
显示: 显示消息具体内容		
不显示：不显示消息具体内容		

三、条件说明

3.1 浏览器兼容信息

消息通知 TUINotification 仅支持 Web 端，不支持 H5 端、Webview 等。Web 端 TUINotification 支持浏览器版本限制如下：

更多兼容性情况可在 浏览器兼容性查询工具 查询 Notification。注意：iframe、webview、浏览器隐私模式等特殊环境下，TUINotifications 不可用。

3.2 页面访问协议说明

浏览器厂商出于对用户安全、隐私等问题的考虑，生产环境下限制网站于 https 协议下才能正常使用 TUINotifications（Web Notification）的全部功能^[1]。为确保生产环境用户顺畅接入和体验 TUINotifications 的全部功能，请使用 https 协议访问即时通信 IM 应用页面。本地开发环境请使用 http://localhost生产环境请使用 https 协议

3.3 设备授权说明

此处需要进行两步授权，分别是：1. 操作系统允许浏览器发送通知。macOS：系统偏好设置 > 通知，打开对应浏览器的通知权限。Windows：设置 > 隐私 > 通知，打开对应浏览器的通知权限。2. 浏览器允许网站发送通知。
浏览器会根据域名授权设备的使用权，当 TUINotification 获取页面通知权限时，如果没有授权就会弹出授权对话框，需要单击允许才可以进行消息通知。

四、快速接入 TUINotification

在之前的含 UI 集成步骤中^[2]，拷贝过的TUIKIT文件夹中已经包含了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) => {    // 回调函数返回新的 messageList    if (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",});

参数说明：

返回值void

notify(message: Message): void

描述：对消息进行通知。说明：首次调用 notify 方法时，方法内部会自动检查浏览器的通知能力，如果浏览器有能力发送通知，会自动申请网站的通知权限，如果申请成功则继续发送该通知。

const message = ITUIStore.getMessageModel(messageID);TUINotification.notify(message);

参数说明：

返回值void

checkNotificationAbility(): boolean

描述：检查浏览器是否有通知能力，同兼容性。（与通知权限无关）说明：首次调用 notify 方法时，方法内部会自动检查浏览器的通知能力并继续发送通知，因此其实并不需要主动调用该方法。

const hasAbility = TUINotification.checkNotificationAbility();if (hasAbility) { ... }

参数说明：无返回值boolean

requestNotificationPermission(): Promise

描述：向浏览器申请该网站发送通知的权限，并返回申请结果，如果浏览器没有能力发送通知返回false。说明：首次调用 notify 方法时，方法内部会自动检查浏览器的通知能力并申请权限，因此其实并不需要主动调用该方法。该方法也会主动调用checkNotificationAbility()。

const result = await requestNotificationPermission();

参数说明：无返回值Promise

常见问题

1. 为什么收不到消息通知？首先，请按照 条件说明 检查您是否满足消息通知条件并且已打开相应设备权限。之后，请检查 即时通信 IM 所在应用界面是否保持为登录状态。注意当 即时通信 IM 所在应用界面为激活状态（onFocus）且当前开启的会话（currentConversation）是新消息所在会话时，此时认为您正专注于该会话，不会发送消息通知。2. 如何关闭消息通知的接收？如果您想关闭消息通知，可以通过设置 setNotificationConfiguration 方法配置自定义参数项中 allowNotifications 参数为 false 来实现。

TUINotification.setNotificationConfiguration({  allowNotifications: false,});

交流与反馈

单击进入 IM 社群，享有专业工程师的支持，解决您的难题。

参考资料

[1] Web APIs – Notification[2] 快速入门（Web & H5 Vue2/Vue3）

对即时通讯IM解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案