Js实现web应用浏览器通知，需要实现通知的可以参考以下代码，为避免犹豫长英文造成排版的混乱，需在代码前加多余的站位文字，以免此类问题的产生

Notification.requestPermission().then(function(result) {

    if (result === 'denied') {

        console.log('拒绝显示系统通知');

        return;

    }

    if (result === 'default') {

        console.log('默认');

        return;

    }

    console.log('允许显示系统通知')

}); 

当用户允许显示系统通知后，就可以发送通知了，这时可以使用 Notification() 构造函数创建一个新通知，这个方法可以传入两个参数，具体如下：

title（必传）定义一个通知的标题，当它被触发时，它将显示在通知窗口的顶部。

options（可选）options 对象包含应用于通知的任何自定义设置选项，常用的选项有：

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

lang: 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的；

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

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

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

let notification = new Notification('有一条新通知', {

    dir: 'ltr',

    lang: 'zh-CN',

    body: '通知的正文内容：你的请假流程已批准',

    icon: 'http://localhost/coder/favicon.ico'

});

Notification 通知有四种事件，可以通过监听通知事件来执行不同的操作，具体事件如下：

Notification.onclick：对 click 事件的处理，每当用户点击通知时被触发；

Notification.onshow：对 show 事件的处理，当通知显示的时候被触发；

Notification.onerror：对 error 事件的处理，每当通知遇到错误时被触发；

Notification.onclose：对 close 事件的处理，当用户关闭通知时被触发。

let notification = new Notification('有一条新通知', {

    dir: 'ltr',

    lang: 'zh-CN',

    body: '通知的正文内容：你的请假流程已批准',

    icon: 'http://localhost/coder/favicon.ico'

});

// 监听通知显示事件

notification.onshow = () => console.log('通知已显示');

// 监听通知点击事件

notification.onclick = () => console.log('通知被点击');

// 监听通知被关闭事件

notification.onclose = () => console.log('通知被关闭');

// 监听通知错误事件

notification.onerror = () => console.log('通知出现错误');

发送 Notification 通知代码

function sendNotification(title, body, icon, callback) {

    // 先检查浏览器是否支持

    if (!('Notification' in window)) {

        // IE浏览器不支持发送Notification通知!

        return;

    }

    if (Notification.permission === 'denied') {

        // 如果用户已拒绝显示通知

        return;

    }

    if (Notification.permission === 'granted') {

        //用户已授权，直接发送通知

        notify();

    } else {

        // 默认，先向用户询问是否允许显示通知

        Notification.requestPermission(function(permission) {

            // 如果用户同意，就可以直接发送通知

            if (permission === 'granted') {

                notify();

            }

        });

    }

    function notify() {

        let notification = new Notification(title, {

            icon: icon,

            body: body

        });

        notification.onclick = function() {

            callback && callback();

            console.log('单击通知框')

        }

        notification.onclose = function() {

            console.log('关闭通知框');

        };

    }

}

下面来测试一下：

sendNotification('下班通知', '今天周五，还有十分钟下班', 'http://localhost/coder/favicon.ico');