编辑“︁HTML网页通知”︁（章节）

= HTML网页通知 =

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

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

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

== 基本用法 ==
使用网页通知需要以下步骤：

=== 1. 检查浏览器支持 ===
首先需要检测浏览器是否支持Notification API：
<syntaxhighlight lang="javascript">
if (!("Notification" in window)) {
    console.log("此浏览器不支持桌面通知");
}
</syntaxhighlight>

=== 2. 请求权限 ===
在发送通知前必须请求用户授权：
<syntaxhighlight lang="javascript">
Notification.requestPermission().then(function(permission) {
    if (permission === "granted") {
        console.log("用户已授权通知");
    }
});
</syntaxhighlight>

权限可能返回三种状态：
* '''granted'''：用户已授权
* '''denied'''：用户已拒绝
* '''default'''：用户未做选择（视为拒绝）

=== 3. 创建通知 ===
获得授权后即可创建通知：
<syntaxhighlight lang="javascript">
new Notification("新消息", {
    body: "您有3条未读消息",
    icon: "/images/notification-icon.png"
});
</syntaxhighlight>

== 高级特性 ==

=== 通知选项 ===
Notification构造函数接受丰富的配置选项：
<syntaxhighlight lang="javascript">
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: "忽略" }
    ]
});
</syntaxhighlight>

=== 通知生命周期 ===
可以通过事件监听器处理通知的交互：
<syntaxhighlight lang="javascript">
const notification = new Notification(...);

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

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

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

=== Service Worker 集成 ===
对于Progressive Web Apps (PWAs)，可以通过Service Worker显示通知：
<syntaxhighlight lang="javascript">
// 在Service Worker中
self.registration.showNotification("离线可用", {
    body: "此内容已缓存供离线使用",
    icon: "/icons/offline.png"
});
</syntaxhighlight>

== 实际案例 ==

=== 案例1：聊天应用通知 ===
当收到新消息时显示通知，点击后跳转到聊天窗口：
<syntaxhighlight lang="javascript">
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");
    };
}
</syntaxhighlight>

=== 案例2：待办事项提醒 ===
定时提醒未完成的待办事项：
<syntaxhighlight lang="javascript">
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);
</syntaxhighlight>

== 最佳实践 ==

=== 用户体验建议 ===
* '''适度使用'''：避免频繁发送不重要的通知
* '''明确价值'''：首次请求权限时应解释通知的用途
* '''提供关闭选项'''：允许用户轻松禁用通知
* '''上下文相关'''：确保通知内容对当前用户有意义

=== 性能考虑 ===
* 避免创建大量未关闭的通知
* 对相似通知使用<code>tag</code>属性进行分组
* 在Service Worker中处理后台通知以减少主线程负载

== 浏览器兼容性 ==

使用前应检查兼容性，主要浏览器支持情况如下：

<mermaid>
pie
    title 浏览器支持情况
    "Chrome" : 85
    "Firefox" : 80
    "Safari" : 16
    "Edge" : 80
    "Opera" : 70
    "不支持" : 5
</mermaid>

== 数学表示 ==
通知系统的效率可以用以下公式表示：
<math>
\eta = \frac{N_{read}}{N_{sent}} \times 100\%
</math>
其中：
* <math>\eta</math> 是通知效率
* <math>N_{read}</math> 是被用户查看的通知数量
* <math>N_{sent}</math> 是发送的总通知数量

== 总结 ==
HTML网页通知为Web应用提供了强大的用户参与工具，但需要负责任地使用。通过合理设计通知内容和频率，可以显著提升用户体验而不造成干扰。随着PWA的普及，通知功能已成为现代Web开发的重要组成部份。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML高级特性]]