5

编程技巧│浏览器 Notification 桌面推送通知

 2 years ago
source link: https://www.fly63.com/article/detial/11757
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

一、什么是 Notification

Notification是html5新增的api，用于想用户配置和现实桌面通知。这些通知的外观和特定功能因平台而异。

Notification通知是脱离浏览器的，即使用户没有停留在当前的标签页，甚至最小化了浏览器，也会在主屏幕的右下角显示通知，然后过一段时间后消失。

Notification在操作中也可以监听通知的显示，点击，关闭等事件。

二、弹窗授权

授权当前页面允许通知，可以通过检查只读属性 Notification.permission 的值来查看你是否已经有权限。

default： 用户还未被询问是否授权，可以通过 Notification.requestPermission() 可以询问用户是否允许通知

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

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

Notification.requestPermission()

三、弹窗使用

可以通过 new Notification($title, $options) 使用通知推送功能

title： 一定会被显示的通知标题

options： 可选，一个被允许用来设置通知的对象。它包含以下属性：

dir： 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）

lang： 指定通知中所使用的语言。

body： 通知中额外显示的字符串

tag： 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。

icon： 一个图片的URL，将被用于显示通知的图标。

new Notification("温馨提醒", {
	body: "fly63前端网送你一份奖品待领取",
	icon: "https://fly63.com/favicon.ico",
	data: "https://fly63.com/"
});
  • 如果第一次在域名控制台中执行上述代码，会提示你是否开启通知。如果开启过，就会自动显示通知。
  • 如果之前在域名中禁止消息通知，可以自己手动在开启，Notification是不能在禁止状态下代码设计开启消息通知的。

用户拒绝显示通知：

一旦用户禁止网站显示通知，网站就不能再请求用户授权显示通知，需要用户去设置中更改。已谷歌为例，在浏览器设置中，开始添加或者开始网站的消息通知。不同的浏览器通知设置的地方不太一样。

四、浏览器支持检测

"Notification" in window

function notify() {
    // 先检查浏览器是否支持
    if (!("Notification" in window)) {
        alert("This browser does not support desktop notification");
    }

    // 检查用户是否同意接受通知
    else if (Notification.permission === "granted") {
        // If it's okay let's create a notification
        var notification = new Notification("Hi there!");
    }

    // 否则我们需要向用户获取权限
    else if (Notification.permission !== "denied") {
        Notification.requestPermission().then(function (permission) {
            // 如果用户接受权限，我们就可以发起一条消息
            if (permission === "granted") {
                var notification = new Notification("Hi there!");
            }
        });
    }
    // 最后，如果执行到这里，说明用户已经拒绝对相关通知进行授权
    // 出于尊重，我们不应该再打扰他们了
}

五、授权回调

该通知有四个回调方法

onshow： 在通知展示的时候调用

onclose： 在通知关闭的时候调用

onclick： 在通知点击的时候调用

onerror： 在通知出错的时候调用

var notification = new Notification("温馨提醒", {
    body: "fly63前端网送你一份奖品待领取",
    icon: "https://fly63.com/favicon.ico",
    data: "https://fly63.com/"
});

notification.onshow = function (event) {
    console.log("show : ", event);
};

notification.onclose = function (event) {
    console.log("close : ", event);
};

notification.onclick = function (event) {
    console.log("click : ", event);
    // 当点击事件触发，打开指定的url
    window.open(event.target.data)
    notification.close();
};

notification.onerror = function (event) {
    console.log("close : ", event);
};

六、3秒后关闭弹窗

实现3秒后关闭弹窗的功能

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

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK