使用网络通知API显示动态消息

Web Notifications API：让网站通知跳出浏览器限制

我们已经习惯了来自喜爱的网站或应用程序的手机通知，但现在浏览器直接推送通知也变得越来越普遍。例如，Facebook会在你有新的好友请求或有人评论你参与的帖子时发送通知；Slack会在你被提及的对话中发送通知。

作为前端开发者，我很好奇如何利用浏览器通知来为那些不处理大量信息流的网站提供服务。如何根据访客对网站的兴趣添加相关的浏览器通知？

本文将演示如何在Concise CSS网站上实现一个通知系统，以便在每次发布框架新版本时提醒访客。我将展示如何结合使用localStorage和浏览器Notification API来实现这一目标。

Notification API基础

首先，我们需要确定访客的浏览器是否支持通知。本教程的大部分工作将由Notification对象完成。

(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();

目前我们只确定了浏览器是否支持通知。确定之后，我们需要知道是否可以向访客显示权限请求。

我们将permission属性的输出存储在一个变量中。如果权限已授予或拒绝，则不返回任何内容。如果我们之前没有请求过权限，则使用requestPermission方法请求权限。

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();

您应该会在浏览器中看到类似上图的提示。

现在我们已经请求了权限，让我们修改代码，以便在允许权限的情况下显示通知：

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification
      .requestPermission()
      .then(function() {
        var notification = new Notification("Hello, world!");
      });
  }
})();

虽然简单，但功能有效。

我们在这里使用requestPermission()方法的基于Promise的语法，在权限授予后显示通知。我们使用Notification构造函数显示通知。此构造函数接受两个参数，一个用于通知标题，另一个用于选项。请参阅文档链接以查找可以传递的完整选项列表。

存储框架版本

前面提到，我们将使用localStorage来帮助显示通知。使用localStorage是存储JavaScript中持久客户端信息的推荐方法。我们将创建一个名为conciseVersion的localStorage键，其中包含框架的当前版本（例如1.0.0）。然后，我们可以使用此键来检查框架的新版本。

如何使用最新版本的框架更新conciseVersion键的值？我们需要一种方法在有人访问网站时设置当前版本。我们还需要在发布新版本时更新该值。每次conciseVersion值更改时，都需要向访客显示通知，以宣布框架的新版本。

我们将通过向页面添加一个隐藏元素来解决此问题。此元素将具有名为js-currentVersion的类，并且只包含框架的当前版本。由于此元素存在于DOM中，因此我们可以使用JavaScript轻松地与之交互。

此隐藏元素将用于在我们的conciseVersion键中存储框架版本。我们还将使用此元素在发布框架的新版本时更新该键。

(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();

我们可以使用少量CSS来隐藏此元素：

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();

注意：由于此元素不包含任何有意义的内容，因此屏幕阅读器无需访问此元素。这就是为什么我将aria-hidden属性设置为true，并使用display: none作为隐藏元素的方法。有关隐藏内容的更多信息，请参阅此WebAIM文章。

现在我们可以获取此元素并在JavaScript中与之交互。我们需要编写一个函数来返回我们刚刚创建的隐藏元素内的文本。

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification
      .requestPermission()
      .then(function() {
        var notification = new Notification("Hello, world!");
      });
  }
})();

此函数使用textContent属性存储.js-currentVersion元素的内容。让我们再添加一个变量来存储conciseVersion localStorage键的内容。

<span class="js-currentVersion" aria-hidden="true">3.4.0</span>

现在，我们在一个变量中拥有框架的最新版本，并且我们将localStorage键存储到一个变量中。是时候添加确定是否有新版本的框架可用的逻辑了。

我们首先检查conciseVersion键是否存在。如果不存在，我们将向用户显示通知，因为这可能是他们第一次访问。如果键存在，我们检查其值（存储在currentVersion变量中）是否大于当前版本的值（存储在latestVersion变量中）。如果框架的最新版本大于访客上次看到的版本，我们就知道已发布新版本。

注意：我们使用semver-compare库来处理比较两个版本字符串。

知道了这一点，我们将向访客显示通知并适当地更新我们的conciseVersion键。

[aria-hidden="true"] {
  display: none;
  visibility: hidden;
}

要使用此函数，我们需要修改下面的权限代码。

function checkVersion() {
  var latestVersion = document.querySelector(".js-currentVersion").textContent;
}

这允许我们在用户之前已授予权限或刚刚授予权限时显示通知。

