HTML网页通知[编辑 | 编辑源代码]

HTML网页通知（Web Notifications）是现代浏览器提供的一种API，允许网站在用户授权后，即使页面处于非活动状态也能向用户发送系统级别的通知。这种功能常用于即时通讯、邮件提醒、日程提醒等场景，显著提升了用户体验。

概述[编辑 | 编辑源代码]

网页通知是Web Notifications API的一部分，属于HTML5的高级特性。它不同于传统的浏览器弹窗（如alert()），而是通过操作系统的通知中心显示，即使浏览器最小化或切换到其他标签页也能正常工作。

核心特点[编辑 | 编辑源代码]

跨标签页/窗口：通知不依赖当前页面是否可见。
用户授权：必须获得用户明确许可才能发送通知。
系统级集成：通知显示在操作系统的通知区域（如Windows操作中心或macOS通知中心）。
可定制：支持自定义图标、标题、正文和交互按钮。

基本用法[编辑 | 编辑源代码]

使用网页通知需要以下步骤：

1. 检查浏览器支持[编辑 | 编辑源代码]

首先需要检测浏览器是否支持Notification API：

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

2. 请求权限[编辑 | 编辑源代码]

在发送通知前必须请求用户授权：

Notification.requestPermission().then(function(permission) {
    if (permission === "granted") {
        console.log("用户已授权通知");
    }
});

权限可能返回三种状态：

granted：用户已授权
denied：用户已拒绝
default：用户未做选择（视为拒绝）

3. 创建通知[编辑 | 编辑源代码]

获得授权后即可创建通知：

new Notification("新消息", {
    body: "您有3条未读消息",
    icon: "/images/notification-icon.png"
});

高级特性[编辑 | 编辑源代码]

通知选项[编辑 | 编辑源代码]

Notification构造函数接受丰富的配置选项：

new Notification("会议提醒", {
    body: "10分钟后有团队会议", 
    icon: "/icons/calendar.png",
    image: "/images/meeting-room.jpg",
    badge: "/badges/company-logo.png",
    vibrate: [200, 100, 200], // 移动设备振动模式
    tag: "meeting-reminder",   // 通知分组标识
    renotify: true,            // 允许替换同tag通知
    actions: [                 // 操作按钮
        { action: "snooze", title: "稍后提醒" },
        { action: "dismiss", title: "忽略" }
    ]
});

通知生命周期[编辑 | 编辑源代码]

可以通过事件监听器处理通知的交互：

const notification = new Notification(...);

notification.onclick = (event) => {
    console.log("通知被点击");
    window.focus();
};

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

notification.onshow = (event) => {
    console.log("通知已显示");
};

Service Worker 集成[编辑 | 编辑源代码]

对于Progressive Web Apps (PWAs)，可以通过Service Worker显示通知：

// 在Service Worker中
self.registration.showNotification("离线可用", {
    body: "此内容已缓存供离线使用",
    icon: "/icons/offline.png"
});

实际案例[编辑 | 编辑源代码]

案例1：聊天应用通知[编辑 | 编辑源代码]

当收到新消息时显示通知，点击后跳转到聊天窗口：

function showChatNotification(sender, message) {
    const notification = new Notification(`${sender}: 新消息`, {
        body: message,
        icon: "/icons/chat.png",
        tag: "chat-message"
    });
    
    notification.onclick = () => {
        window.open(`/chat?user=${encodeURIComponent(sender)}`, "_blank");
    };
}

案例2：待办事项提醒[编辑 | 编辑源代码]

定时提醒未完成的待办事项：

function checkTodos() {
    fetch('/api/todos')
        .then(response => response.json())
        .then(todos => {
            const overdue = todos.filter(todo => !todo.completed && todo.due < Date.now());
            if (overdue.length > 0) {
                new Notification("待办事项逾期", {
                    body: `您有${overdue.length}项任务逾期`,
                    icon: "/icons/todo.png"
                });
            }
        });
}

// 每小时检查一次
setInterval(checkTodos, 60 * 60 * 1000);