Notification API 桌面通知

Web Notification API：Notification.requestPermission请求权限、new Notification(title,options)发送通知（body/icon/badge/tag/data）、notificationclick点击事件、Service Worker离线通知 · 难度：入门 · +10XP

Web Notification API —— 浏览器桌面通知

网页可以向用户发送桌面通知（就像微信收到消息那样弹出提示）。需要用户授权，且通常在Service Worker中配合使用。

发送通知

// 1. 请求权限
Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    // 2. 发送通知
    new Notification('新消息', {
      body: '你收到了一条新评论',
      icon: '/icon.png',
      tag: 'msg-1', // 相同tag的通知会覆盖
      data: { url: '/messages' }
    });
  }
});
// 3. 点击通知跳转
self.addEventListener('notificationclick', event => {
  event.notification.close();
  clients.openWindow(event.notification.data.url);
});

动手练习

1. 基础练习：做一个"提醒我"按钮——点击后5秒弹出桌面通知。
2. 进阶应用：配合Service Worker实现离线消息推送通知。
3. 项目实战：在聊天应用中加入消息通知功能——收到新消息弹出通知，点击跳转到对话。