HTML的Web Notifications API：实现浏览器系统级通知的用户授权与显示控制 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

HTML Web Notifications API：实现浏览器系统级通知的用户授权与显示控制

大家好，今天我们来深入探讨 HTML Web Notifications API，这是一项强大的技术，允许网页应用程序在用户允许的情况下，向操作系统发送系统级别的通知。这种通知可以出现在屏幕的边缘，或者在操作系统的通知中心，即使浏览器窗口被最小化甚至关闭，用户也能收到重要信息。

1. Web Notifications API 的基本概念

Web Notifications API 允许网页应用在用户允许的情况下，利用操作系统提供的通知功能，向用户推送消息。这些消息可以包含标题、正文、图标等信息，并且可以与用户进行交互，例如点击通知打开网页。

1.1. 核心接口

Web Notifications API 主要依赖于以下几个接口：

Notification 接口： 代表一个通知实例。你可以使用这个接口创建、显示、更新和关闭通知。
Notification.permission 属性： 静态属性，返回用户当前对通知的授权状态。有三种可能的值：
- 'granted'：用户已授权允许发送通知。
- 'denied'：用户已明确拒绝发送通知。
- 'default'：用户尚未做出选择。
Notification.requestPermission() 方法： 静态方法，用于向用户请求发送通知的权限。必须在用户交互（例如点击按钮）后调用，否则浏览器可能会阻止权限请求。
NotificationEvent 接口： 代表与通知相关的事件，例如 show、click、close 和 error。

1.2. 通知的生命周期

一个通知的生命周期大致如下：

检查权限： 首先，检查用户是否已授权允许发送通知。
请求权限（如果需要）： 如果用户尚未授权或拒绝授权，请求权限。
创建通知： 使用 Notification 构造函数创建一个通知实例。
显示通知： 浏览器会将通知传递给操作系统，由操作系统负责显示通知。
处理事件： 监听 show、click、close 和 error 事件，以便在通知显示、点击、关闭或发生错误时执行相应的操作。
关闭通知： 通知可能会在一段时间后自动关闭，或者你可以手动调用 close() 方法关闭通知。

2. 用户授权：权限请求与状态管理

在使用 Web Notifications API 之前，必须获得用户的授权。这是为了防止网站滥用通知功能，给用户带来骚扰。

2.1. 检查权限状态

首先，我们需要检查用户当前的授权状态，使用 Notification.permission 属性：

if (Notification.permission === 'granted') {
  // 用户已授权，可以发送通知
  console.log('Notification permission granted.');
} else if (Notification.permission === 'denied') {
  // 用户已拒绝授权，无法发送通知
  console.log('Notification permission denied.');
} else {
  // 用户尚未做出选择，需要请求权限
  console.log('Notification permission pending.');
}

2.2. 请求权限

如果 Notification.permission 的值为 'default'，我们需要向用户请求权限。使用 Notification.requestPermission() 方法：

function requestNotificationPermission() {
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      // 用户已授权，可以发送通知
      console.log('Notification permission granted.');
    } else if (permission === 'denied') {
      // 用户已拒绝授权，无法发送通知
      console.log('Notification permission denied.');
    } else {
      // 用户拒绝授权，或关闭了权限询问框。
      console.log('Notification permission request dismissed.');
    }
  });
}

// 必须在用户交互后调用该函数，例如点击按钮
document.getElementById('requestPermissionButton').addEventListener('click', requestNotificationPermission);

重要提示： Notification.requestPermission() 方法返回一个 Promise 对象。你应该使用 .then() 方法处理 Promise 的结果，以便在用户授权、拒绝授权或关闭权限询问框时执行相应的操作。此外，浏览器通常会阻止在没有用户交互的情况下调用 Notification.requestPermission() 方法，因此你需要在用户点击按钮或其他交互事件后调用该方法。

2.3. 权限状态变更的处理

用户的授权状态可能会发生变化，例如用户可能会在浏览器设置中更改通知权限。为了应对这种情况，你可以监听 permissionchange 事件：

navigator.permissions.query({ name: 'notifications' }).then(permissionStatus => {
  permissionStatus.onchange = () => {
    console.log('Notification permission changed to ' + permissionStatus.state);
    // 根据新的权限状态采取相应的行动
    if (permissionStatus.state === 'granted') {
      // 权限已授权
    } else if (permissionStatus.state === 'denied') {
      // 权限被拒绝
    } else {
      // 权限状态未知
    }
  };
});

