MDN Web API 教程：Notifications API 详解

概述

Notifications API 是现代浏览器提供的一套允许网页向用户显示系统通知的接口。这些通知会显示在浏览器窗口之外，即使用户切换了标签页或打开了其他应用，通知依然能够显示。该 API 的设计目标是兼容不同平台现有的通知系统。

核心概念与应用场景

权限机制

在支持 Notifications API 的平台上，显示系统通知需要两个关键步骤：

1. 获取用户授权：网页必须首先获得用户许可才能显示通知。这是通过 Notification.requestPermission() 方法实现的。出于用户体验考虑，这个方法应该只在用户交互（如点击按钮）时调用。

document.getElementById('notifyBtn').addEventListener('click', () => {
  Notification.requestPermission().then(permission => {
    console.log('用户选择:', permission);
  });
});

当调用此方法时，浏览器会显示一个权限请求对话框，用户可以选择"允许"、"拒绝"或"忽略"（某些浏览器可能不提供忽略选项）。

创建通知

获得权限后，可以通过 Notification 构造函数创建通知：

function showNotification(title, options) {
  if (Notification.permission === 'granted') {
    new Notification(title, options);
  }
}

// 示例用法
showNotification('新消息', {
  body: '您有一条未读消息',
  icon: '/images/message-icon.png'
});

通知选项

Notification 构造函数接受一个可选的 options 对象，可以配置以下属性：

• body: 通知的主要内容文本
• icon: 显示在通知中的图标URL
• image: 显示在通知中的图片URL（部分浏览器支持）
• badge: 小图标URL，用于表示通知来源
• vibrate: 振动模式（移动设备）
• sound: 播放的声音URL
• dir: 文本方向（auto|ltr|rtl）
• tag: 通知标签，用于替换相同标签的旧通知
• renotify: 布尔值，替换通知时是否播放声音/振动
• requireInteraction: 通知是否保持活动状态直到用户点击或关闭

与服务工作者(Service Worker)集成

Notifications API 与 Service Worker 深度集成，使得网页即使在后台运行也能处理通知事件：

服务工作者中的通知

在 Service Worker 中可以使用 ServiceWorkerRegistration.showNotification() 方法显示通知：

// 在service worker中
self.registration.showNotification('后台通知', {
  body: '即使页面关闭也能收到',
  icon: '/images/logo.png'
});

处理通知事件

Service Worker 可以监听和处理通知的点击和关闭事件：

// 监听通知点击事件
self.addEventListener('notificationclick', event => {
  event.notification.close();
  // 打开相关页面
  event.waitUntil(
    clients.openWindow('https://example.com/related-page')
  );
});

// 监听通知关闭事件
self.addEventListener('notificationclose', event => {
  // 可以在这里记录分析数据
});

最佳实践

1. 适时请求权限：不要在页面加载时立即请求通知权限，应该在用户与页面有积极互动后再请求。

2. 提供价值说明：在请求权限前，向用户解释通知将提供什么价值（如新消息提醒、日程提醒等）。

3. 适度使用：避免过度发送通知，这会导致用户关闭权限。

4. 处理权限拒绝：如果用户拒绝权限，应该优雅降级，并提供其他通知方式（如页面内提示）。

5. 使用标签管理通知：对于相同类型的通知使用相同的tag，避免重复通知。

浏览器兼容性

Notifications API 在现代浏览器中有良好的支持，包括：

• Chrome 20+（需要HTTPS）
• Firefox 22+
• Edge 14+
• Safari 7+（Mac OS X 10.9+）
• Opera 25+

移动端支持情况：

• Android版Chrome和Firefox
• iOS Safari部分支持（限制较多）

实际应用示例

即时通讯应用通知

// 请求权限
function requestNotificationPermission() {
  return new Promise((resolve, reject) => {
    if (!('Notification' in window)) {
      reject(new Error('浏览器不支持通知'));
      return;
    }
    
    if (Notification.permission === 'granted') {
      resolve('granted');
    } else if (Notification.permission !== 'denied') {
      Notification.requestPermission().then(resolve, reject);
    } else {
      reject(new Error('用户已拒绝通知权限'));
    }
  });
}

// 显示新消息通知
function showNewMessageNotification(sender, message) {
  if (Notification.permission === 'granted') {
    const notification = new Notification(`${sender}发来消息`, {
      body: message,
      icon: '/images/chat-icon.png',
      vibrate: [200, 100, 200],  // 振动模式
      tag: 'new-message'  // 相同标签的通知会被替换
    });
    
    notification.onclick = () => {
      window.focus();
      notification.close();
    };
  }
}

定时提醒功能

// 设置定时提醒
function scheduleReminder(title, time, options = {}) {
  const now = Date.now();
  const delay = time.getTime() - now;
  
  if (delay > 0) {
    setTimeout(() => {
      if (Notification.permission === 'granted') {
        new Notification(title, options);
      } else {
        console.log('无法显示提醒：无通知权限');
      }
    }, delay);
  }
}

// 使用示例
const reminderTime = new Date();
reminderTime.setMinutes(reminderTime.getMinutes() + 30); // 30分钟后提醒

scheduleReminder('会议提醒', reminderTime, {
  body: '30分钟后有团队会议',
  icon: '/images/calendar-icon.png'
});

高级特性

通知操作按钮

部分浏览器支持在通知中添加操作按钮：

// 带操作按钮的通知
function showActionableNotification() {
  if ('actions' in Notification.prototype) {
    new Notification('下载完成', {
      body: '文件example.zip已下载完成',
      icon: '/images/download-icon.png',
      actions: [
        { action: 'open', title: '打开文件' },
        { action: 'show', title: '显示文件夹' }
      ]
    });
  } else {
    // 不支持操作按钮的降级处理
    new Notification('下载完成', {
      body: '文件example.zip已下载完成',
      icon: '/images/download-icon.png'
    });
  }
}

静默通知

对于不需要立即引起用户注意的通知，可以使用静默模式：

new Notification('系统更新', {
  body: '新版本已准备好安装',
  silent: true  // 不播放声音或振动
});

安全考虑

1. HTTPS要求：大多数浏览器要求页面通过HTTPS提供服务才能使用Notifications API。

2. 权限持久性：用户的权限选择通常会在浏览器会话间保持，但用户随时可以在浏览器设置中更改。

3. 滥用防护：浏览器可能会限制频繁的通知请求或显示，防止滥用。

调试技巧

1. 检查权限状态：可以通过Notification.permission检查当前权限状态。

2. 模拟通知：在开发时，可以先检查权限状态，如果未授予则使用控制台日志代替实际通知。

3. 清除权限：在Chrome中可以通过chrome://settings/content/notifications清除特定站点的通知权限。

总结

Notifications API 为Web应用提供了向用户显示系统级通知的能力，极大地增强了Web应用的用户体验和功能性。通过合理使用这一API，开发者可以创建更加贴近原生应用体验的Web应用。记住要始终尊重用户的偏好，只在确实能为用户提供价值时使用通知功能。