什么是 PWA?
PWA是Progressive Web App的简称，是一种结合了Web App和传统Native App最优的开发方式。它的优点在于灵活性、速度和Native App的交互体验。PWA应用不需要用户进行安装，只需要通过浏览器访问，即可享受本地应用的所有优势。
PWA中的服务器端推送
在现代Web应用程序中，即时推送是非常重要和有用的功能，PWA应用程序中使用服务器推送可以让你即使更新用户设备的内容、更新应用的状态和订阅事件等等。
如何实现服务器端推送？
PWA 应用中可以使用WebSockets或者 Web Push 推送通知的方式进行实现。一种是双工通讯需要维护 socket 链接，一种是单向通讯可以使用 service-worker 持久化链接通讯。其中，Web Push 是一种新的技术，它是支持一种浏览器能够请求向用户推送消息的机制， Web Push API可以将已经订阅成功的用户推送信息发送到对应的移动设备以便于及时更新信息。
Web Push 推送通知实现类库
推荐使用 Web Push 类库 web-push 实现服务端的Web push方案。 web-push实现了web push时的加密、压缩和编码等相关操作，并提供了创建、发送和订阅 VAPID（voluntary application server identification，自愿应用服务器标识）认证的简单 API 接口
示例代码
订阅推送
-- -------------------- ---- -------
-- -----
---------------------- ----- ----- ---- -- -
----- ------------ - --------
------------------------
----- ------- - ---------------- ------ ------ ------ --
--- -
----- ------ - ----- -------------------------------------- ---------
--------------------
- ----- ------- -
---------------------------
-
---
发送推送
-- -------------------- ---- -------
----- ------- - ----------------
------ ------ -------
----- ------ ----- ----- --- -------
--
----- ------- - -
---- ---
-
-- ----
-------------------------------------- -------- --------
---------- -- -
-----------------
--总结
以上便是我们一个简单的Web push实现。在本文中，我们了解了什么是PWA，以及如何在PWA中使用Web push 发送推送通知。Web push功能可以让 PWA 应用程序更加灵活，快速，以及增强了Native App的体验。希望能对您有所启发以及有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6451bde3675af4061b583832