通知反应本机 - JavaScript

在 Web 开发中，通知反应本机 (Notification API) 可以允许网站向浏览器外面发送通知，以便向用户发布重要信息或事件提醒。当用户无法访问网站时，这些通知还可以在旁边的系统通知区域内显示。

如何创建通知反应本机？

创建通知反应本机是很容易的，只需遵循以下步骤：

步骤1: 检查浏览器是否支持通知反应本机

在创建通知前，你需要检查浏览器是否支持 Notification API。你可以使用以下代码：

// 检查浏览器是否支持 Notification API
if ("Notification" in window) {
  // 支持通知反应本机，则请求授权
} else {
  // 不支持通知反应本机
}

步骤2: 请求授权

在发出通知之前，你需要请求用户授权。这可以通过以下代码完成：

// 请求授权
Notification.requestPermission().then(function(permission) {
  // 如果授权成功，则创建通知
  if (permission === "granted") {
    var notification = new Notification("标题", {
      body: "消息正文"
    });
  }
});

步骤3: 创建通知

一旦授予了授权，你可以使用以下代码创建通知：

// 创建通知
var notification = new Notification("标题", {
  body: "消息正文"
});

通知反应本机 API 的属性

以下是可以在通知对象中使用的属性和方法：

属性

• title : 通知的标题
• body : 通知正文
• tag : 标识通知的标签。如果标签相同，则较新的通知将替换旧的通知。
• icon : 通知图标的路径。它应该是一个相对路径。

方法

• close() : 关闭通知。

示例代码

下面是一个完整的示例代码，演示如何创建通知反应本机：

// 检查浏览器是否支持 Notification API
if ("Notification" in window) {
  // 请求授权
  Notification.requestPermission().then(function(permission) {
    // 如果授权成功，则创建通知
    if (permission === "granted") {
      var notification = new Notification("欢迎来到我的网站！", {
        body: "单击此通知以探索网站",
        icon: "images/logo.png"
      });

      // 如果用户单击通知，则激活网站
      notification.onclick = function(event) {
        event.preventDefault();
        window.open("https://www.example.com");
      };
    }
  });
}