随着移动端应用的普及，用户对于 PWA（渐进式 WEB 应用）的需求越来越大。作为一种新型的网络应用，PWA 能够提供给用户与原生应用相近的用户体验，且需要的资源更少，安装方式也更加简便。推送通知作为 PWA 应用的基本需求之一，本文将着重讲解如何在 PWA 应用中实现推送通知。
基础准备
要想在 PWA 中实现推送通知，需要基本掌握以下技术：
- Service Worker
- Web Push
- Push API
其中，Service Worker 是 PWA 应用的核心部分，负责在离线条件下拦截网络请求和构建资源缓存，Web Push 则是浏览器与推送服务器通信的标准化框架，而 Push API 则是前端调用推送通知的接口。
步骤
实现推送通知的步骤可以分为以下几个：
- 为应用创建 HTTPS 环境
- 注册 Service Worker
- 获取用户许可
- 获取客户端的订阅
- 向客户端推送消息
接下来，将具体介绍每一步的实现。
1. 为应用创建 HTTPS 环境
由于推送 API 中的许多功能都要用到 HTTPS 环境，因此需要为 PWA 应用配置 HTTPS 环境。如果没有可以自己购买，也可以使用一些免费的 SSL 证书，如 Let's Encrypt。
2. 注册 Service Worker
在实现 Service Worker 之前，可以通过 npm 安装 workbox，这是一种对 Service Worker 的包装，便于快速创建基本的 Service Worker 骨架。
-- -------------------- ---- -------
-- -------
-- ---------------- -- ---------- -
------------------------------- ---------- -
-------------------------------------------------- ------- ------
---------------- -
-------------------- ------ ------------ -------------
--
---------------------- -
-------------------- ------ ------- ------ --------------- -------
---
---
-3. 获取用户许可
在 PWA 应用中，推送消息需要得到用户的许可，因此需要在 clients 中创建询问窗口，提示用户许可信息。
// main.js
Notification.requestPermission(function(status) {
console.log('Notification permission status:', status);
});4. 获取客户端的订阅
在得到用户许可的情况下，需要通过 Web Push 获取浏览器客户端的订阅数据。
// main.js
navigator.serviceWorker.subscribeUser().then(function(subscription) {
// TODO: Send subscription data to server
});5. 向客户端推送消息
客户端订阅数据发送到服务器后，即可向客户端推送消息。
-- -------------------- ---- ------- -- --------- ----- ------- - -------------------- ------------------------ -------------------------- ----------------------------- ----------------------------- -- -------------------------------------- ---------------------------- - ------------------ ------------------------ - --------------------- ---
总结
通过 Service Worker、Web Push 和 Push API，我们可以在 PWA 应用中实现推送通知的功能。总体而言，实现该功能需要调整多个环节的参数，并编写服务器端代码和前端 JS 代码，相对来说比较复杂，但对于具有一定 Web 开发基础的程序员来说并不难以理解和操作。希望本文能对你有所启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486b06448841e98945374f8