随着移动设备的振兴,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