关于javascript:Notification桌面通知实践

平安上下文: 此项性能仅在平安上下文(HTTPS), 一些反对的浏览器.

Notifications API 的告诉接口用于向用户配置和显示桌面告诉。

见文末代码

let notification = new Notification(title, options)

定义一个告诉的题目，当它被触发时，它将显示在告诉窗口的顶部。

options 对象蕴含利用于告诉的任何自定义设置选项。选项有：

dir: 显示告诉的方向。默认是 auto，追随浏览器语言设置行为，你也能够通过设置 ltr 和 rtl 的值来笼罩该行为（尽管大多数浏览器仿佛疏忽这些设置）

lang: 告诉的语言，如应用代表一个 BCP 47 语言标签的 DOMString 指定的。请参阅 Sitepoint ISO 2 字母语言代码页面，以取得简略的参考。

badge: 一个 USVString 蕴含用于示意告诉的图像的 URL, 当没有足够的空间来显示告诉自身时。

body: 一个 DOMString 示意告诉的注释，将显示在题目下方。

tag: 一个 DOMString 代表告诉的一个辨认标签。

icon: 一个 USVString 蕴含要在告诉中显示的图标的 URL。

image: 一个 USVSTring 蕴含要在告诉中显示的图像的 URL。

data: 您想要与告诉相关联的任意数据。这能够是任何数据类型。

vibrate: 一个振动模式 vibration pattern 设施的振动硬件在告诉触发时收回。

renotify: 一个 Boolean (en-US) 指定在新告诉替换旧告诉后是否应告诉用户。默认值为 false，这意味着它们不会被告诉。

requireInteraction: 示意告诉应放弃无效，直到用户点击或敞开它，而不是主动敞开。默认值为 false。

以下选项列在最新标准中，但在任何浏览器中都不反对.

silent: 一个 Boolean (en-US) 指明告诉是否应该是无声的, 即, 不须要发出声音或振动，无论设施设置如何。默认值为 false，这意味着它不会放弃静默。

sound: 一个 USVString 蕴含告诉触发时要播放的音频文件的 URL。

noscreen: 一个 Boolean (en-US) 指定告诉触发是否应启用设施的屏幕。默认值为 false，这意味着它将启用屏幕。

sticky: 一个 Boolean (en-US) 指明告诉是否应该是“粘”, 即不易被用户清理。默认值为 false，这意味着它不会粘。

if (!("Notification" in window)) {alert("道歉，此浏览器不反对桌面告诉！");
}

在应用桌面告诉前咱们须要获取用户运行以后起源告诉的权限
requestPermission() 办法能够做此事件，返回值有三个 granted（容许），denied（回绝） 或者 default（默认）。

留神：当用户回绝告诉后须要在浏览器 零碎 - 隐衷设置和安全性 - 告诉 从新关上，chrome 从新关上参考

Notification.requestPermission().then(function(result) {if (result === 'denied') {console.log('用户回绝');
    return;
  }
  if (result === 'default') {console.log('用户未受权');
    return;
  }
  // 批准告诉
});

let notification = null;
const title = "巨蟹座 -00 年";
const options = {
  dir: "auto", // 文字方向
  body: "这是我的好姐妹，能够介绍给你", // 告诉主体
  requireInteraction: true, // 不主动敞开告诉
  image: "https://gitee.com/Wzhichao/img/raw/master/uPic/IMG_xxxxx327356%20.png",
  icon: "https://gitee.com/Wzhichao/img/raw/master/uPic/QlkqKm47%20.jpg",  // 告诉图标
};
notification = new Notification(title, options);

这样就不会错过某些重要的信息了
window 谷歌会显示 image 的图片展现
火狐

谷歌

mac 上image图片不会进行显示

close() 办法用于敞开一个以前显示的告诉。

这段代码会在 4 秒后主动敞开告诉

let notification = new Notification(title, options);
setTimeout(notification.close.bind(notification), 4000);

当用户点击告诉后，能够做一些自定义的事件。

let notification = new Notification(title, options);
notification.onclick = () => {alert(1);
};

在浏览器新开一个标签页，关上控制台，粘贴以下代码即可体验

notify()
function notify() {if (!("Notification" in window)) {alert("道歉，此浏览器不反对桌面告诉！");
    }
    Notification.requestPermission().then(function (result) {if (result === "denied") {console.log("用户回绝");
        return;
    }
    if (result === "default") {console.log("用户未受权");
        return;
    }
    // 批准告诉
    sendMesg();});
}

function sendMesg() {
    let notification = null;
    const title = "巨蟹座 -00 年";
    const options = {
    dir: "auto", // 文字方向
    body: "这是我的好姐妹，能够介绍给你", // 告诉主体
    data: {originUrl: `https://developer.mozilla.org/zh-CN/docs/Web/API/notification`,},
    requireInteraction: true, // 不主动敞开告诉
    image:
        "https://gitee.com/Wzhichao/img/raw/master/uPic/IMG_xxxxx327356%20.png",
    icon: "https://gitee.com/Wzhichao/img/raw/master/uPic/QlkqKm47%20.jpg", // 告诉图标
    };
    notification = new Notification(title, options);
    //setTimeout(notification.close.bind(notification), 4000);
    notification.onclick = ({currentTarget: { data} }) => {notification.close();
    window.focus();
    window.location.href = data.originUrl;
    };
}

关于javascript:Notification桌面通知实践

Notification 告诉实际

在线示例

构造方法

参数

title

options 可选

检测浏览器是否反对

获取受权

发送告诉

事件

敞开告诉

点击告诉

示例代码