Notification桌面通知实践

更新日期: 2021-11-04阅读: 1.4k标签: 桌面

Notification通知实践

安全上下文: 此项功能仅在安全上下文(HTTPS), 一些 支持的浏览器.

Notifications api 的通知接口用于向用户配置和显示桌面通知。


构造方法

let notification = new Notification(title, options)

参数

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的图片展示。


事件

关闭通知

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;
    };
}

链接: https://www.fly63.com/article/detial/10776

如何利用HTML5打造桌面应用,介绍基于Nodejs实现搭建跨平台桌面应用的框架

总结html5+javascirpt+Css实现搭建跨平台桌面应用的框架,如何利用HTML5基于node.js打造桌面应用,实现轻量级桌面应用的捷径开发。

nativefier_将web网页封装成可执行的桌面应用程序

给大家介绍一个工具快速将网站封装成可执行的桌面应用程序的工具:nativefier。nativefier是一个命令行实用工具,基于Node.js很容易的把Web站点创建成一个可执行桌面应用程序。

html5 桌面通知_如何使用 HTML5 的 Notification API

html5的Notification就可以很好的解决这些问题。Notification生成的消息是不依附于某个页面,仅仅依附于浏览器,所以无论你在看那个页面,浏览器是否最小化,只有有消息推送都能看到。

web端Notification桌面消息通知推送功能的实现

需要实时桌面推送的功能,就像平时QQ,微信消息推送那种,这个时候我们就可以用到HTML5 Web Notification 这个API了。如果之前没有为该域名请求权限,则不会有弹窗。选择【允许】,则可以进行桌面推送。

HTML5显示桌面通知Notification

Notification.permission一个用于表明当前通知显示授权状态的字符串。可能的值包括:denied (用户拒绝了通知的显示), granted (用户允许了通知的显示), 或 default (因为不知道用户的选择,所以浏览器的行为与 denied 时相同)。

5个开发桌面应用程序的JavaScript框架

很久以前,开发客户端桌面程序需要我们掌握各种复杂的技术,不过现在,我们只需要使用js就可以开发出桌面应用程序,下面我们盘点5个开发桌面应用程序的框架。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!