随着移动设备的振兴，Web 应用程序也变得更加流行。作为一名前端开发，你可能会经常听到 “PWA” 这个词汇，即渐进式 Web 应用程序。PWA 应用程序能够在离线时提供优良的体验，让用户的使用体验更佳顺畅。
Notification API 是 PWA 中实现推送通知的重要组成部分。本文将教您如何在 PWA 应用程序中使用 Notification API，为您的普通 Web 应用程序打造更佳的用户体验。
Notification API 是什么？
Notification API 是浏览器提供的一种功能，它可以在 Web 应用程序中显示系统通知。这样，您就可以在用户不访问应用程序的情况下向他们送达消息。您可以通过 Notification API 来推送即时消息、浏览应用程序最新的通知消息，以及您保持连接的客户端的反馈。
如何使用 Notification API ?
下面是一个使用 Notification API 的基本示例。以下代码将设置一个按钮，用于启动 Chrome 浏览器的通知API。在此过程中，我们使用的是浏览器基本支持的这个 API。
-- -------------------- ---- -------
-- --------------- -- ------- -
----- ----------------- - -- -- -
----- ----- - ---- -------
----- ------- - -
----- ------ ------ -- --- --- -- --- ----- --- ---- ------- --- ----- ---- ----- -----
----- ---------------------------
------ ---------------------------
--
--- ------------------- ---------
--
----- ----------------- - ------- -- -
----- ---------- - ----- ----------------------------------------
------------- --- ---------- -
--------------------
-
--
----------------------------------------------------------------- -- -- -
-- ------------------------------- --- ---------- -
--------------------
- ---- -
--------------------
-
---
-这将创建一个通知对象（一个标题和一个通知），然后将其提供给 Notification 构造函数。要实现通知，在用户允许通知之前，需要请求通知权限。因此，此代码检查权限，如果未被授予权限，则会尝试请求。
详细的实现
使用 Notification API 来实现推送通知，需要完成以下两个重要的任务：
- 请求通知授权。
- 在获得授权后，显示通知。
现在，我们将跟进上面的两个步骤进行更加详细的描述。
监控通知支持
首先，我们应该检查浏览器是否支持 Notification API。如果不支持，我们将获取一个 undefined 。
if (!("Notification" in window)) {
console.warn("This browser does not support notifications.");
}请求通知授权
在允许用户显示通知之前，我们需要询问他们是否允许我们显示通知。我们使用 Notification.requestPermission() 方法来请求权限，该方法返回一个 Promise。用户会弹出一个提示，询问他们是否允许我们显示通知消息。
如果用户允许通知，则 Promise 的解析结果为 'granted'。此后，我们可以立即显示一条通知。如果用户禁止通知，则 Promise 的解析结果为 'denied'。如果用户忽略或无法授权， Promise 的解析结果为 'default'。
const requestPermission = async () => {
const permission = await window.Notification.requestPermission();
if (permission !== "granted") {
throw new Error("Permission not granted for Notification");
}
};显示通知
当获得通知授权时，我们可以创建和显示通知。通知包括标题、选项和图标。我们使用以下代码构造通知对象。如果用户已经禁用了通知，则不会显示通知。
-- -------------------- ---- -------
----- ----------------- - -- -- -
----- ----- - ---- -------
----- ------- - -
----- ------ ------ -- --- --- -- --- ----- --- ---- ------- --- ----- ---- ----- -----
----- ---------------------------
------ ---------------------------
--
--- ------------------- ---------
--这将显示一个带有标题、正文、图标和数据的通知。您还可以添加声音、震动等效果，使通知更加美观。
绑定事件触发通知
最后，您需要将所有内容绑定到一个事件中，以便在单击某个元素时触发通知。在这里，我们将按钮与通知绑定。单击按钮会触发发送通知。
document.querySelector("#notification").addEventListener("click", () => {
if (window.Notification.permission !== "granted") {
requestPermission();
} else {
spawnNotification();
}
});指导意义
通过使用 Notification API，您可以在离线时向您的客户发送通知消息，这对于 PWA 应用程序来说是至关重要的。这也增加了用户与您的应用程序的互动方式，可以让您保持连接，并在下次用户访问您的应用程序时提供更好的响应。
结论
在 PWA 应用程序开发过程中，实现通知功能是一项非常重要的任务。通过使用 Notification API，您可以轻松地处理通知功能。在这篇文章中，我们介绍了如何请求通知授权、构建和显示通知对象。希望您可以通过此文挖掘更多的知识点，并在未来的应用程序开发中使用好它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6700d795c842884a45a8c4c9