浏览器发送通知

在现代网页开发中，浏览器可以通过Web通知（Web Notifications）API向用户发送通知。这些通知可以在浏览器窗口之外显示，即使用户当前并未与你的网站进行交互。以下为你介绍使用Web通知API的一般步骤和示例代码：

1. 检查浏览器支持

并非所有浏览器都支持Web通知，在使用API之前需要进行检查。

if (!('Notification' in window)) {
    console.log('此浏览器不支持通知。');
}

2. 请求权限

在发送通知之前，需要获取用户的授权。可以通过 Notification.requestPermission() 方法来请求权限。该方法返回一个Promise对象，通过该对象可以获取用户的授权结果。

Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
        console.log('已获得通知权限。');
    } else {
        console.log('用户拒绝了通知权限。');
    }
});

3. 发送通知

在获得用户授权后，就可以使用 new Notification() 构造函数来创建并显示通知。

if (Notification.permission === 'granted') {
    const notification = new Notification('通知标题', {
        body: '这是通知的内容。',
        icon: 'icon.png'
    });
    // 监听通知关闭事件
    notification.onclose = () => {
        console.log('通知已关闭');
    };
    // 监听通知点击事件
    notification.onclick = () => {
        console.log('通知被点击');
        // 可以在此处打开相关页面或执行其他操作
    };
}

上述代码创建了一个简单的通知，包含标题、正文和图标。此外，还添加了通知关闭和点击的事件监听器，以便在用户与通知进行交互时执行相应的操作。

Web通知API是一种强大的工具，可以帮助网站与用户保持互动，即使用户不在网站上活动。但需要注意的是，应该合理使用通知功能，避免给用户带来困扰。