显示通知

到目前为止，我们只向用户显示了不包含太多信息的简单通知。让我们编写一个函数，允许我们动态创建浏览器通知，并控制通知的许多不同方面。

此函数具有正文文本、图标、标题以及可选链接和通知持续时间的参数。在内部，我们创建一个选项对象来存储我们的通知正文文本和图标。我们还创建Notification对象的新的实例，传入我们的通知标题以及选项对象。

接下来，如果我们想链接到我们的通知，我们将添加一个onclick处理程序。我们使用setTimeout()在指定的时间后关闭通知。如果调用此函数时未指定时间，则使用默认的五秒钟。

(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();

现在，让我们修改checkVersion()以向用户显示更多信息的通知。

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();

我们使用displayNotification函数为我们的通知提供描述、图像、标题和链接。

注意：我们使用ES6模板字面量将表达式嵌入到我们的文本中。

完整代码和测试

以下是本教程中编写的完整代码。

（此处应插入CodePen链接或完整代码块）

运行此代码应该会在您的浏览器中生成以下通知。

为了进行测试，您需要熟悉浏览器的通知权限。以下是管理Google Chrome、Safari、FireFox和Microsoft Edge中通知的一些快速参考。此外，您应该熟悉使用开发者控制台来删除和修改localStorage值以方便测试。

您可以通过运行脚本一次并将js-currentVersion HTML元素的值更改为脚本可以看到差异来测试示例。您还可以使用相同的版本重新运行，以确认您不会收到不必要的通知。

更进一步

这就是我们拥有动态浏览器通知所需的一切！如果您正在寻找更灵活的浏览器通知，建议您了解Service Worker API。Service Worker可用于响应推送通知，允许用户收到通知，无论他们当前是否正在访问您的网站，从而实现更及时的更新。

浏览器通知API常见问题解答

什么是浏览器通知API以及它是如何工作的？

浏览器通知API允许Web应用程序向用户显示系统通知。这些通知类似于移动设备上的推送通知，即使网页未处于焦点状态也可以显示。API的工作原理是请求用户的权限以显示通知。一旦获得权限，Web应用程序就可以使用Notification对象创建和显示通知。

如何请求显示通知的权限？

要请求权限，可以使用Notification.requestPermission()方法。此方法将向用户显示一个对话框，询问他们是否允许显示通知。该方法返回一个Promise，该Promise解析为权限状态，可以是“granted”、“denied”或“default”。

如何创建和显示通知？

一旦获得权限，就可以使用Notification构造函数创建和显示通知。此构造函数接受两个参数：通知的标题和一个选项对象。选项对象可以包含body（通知的文本）、icon（要显示的图标）和tag（通知的标识符）等属性。

即使网页未处于焦点状态，我也可以显示通知吗？

是的，浏览器通知API允许您即使网页未处于焦点状态也可以显示通知。这对于需要通知用户重要事件的Web应用程序非常有用，即使他们没有积极使用该应用程序也是如此。

如何处理通知上的点击事件？

您可以通过向通知对象添加事件侦听器来处理通知上的点击事件。当用户点击通知时，将调用事件侦听器函数。

我可以以编程方式关闭通知吗？

是的，您可以通过调用通知对象上的close()方法以编程方式关闭通知。如果您想在一段时间后自动关闭通知，这将非常有用。

所有浏览器都支持浏览器通知吗？

大多数现代浏览器都支持浏览器通知，包括Chrome、Firefox、Safari和Edge。但是，这些浏览器的不同版本之间的支持可能会有所不同，一些较旧的浏览器可能根本不支持通知。

我可以自定义通知的外观吗？

通知的外观很大程度上取决于操作系统和浏览器。但是，您可以使用传递给Notification构造函数的选项对象来自定义通知的某些方面，例如标题、正文文本和图标。

如何检查用户是否已授予显示通知的权限？

您可以通过访问Notification.permission属性来检查当前的权限状态。如果用户已授予权限，此属性将为“granted”；如果他们已拒绝权限，则为“denied”；如果他们尚未响应权限请求，则为“default”。

我可以在工作程序脚本中使用浏览器通知API吗？

是的，可以在工作程序脚本中使用浏览器通知API。这允许您从后台任务显示通知，即使主网页未处于焦点状态也是如此。

以上是使用网络通知API显示动态消息的详细内容。更多信息请关注PHP中文网其他相关文章！