如何使用 Notification API 显示通知？

推荐答案

// www.javascriptcn.com code example
// 请求用户授权显示通知
Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
        // 创建并显示通知
        new Notification('新消息', {
            body: '您有一条新消息，请查收！',
            icon: 'icon.png'
        });
    }
});

本题详细解读

1. 请求用户授权

在使用 Notification API 之前，必须请求用户授权。可以通过 Notification.requestPermission() 方法来请求权限。该方法返回一个 Promise，当用户做出选择后，Promise 会解析为 granted、denied 或 default。

Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
        // 用户同意显示通知
    } else {
        // 用户拒绝显示通知
    }
});

2. 创建通知

一旦用户授权，可以使用 new Notification() 构造函数来创建通知。构造函数接受两个参数：

• 第一个参数是通知的标题。
• 第二个参数是一个可选的对象，用于配置通知的选项，如 body（通知内容）、icon（通知图标）等。

new Notification('新消息', {
    body: '您有一条新消息，请查收！',
    icon: 'icon.png'
});

3. 处理通知事件

Notification 对象还支持一些事件，如 click、close 等，可以通过监听这些事件来处理用户与通知的交互。

// www.javascriptcn.com code example
const notification = new Notification('新消息', {
    body: '您有一条新消息，请查收！',
    icon: 'icon.png'
});

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

notification.onclose = () => {
    console.log('通知已关闭');
};

4. 兼容性

Notification API 在现代浏览器中得到了广泛支持，但在某些旧版浏览器中可能不可用。因此，在使用之前，建议检查浏览器是否支持该 API。

if ('Notification' in window) {
    // 浏览器支持 Notification API
} else {
    // 浏览器不支持 Notification API
}

5. 注意事项

• 通知通常只在用户与页面交互后才会显示，以避免滥用。
• 通知的显示可能会受到浏览器或操作系统的限制，例如在移动设备上可能不会显示通知。