什么是 PWA？
PWA（Progressive Web App）是一种新兴的 Web 应用程序类型，其目标是通过现代 Web 技术与应用程序类似地提供高级用户体验。它结合了 Web 端和移动端的优点，并使得 Web 应用程序需要的多数特性变得可行。一些典型的 PWA 应用程序包括 Twitter, Pinterest 和 Flipkart。
在 PWA 的实现中，浏览器从一个单一的客户端应用程序（SPA）变成了一个全新的应用程序类型，它会向开发者提供更好的性能、离线使用和设备访问等。同时，在 PWA 应用程序中，使用 Service Worker 这样的技术可以轻松地将应用程序转换成可支持离线使用和消息推送等的 PWA 应用程序。
PWA 中的本地推送
PWA 中的本地推送是将应用程序推送通知直接发送到用户的终端（桌面或移动设备）上，提醒用户使用或者通知用户有什么新的信息或者活动。在传统的 Web 应用程序中，这样的推送需要通过服务器端的技术实现；但是，在 PWA 的应用程序当中，这样的推送可以使用客户端的技术实现，即使用 Web Notifications API。
Web Notifications API
Web Notifications API 是 W3C 发布的规范，该规范是通过客户端 Web 应用程序来管理推送通知的 API。该 API 可以用于创建和管理推送通知，同时允许开发人员在推送通知到达终端之前对其进行自定义和处理。
实现本地推送的示例代码
下面是一个示例代码，用于演示如何在 PWA 应用程序中实现本地推送功能：
-- -------------------- ---- -------
-- ------ ------------
-- --------------- -- ------- -
-- ------
--------------------------------------- ------------ -
-- ----------- --- ---------- -
-- --------
--- ------------ - --- -------------------- ---------
-
---
-运行这段代码后，浏览器会弹出一个新的推送通知，用户可以点击该通知以进行交互。
思考与结论
PWA 技术实现的本地推送功能可以大幅提升 Web 应用程序的用户体验。通过使用 Web Notifications API，可以使得开发者能够更好地管理推送通知，同时可以对通知进行自定义和处理。但是，仅在用户授权的前提下进行推送通知，并且注意不要过分频繁地发送推送通知，以避免干扰用户的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6705341ad91dce0dc8525a64