3. 创建和显示通知

获得用户授权后，就可以创建和显示通知了。

3.1. 创建 Notification 实例

使用 Notification 构造函数创建一个通知实例。构造函数接受两个参数：

title (必选)： 通知的标题。
options (可选)： 一个对象，包含通知的各种选项，例如 body (通知正文)、icon (通知图标)、data (与通知关联的数据) 等。

function showNotification() {
  if (Notification.permission === 'granted') {
    const notification = new Notification('Hello, World!', {
      body: 'This is a simple notification.',
      icon: 'icon.png',
      data: { message: 'This is some extra data.' }
    });

    // 监听通知事件
    notification.addEventListener('show', () => {
      console.log('Notification shown.');
    });

    notification.addEventListener('click', () => {
      console.log('Notification clicked.');
      // 在这里执行点击通知后的操作，例如打开网页
      window.focus(); // 将浏览器窗口聚焦
      notification.close(); // 关闭通知
    });

    notification.addEventListener('close', () => {
      console.log('Notification closed.');
    });

    notification.addEventListener('error', (error) => {
      console.error('Notification error:', error);
    });

    // 手动关闭通知（可选）
    // setTimeout(() => {
    //   notification.close();
    // }, 5000); // 5秒后关闭通知
  } else {
    console.log('Notification permission not granted.');
  }
}

3.2. Notification 选项

options 对象可以包含以下属性：

属性	类型	描述
`body`	string	通知正文。
`icon`	string	通知图标的 URL。
`image`	string	大型通知图像的 URL，某些平台支持。
`data`	any	与通知关联的任意数据。可以在 `click` 事件处理程序中使用。
`tag`	string	通知的标签。具有相同标签的通知将被替换。这可以用来防止重复显示相同的通知。
`renotify`	boolean	如果为 `true`，则即使具有相同 `tag` 的通知已存在，也会重新显示通知。默认为 `false`。
`requireInteraction`	boolean	如果为 `true`，则通知将保持显示状态，直到用户明确关闭它。默认为 `false`。
`silent`	boolean	如果为 `true`，则通知不会发出声音或振动。默认为 `false`。
`sound`	string	通知声音的 URL。
`vibrate`	number[]	一个数字数组，指定振动模式。例如，`[200, 100, 200]` 表示振动 200 毫秒，暂停 100 毫秒，再次振动 200 毫秒。
`actions`	object[]	通知中显示的操作按钮。每个操作按钮都是一个对象，包含 `title` (按钮文本) 和 `action` (与按钮关联的操作)。点击操作按钮会触发 `notificationclick` 事件，并提供 `action` 属性。
`badge`	string	状态栏中显示的徽章图标的 URL (仅适用于 Android)。
`dir`	string	文本方向。可以是 `'auto'`、`'ltr'` (从左到右) 或 `'rtl'` (从右到左)。
`lang`	string	通知的语言。
`timestamp`	number	通知的时间戳（以毫秒为单位）。如果未指定，则使用当前时间。

3.3. 处理通知事件

可以通过监听 Notification 实例的事件来处理通知的各种行为，例如 show、click、close 和 error。

show 事件： 当通知显示时触发。
click 事件： 当用户点击通知时触发。你可以在这个事件处理程序中执行点击通知后的操作，例如打开网页。
close 事件： 当通知关闭时触发。通知可能会在一段时间后自动关闭，或者你可以手动调用 close() 方法关闭通知。
error 事件： 当发生错误导致通知无法显示时触发。

4. 高级用法：通知分组与操作按钮

Web Notifications API 还提供了一些高级功能，例如通知分组和操作按钮。

4.1. 通知分组 (tag)

可以使用 tag 选项将具有相同主题的通知分组在一起。当具有相同 tag 的通知显示时，新的通知将替换旧的通知，而不是创建新的通知。这可以用来防止重复显示相同的通知。

const notification = new Notification('New Message', {
  body: 'You have a new message from John Doe.',
  tag: 'new-message'
});

// 如果已经有一个 tag 为 'new-message' 的通知，新的通知将替换旧的通知

4.2. 操作按钮 (actions)

可以使用 actions 选项在通知中添加操作按钮。每个操作按钮都是一个对象，包含 title (按钮文本) 和 action (与按钮关联的操作)。点击操作按钮会触发 notificationclick 事件，并提供 action 属性。

