浅谈浏览器通知 Notification

方法一：闪烁浏览器标题

利用document.title修改页签的标题，使用定时器来回切换内容实现标题闪烁，引起用户注意。

var notice;
function sendNotificationFn(message, time) {
  var oldTitle = message; // 保存原有标题
  var changeVal = 1;
//间隔时间刷新
  notice = setInterval(function() {
   if (changeVal) {
     document.title = oldTitle;
     changeVal = 0
   } else {
     document.title = oldTitle;
     changeVal = 1
   }
 }, time || 1000);
 
 return notice;
}

sendNotificationFn('有新的通知', 500);
// 中止通知
// setTimeout(()=>{
//   clearInterval(notice);
// },2000)

方法二：web notification

//常用浏览器提示  
new Notification("通知标题：", {
    body: '通知内容',    
    icon: 'http://cczs-eidp-test.oss-cn-shenzhen.aliyuncs.com/f0a98a3baab84ea2b9a57202757252a1/6af5cbdf2a1040d5b5d463aa302db3d0.png?Expires=1691115569&OSSAccessKeyId=LTAI5tPZiRHWW6kSmWZimaAv&Signature=2dqTuo6I1ojp01CrtNwNgt%2F7wQA%3D'
})

如果没有弹出弹窗，有两种可能

1. 浏览器不支持Notification API
2. 需要获得通知授权。

iNotify.js 方法库介绍

参考仓库

下载

# v2.x
$ npm install @wcjiang/notify --save
# v1.x
$ npm install title-notify --save


https://gitee.com/jaywcjlove/iNotify#%E5%AE%9E%E4%BE%8B%E4%B8%80

基本使用方法

import Notify from "@wcjiang/notify";

const notify = new Notify({
  message: "有消息了。", // 标题
  effect: "flash", // flash | scroll 闪烁还是滚动
  openurl: "https://github.com/jaywcjlove/iNotify", // 点击弹窗打开连接地址
  onclick: () => {
    // 点击弹出的窗之行事件
    console.log("---");
  },
  // 可选播放声音
  audio: {
    // 可以使用数组传多种格式的声音文件
    file: ["msg.mp4", "msg.mp3", "msg.wav"],
    // 下面也是可以的哦
    // file: 'msg.mp4'
  },
  // 标题闪烁，或者滚动速度
  interval: 1000,
  disableFavicon: false, // 可选，默认不禁用。如果为true则不覆盖原有favicon
  // 可选，默认绿底白字的  Favicon
  updateFavicon: {
    // favicon 字体颜色
    textColor: "#fff",
    // 背景颜色，设置背景颜色透明，将值设置为“transparent”
    backgroundColor: "#2F9A00",
  },
  // 可选chrome浏览器通知，默认不填写就是下面的内容
  notification: {
    title: "通知！", // 设置标题
    icon: "", // 设置图标 icon 默认为 Favicon
    body: "您来了一条新消息", // 设置消息内容
  },
});

notify.player();