HTML5

1.背景：
即时通讯、桌面端app开发、当用户和用户聊天，当发送聊天消息时，须要作收到消息通知，因为用到的技术栈是electron、它也有自己的通知模块、因为其他的原因暂时用不了 最后查到HTML5新增的 Notification API的通知功能。即便将浏览器窗口最小化，依然会收到消息通知、所以就先用它吧、后面再后话处理一下。cEz拜客生活常识网

2.通知权限：
2.1 首先须要 看浏览器是否支持 Notification ，支持才有下文，不然就此止步；
2.2 经过 Notification.permission 检测用户是否容许通知：cEz拜客生活常识网

// Notification.permission === 'granted' 用户容许
// Notification.permission === 'denied' 用户拒绝
// Notification.permission === 'denied' 不知道用户的选择，默认

if(Notification.permission === 'granted'){
    console.log('用户容许通知');
    instance_init(title, options);
}else if(Notification.permission === 'denied'){
    console.log('用户拒绝通知');
}else{
    console.log('用户还没选择，去向用户申请权限吧');
    Notification.requestPermission(function(status) {
    	if(status=='granted'){
    		console.log('用户容许通知');
    		instance_init(title, options);
    	}else if(status=='denied'){
    		console.log('用户拒绝通知');
    	}else{
    		console.log('用户还没选择');
    	}
    });
}

3. 主要用到的参数。其他参数了解：notification - Web API 接口参考 | MDNMDN Web DocsMDN logoMozilla logocEz拜客生活常识网

title：通知的标题
options：通知的设置选项（可选）。
	body：通知的内容。
	tag：表明通知的一个识别标签，相同tag时只会打开同一个通知窗口。
	icon：要在通知中显示的图标的URL。
	image：要在通知中显示的图像的URL。
	data：想要和通知关联的任务类型的数据。
	requireInteraction：通知保持有效不自动关闭，默认为false。

4.代码实现cEz拜客生活常识网

4.1原生html5方式cEz拜客生活常识网

4.2 electron方式、调用即可cEz拜客生活常识网

export const getNotification = (cb?: () => void) => {
  if (Notification && (Notification.permission === "default" || Notification.permission === "denied")) {
    Notification.requestPermission((permission) => {
      if (permission === "granted") {
        cb && cb();
      }
    });
  } else {
    cb && cb();
  }
};
export const createNotification = (message: MessageItem, click?: (id: string, type: any) => void, tag?: string) => {
  if (Notification && document.hidden) {
    const title = message.fromName;
    const notification = new Notification(title, {
      dir: "auto",
      tag: tag ?? (message.id === "" ? message.conversationId : message.id),
      renotify: true,
      icon: icons,
      body: parseMessageType(message),
      requireInteraction: true,
    });
    const id = message.conversationId;
    notification.onclick = () => {
      click && click(id, message.type);
      notification.close();
    };
  }
};

相关阅读: