JavaScript 通知API

什么是通知API？

通知API是JavaScript提供的一个接口，允许网页向用户发送系统级别的通知消息，即使在用户没有打开网页的情况下也能收到通知。这个功能特别适合需要实时通知功能的应用，如聊天应用、邮件客户端、社交媒体平台等。

备注

通知API是HTML5的一部分，属于Web API的范畴，在现代浏览器中普遍支持。

通知API的基础知识

通知API主要通过Notification对象来实现。使用这个API前，我们需要了解几个关键点：

必须先获取用户的权限才能发送通知
通知可以包含标题、正文、图标和其他信息
通知可以与用户交互，响应点击或关闭等事件

检查浏览器支持

在使用通知API之前，我们应该先检查用户的浏览器是否支持此功能：

javascript
if ('Notification' in window) {
  console.log('浏览器支持通知API');
} else {
  console.log('浏览器不支持通知API');
}

请求通知权限

使用通知API的第一步是获取用户的许可：

javascript
function requestNotificationPermission() {
  Notification.requestPermission().then(permission => {
    console.log('通知权限：', permission); // granted, denied, 或 default
  });
}

通知权限有三种状态：

granted：用户允许显示通知
denied：用户拒绝显示通知
default：用户尚未做出选择（等同于拒绝）

警告

在某些浏览器中，Notification.requestPermission()可能不返回Promise，所以需要兼容处理：

javascript
function requestPermission() {
  if (Notification.requestPermission.then) {
    Notification.requestPermission().then(permission => {
      console.log('通知权限：', permission);
    });
  } else {
    Notification.requestPermission(permission => {
      console.log('通知权限：', permission);
    });
  }
}

创建一个简单的通知

一旦获得用户许可，就可以创建通知了：

javascript
function showNotification() {
  if (Notification.permission === 'granted') {
    const notification = new Notification('通知标题', {
      body: '这是通知的内容',
      icon: '/path/to/icon.png'
    });
  } else if (Notification.permission !== 'denied') {
    Notification.requestPermission().then(permission => {
      if (permission === 'granted') {
        const notification = new Notification('通知标题', {
          body: '这是通知的内容',
          icon: '/path/to/icon.png'
        });
      }
    });
  }
}

通知选项

创建通知时，可以设置多种选项：

javascript
const options = {
  body: '通知的详细内容',
  icon: '/path/to/icon.png',
  image: '/path/to/image.png',
  badge: '/path/to/badge.png',
  dir: 'auto', // 文本方向：auto, ltr, rtl
  lang: 'zh-CN',
  tag: 'notification-tag', // 用于替换相同tag的通知
  requireInteraction: true, // 通知是否保持显示，直到用户点击或关闭
  renotify: false, // 当显示了相同tag的新通知时，是否通知用户
  silent: false, // 是否静音，不发出提示音
  vibrate: [200, 100, 200] // 振动模式（仅移动设备）
};

const notification = new Notification('通知标题', options);

处理通知事件

通知对象提供了几个事件处理器，让我们能够响应用户与通知的交互：

javascript
function sendNotificationWithEvents() {
  if (Notification.permission === 'granted') {
    const notification = new Notification('新消息', {
      body: '您有一条新消息，点击查看',
      icon: '/images/message-icon.png'
    });
    
    notification.onclick = function() {
      console.log('通知被点击了');
      window.focus(); // 聚焦到当前窗口
      this.close(); // 关闭通知
    };
    
    notification.onshow = function() {
      console.log('通知显示了');
    };
    
    notification.onclose = function() {
      console.log('通知被关闭了');
    };
    
    notification.onerror = function() {
      console.log('通知发生错误');
    };
  }
}

使用ServiceWorker发送通知

在实际应用中，我们通常希望即使用户没有打开我们的网站也能收到通知。这时就需要使用Service Worker：

javascript
// 首先注册Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('ServiceWorker 注册成功:', registration.scope);
    })
    .catch(error => {
      console.log('ServiceWorker 注册失败:', error);
    });
}

// 在Service Worker中发送通知
// sw.js 文件内容
self.addEventListener('push', function(event) {
  const options = {
    body: '这是一条从服务端推送的通知',
    icon: '/path/to/icon.png',
    badge: '/path/to/badge.png',
    data: {
      url: 'https://example.com/page-to-open'
    }
  };
  
  event.waitUntil(
    self.registration.showNotification('推送通知', options)
  );
});

// 处理通知点击事件
self.addEventListener('notificationclick', function(event) {
  const notification = event.notification;
  const url = notification.data.url;
  notification.close();
  
  event.waitUntil(
    clients.openWindow(url)
  );
});

实际应用案例

案例1：聊天应用

以下是一个简单的聊天应用通知实现：

javascript
function initChatNotifications() {
  // 1. 页面加载时请求通知权限
  document.addEventListener('DOMContentLoaded', () => {
    if (Notification.permission !== 'granted' && Notification.permission !== 'denied') {
      Notification.requestPermission();
    }
  });
  
  // 2. 监听新消息
  socket.on('newMessage', message => {
    // 如果页面不在前台，则发送通知
    if (document.hidden) {
      const notification = new Notification(`来自${message.sender}的消息`, {
        body: message.content,
        icon: message.senderAvatar,
        tag: 'chat-message'
      });
      
      notification.onclick = function() {
        window.focus();
        document.getElementById('chat-input').focus();
        this.close();
      };
    }
  });
}

案例2：提醒应用

javascript
class ReminderApp {
  constructor() {
    this.reminders = [];
    this.init();
  }
  
  init() {
    this.requestPermission();
    this.startCheckingReminders();
  }
  
  requestPermission() {
    if (Notification.permission !== 'granted') {
      Notification.requestPermission();
    }
  }
  
  addReminder(title, message, time) {
    const reminder = { title, message, time };
    this.reminders.push(reminder);
    return reminder;
  }
  
  startCheckingReminders() {
    setInterval(() => {
      const now = new Date();
      this.reminders.forEach(reminder => {
        if (reminder.time <= now && !reminder.notified) {
          this.notifyUser(reminder);
          reminder.notified = true;
        }
      });
    }, 1000);
  }
  
  notifyUser(reminder) {
    if (Notification.permission === 'granted') {
      const notification = new Notification(reminder.title, {
        body: reminder.message,
        requireInteraction: true
      });
    }
  }
}

// 使用提醒应用
const app = new ReminderApp();
const fiveMinLater = new Date(Date.now() + 5 * 60000);
app.addReminder('喝水提醒', '现在应该起来喝点水了！', fiveMinLater);

通知API的局限性

使用通知API时需要注意以下几点限制：

需要用户许可：必须获得用户明确许可才能发送通知
浏览器限制：不同浏览器对通知的显示样式和行为可能不同
移动设备支持：在移动设备上，支持程度和体验可能受限
安全限制：只能在HTTPS网站上使用通知API（localhost除外）
通知疲劳：过多的通知可能导致用户禁用权限或忽视通知

最佳实践

明智地请求权限：在用户理解为什么需要通知后再请求权限
相关且重要：只发送用户真正关心的重要通知
清晰简洁：通知标题和内容应该简明扼要
提供有用的交互：点击通知应该引导用户到相关页面
尊重用户的选择：如果用户拒绝通知，不要反复请求

javascript
// 良好的权限请求实践 - 在用户与网站交互后请求
document.getElementById('subscribe-button').addEventListener('click', function() {
  if (Notification.permission !== 'granted' && Notification.permission !== 'denied') {
    Notification.requestPermission().then(permission => {
      if (permission === 'granted') {
        subscribeUser();
      }
    });
  } else if (Notification.permission === 'granted') {
    subscribeUser();
  }
});

浏览器兼容性

使用通知API时，可能需要处理浏览器兼容性问题：

javascript
function createNotification(title, options) {
  // 检查通知API支持
  if (!('Notification' in window)) {
    console.log('此浏览器不支持通知功能');
    return;
  }
  
  // 检查权限
  if (Notification.permission === 'granted') {
    // 兼容性处理
    try {
      return new Notification(title, options);
    } catch (err) {
      console.error('创建通知时出错:', err);
      // 回退到其他提示方式，如alert
      alert(title + ': ' + options.body);
    }
  } else {
    console.log('没有通知权限');
  }
}

总结

JavaScript通知API提供了一个强大的方式让网页应用能够发送系统级别的通知，使用户即使在没有主动打开网页的情况下也能接收到重要的信息。使用这个API需要经过以下步骤：

检查浏览器支持
请求用户许可
创建并发送通知
处理通知事件

通知API与Service Worker结合使用时，可以实现在用户未访问网站时也能发送通知，这对于需要实时通信功能的应用非常有用。

在实际应用中，谨慎使用通知功能，尊重用户的注意力，只发送真正重要且相关的信息，以避免通知疲劳和用户反感。

练习与任务

创建一个简单的倒计时应用，当倒计时结束时发送一个通知。
实现一个待办事项应用，允许用户设置提醒，并在到期时发送通知。
尝试使用Service Worker发送一个后台通知，即使用户没有打开你的网站也能收到。
创建一个通知管理系统，允许用户选择希望接收哪些类型的通知。

进阶资源

通过掌握通知API，你可以为你的Web应用增加即时性和交互性，提升用户体验和参与度。尝试将这些概念应用到你自己的项目中吧！

什么是通知API？​

通知API的基础知识​

检查浏览器支持​

请求通知权限​

创建一个简单的通知​

通知选项​

处理通知事件​

使用ServiceWorker发送通知​

实际应用案例​

案例1：聊天应用​

案例2：提醒应用​

通知API的局限性​

最佳实践​

浏览器兼容性​

总结​

练习与任务​

进阶资源​