const notification = new Notification('Reminder', {
  body: 'Don't forget to buy milk.',
  actions: [
    { action: 'snooze', title: 'Snooze' },
    { action: 'dismiss', title: 'Dismiss' }
  ]
});

notification.addEventListener('click', (event) => {
  if (event.action === 'snooze') {
    // 执行 "Snooze" 操作
    console.log('Snoozing...');
    notification.close();
  } else if (event.action === 'dismiss') {
    // 执行 "Dismiss" 操作
    console.log('Dismissing...');
    notification.close();
  } else {
    // 用户点击了通知主体
    console.log('Notification clicked.');
    window.focus();
    notification.close();
  }
});

5. 安全性和最佳实践

在使用 Web Notifications API 时，需要注意以下安全性和最佳实践：

不要滥用通知： 只在必要时发送通知，避免给用户带来骚扰。
尊重用户隐私： 不要在通知中包含敏感信息。
提供清晰的控制： 允许用户轻松地关闭或禁用通知。
处理错误： 监听 error 事件，以便在发生错误时采取相应的行动。
用户体验优先： 设计友好的通知，避免过度打断用户。
HTTPS： Web Notifications API 通常只能在安全上下文 (HTTPS) 中使用。

6. 浏览器兼容性

Web Notifications API 的浏览器兼容性良好，主流浏览器都支持该 API。但是，不同浏览器对 API 的实现可能存在一些差异。建议在使用 API 之前，查阅相关文档，了解浏览器的兼容性情况。你可以使用 Can I use 等网站查看浏览器支持情况。

7. 代码示例：完整的演示

以下是一个完整的代码示例，演示了如何使用 Web Notifications API：

<!DOCTYPE html>
<html>
<head>
  <title>Web Notifications Demo</title>
</head>
<body>
  <h1>Web Notifications Demo</h1>

  <button id="requestPermissionButton">Request Notification Permission</button>
  <button id="showNotificationButton">Show Notification</button>

  <script>
    // 请求权限
    function requestNotificationPermission() {
      Notification.requestPermission().then(permission => {
        if (permission === 'granted') {
          console.log('Notification permission granted.');
        } else if (permission === 'denied') {
          console.log('Notification permission denied.');
        } else {
          console.log('Notification permission request dismissed.');
        }
      });
    }

    // 显示通知
    function showNotification() {
      if (Notification.permission === 'granted') {
        const notification = new Notification('Hello, World!', {
          body: 'This is a simple notification.',
          icon: 'icon.png',
          data: { message: 'This is some extra data.' },
          actions: [
            { action: 'reply', title: 'Reply' },
            { action: 'view', title: 'View' }
          ]
        });

        notification.addEventListener('show', () => {
          console.log('Notification shown.');
        });

        notification.addEventListener('click', (event) => {
          if (event.action === 'reply') {
            console.log('Replying...');
            notification.close();
          } else if (event.action === 'view') {
            console.log('Viewing...');
            window.focus();
            notification.close();
          } else {
            console.log('Notification clicked.');
            window.focus();
            notification.close();
          }
        });

        notification.addEventListener('close', () => {
          console.log('Notification closed.');
        });

        notification.addEventListener('error', (error) => {
          console.error('Notification error:', error);
        });
      } else {
        console.log('Notification permission not granted.');
      }
    }

    // 绑定事件处理程序
    document.getElementById('requestPermissionButton').addEventListener('click', requestNotificationPermission);
    document.getElementById('showNotificationButton').addEventListener('click', showNotification);
  </script>
</body>
</html>

8. 开发者工具与调试

在开发和调试 Web Notifications API 时，可以使用浏览器的开发者工具。例如，在 Chrome 浏览器中，可以在 "Application" 面板中查看通知权限的状态，以及模拟发送通知。

9. 总结：灵活运用通知，提升用户体验

Web Notifications API 是一项非常有用的技术，可以帮助你向用户发送重要的信息，即使浏览器窗口被最小化甚至关闭。在使用 API 时，需要注意用户授权、安全性和最佳实践，以便提供良好的用户体验。灵活运用通知特性，可以显著提升应用的交互性与用户黏性。

HTML Web Notifications API：实现浏览器系统级通知的用户授权与显示控制

发表回复 取消回复

发表回复取消回复