[html5] (Notification) 桌面通知

BoYang 发布于2019-08-02 18:02 / 2756人阅读

摘要：前几天要做一个桌面通知的功能，翻查以前做的笔记，发现这个已经不能用了，了下，基本都是介绍的，后来在上找到答案，现在支持的是，估计是标准化了。

前几天要做一个桌面通知的功能，翻查以前做的笔记，发现 webkitNotifications这个已经不能用了，baidu了下，基本都是介绍webkitNotifications的，后来在SOF上找到答案，现在chrome支持的是Notification，估计是W3C标准化了。api也变了，mark之。

Notification Properties

title: "别动神仙说: "
body: "这里是body"
icon: "http://q4.qlogo.cn/g?b=qq&k=icUjVAN5Ja7BCDQ1ICl8Svw&s=40"
tag: "1" // 通知框ID，相同id可替换，而不是出现新的通知框
lang: "" // 语言
dir: "auto" // 文字方向

new Notification("别动神仙说：", {
    body: "这里是body",
    icon: "http://q4.qlogo.cn/g?b=qq&k=icUjVAN5Ja7BCDQ1ICl8Svw&s=40",
    tag: 1
});

onshow: null // 显示通知框时调用
onclick: null // 点击通知框时调用
onclose: null // 点击通知框关闭按钮时调用
onerror: null

例如实现通知弹出一段时间后自动关闭

var notification = new Notification("标题");
notification.onshow = function () {
    setTimeout(function () {
        notification.close();
    }, 3000);
}

Notification.permission
有三种状态

default：未设置过为这个状态，通过Notification.requestPermission()可以询问用户是否允许通知

granted：用户点击允许后的状态

denied：用户点击拒绝后的状态，通知框不可用

Methods

Notification.requestPermission()

一般在Notification.permission === "default"时，用户通过点击等操作调用

document.onclick = function() {
    Notification.requestPermission()
}

使用回调

Notification.requestPermission(function (permission) {
    // 可在确认后直接弹出
    if (permission === "granted") {
        var notification = new Notification("弹窗");
    }
});

Notification.close()
通知框关闭

function notify() {
    if (!("Notification" in window)) {
        alert("This browser does not support desktop notification");
        return;
    } 

    if (Notification.permission === "granted") {
        var notification = new Notification("Hi there!");
    } 
    else if (Notification.permission === "default") {
        Notification.requestPermission(function (permission) {
            if (permission === "granted") {
                var notification = new Notification("Hi there!");
            }
        });
    }
}

References：

https://developer.mozilla.org/en-US/docs/Web/API/Notification.tag

服务器托管云服务器桌面通知 notification android notification notification的用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55134.html

HTML5 桌面通知：Notification API

摘要：前言是新增的桌面通知，用于向用户显示通知信息。只有用户允许的权限下，才能起到作用，避免某些网站的广告滥用或其它给用户造成影响。对象提供了方法请求用户当前来源的权限以显示通知。通知保持有效不自动关闭，默认为。前言 Notification API 是 HTML5 新增的桌面通知 API，用于向用户显示通知信息。该通知是脱离浏览器的，即使用户没有停留在当前标签页，甚至最小化了浏览器，该通...

Karuru 2019-08-05 17:56 评论0 收藏0
H5 notification浏览器桌面通知

摘要：是新增的，用于向用户配置和显示桌面通知。通知不自动关闭，默认为自动关闭。在浏览器下，没有关闭请求权限的选项，用户必须选择同意拒绝。 showImg(https://segmentfault.com/img/remote/1460000018227718); Notification是HTML5新增的API，用于向用户配置和显示桌面通知。上次在别的网站上看到别人的通知弹窗，好奇之余也想知...

endless_road 2019-08-23 15:21 评论0 收藏0
H5 notification浏览器桌面通知

摘要：是新增的，用于向用户配置和显示桌面通知。通知不自动关闭，默认为自动关闭。在浏览器下，没有关闭请求权限的选项，用户必须选择同意拒绝。 showImg(https://segmentfault.com/img/remote/1460000018227718); Notification是HTML5新增的API，用于向用户配置和显示桌面通知。上次在别的网站上看到别人的通知弹窗，好奇之余也想知...

cikenerd 2019-08-05 18:10 评论0 收藏0
html5系列：notification api升级——从webkitNotifications到N

摘要：从开始，就被取消了，只能使用标准化的。获取权限无论是新版还是老版的，都是需要得到用户的批准，才能获取到相应的权限。老版获取权限的方式是这样的通过方法检查当前是否已获得权限。调用刚刚创建的对象的方法来进行显示。最近又鼓捣起两年前做的一个chrome扩展，想要跑起来却发现报错了，看了下console，首先是indexedDB报错，说是window.webkitIndexedDB已经被废弃...

Jrain 2019-08-22 10:59 评论0 收藏0
html5系列：notification api升级——从webkitNotifications到N

摘要：从开始，就被取消了，只能使用标准化的。获取权限无论是新版还是老版的，都是需要得到用户的批准，才能获取到相应的权限。老版获取权限的方式是这样的通过方法检查当前是否已获得权限。调用刚刚创建的对象的方法来进行显示。最近又鼓捣起两年前做的一个chrome扩展，想要跑起来却发现报错了，看了下console，首先是indexedDB报错，说是window.webkitIndexedDB已经被废弃...

Elle 2019-08-02 18:24 评论0 收藏0