什么是 PWA
PWA（Progressive Web App）是一种可以提供类似于原生应用的用户体验的 web 应用程序。PWA 具有如下特点：
- 可以像原生应用一样在手机桌面上安装；
- 支持离线使用；
- 可以推送通知等。
PWA 中的推送通知
PWA 的推送通知可以让用户在离线状态下也能够接收到推送消息。但是，PWA 中的推送通知也有一些问题需要注意：
推送需要许可：PWA 中的推送通知不是随便能够发送的，需要先得到用户的许可。一般情况下，许可是在用户打开 PWA 页面时询问用户的。
推送消息的显示：推送消息需要在系统通知栏中显示，这需要使用
Service Worker。设备适配性：不同的设备系统对
Service Worker的支持程度不同，需要注意设备适配性问题。
解决方案
得到推送许可
得到推送许可的方式有两种：
打开 PWA 时询问：在 PWA 打开时，通过
Notification.requestPermission()方法询问用户是否允许进行推送。-- ------------------------ --- -------- -- ----------------------- --- ---------- - ---------------------------------------------- ------------ - -- ------------ -- ----------- --- ---------- - -- ------ - ---- - -- ------ - --- -使用
web-push库：web-push库能够用于向浏览器申请推送许可，并且该库可以跨足多个浏览器，帮助我们实现设备适配。
显示推送消息
如果推送消息接收到了，需要在系统通知栏上显示推送消息。为了能够显示推送消息，我们需要使用 Service Worker。
----------------------------- -------- ------- -
-- ------------ -
------------------------------------
- ---- -
----------------- ----- --- -- -------
-
---
-------- ------------------------- -
--------------------------------------- ---- -------------- -
------- --------
------- -------------------
---
-设备适配性
不同的设备系统对 Service Worker 的支持程度不同，需要我们在 PWA 开发中注意这个问题。
可以借助 sw-precache 库来完成这个问题。该库可以帮助我们生成适配不同浏览器的 Service Worker，从而满足设备适配性的需求。
结论
PWA 中的推送通知功能能够让我们的应用程序一般来说更加的完整，同时也可以提高用户体验。但是，在 PWA 开发的过程中，我们需要注意一些推送许可、推送消息显示和设备适配性的问题。
对于 PWA 的开发者来说，他们应该具备深入了解 PWA 的能力，并且能够根据具体的情况来解决问题。通过上述解决方案，我们可以帮助 PWA 开发者得到更多的成就。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67304b3eeedcc8a97c918ba1