Progressive Web App (PWA) 是一种新兴的 Web 应用开发方式，它利用了现代浏览器提供的新功能和技术，使得 Web 应用具备了与原生应用类似的使用体验和功能。其中，实时数据更新是 PWA 应用中常见的需求，例如聊天应用、股票行情等场景。本文将介绍 PWA 应用如何实现实时数据更新的技术方案。
方案一：WebSocket
实时数据更新最常用的技术方案是 WebSocket。WebSocket 是一种基于 TCP 协议的全双工通信协议，它可以在客户端和服务器之间建立一个持久性的连接，从而实现双方之间的实时通信。在 PWA 应用中，我们可以使用 WebSocket 协议实现实时数据更新。
以下是一个简单的 WebSocket 实现实时数据更新的示例代码：
-- -------------------- ---- ------- ----- -- - --- ----------------------------------- --------------------------- -- -- - ---------------------- ---------- -- ------ -- ------------------------------ ----- -- - ----- ---- - ---------------------- -- ------ --------- ---- ---- -- ---------------------------- ----- -- - ---------------------- ---------- -- -------- ------ --
上述代码中，我们首先创建了一个 WebSocket 对象（注意，使用 wss:// 协议表示使用了 SSL/TLS 加密），并监听了三个事件：open、message 和 close。当 WebSocket 连接成功建立后，我们输出一条日志；当接收到服务端推送的实时数据时，我们解析 JSON 格式的数据，然后在回调函数中处理实时数据；当 WebSocket 连接关闭时，也输出一条日志。
需要注意的是，WebSocket 协议的实现需要服务端的支持。在服务端实现 WebSocket 协议需要使用类似 Socket.IO、ws、SockJS 等库，这里不再详细介绍。
方案二：Push API
Push API 是 HTML5 引入的一个新 API，它使得浏览器可以从服务器端主动推送消息到客户端。在 PWA 应用中，我们可以使用 Push API 实现实时数据更新。
以下是一个简单的 Push API 示例代码：
-- -------------------- ---- -------
----- ---------------- - ------ ------ ----- -----
----- ------------ - ----- -----------------------------------------------------
---------------- -----
--------------------- -------------------------------------
--
----- -------- - ----- -------------------------------------- -
------- -------
-------- -
--------------- -------------------
--
----- ----------------
-------------
---
--
-- ------ -------- ----
----------------------------- ----- -- -
------------------------------------------------------- --------- -
----- ------------------
---
--上述代码中，我们首先获取了 pushManager 对象，然后使用 subscribe() 方法订阅了推送通知。订阅完成后，我们将订阅信息发送给服务端，服务端在有新的实时数据时，可以向客户端推送消息。在客户端收到推送消息后，我们可以使用 showNotification() 方法在系统通知区域显示通知。
需要注意的是，Push API 需要浏览器和服务器端都支持，并且需要使用 HTTPS 协议。在服务端实现 Push API 需要使用类似 web-push、Pusher、OneSignal 等库，这里不再详细介绍。
方案三：轮询
在 WebSocket 和 Push API 不可用时，还可以使用轮询技术实现实时数据更新。轮询是指客户端定时向服务器端发起请求，从而实现实时数据更新。
以下是一个简单的轮询实现实时数据更新的示例代码：
-- -------------------- ---- -------
-------- ------------ -
---------------------------------
-------------- -- ----------------
---------- -- -
-- ------ --------- ---- ----
--
-
----------------------- -----上述代码中，我们使用 setInterval() 定时向服务端发起请求，获取实时数据。获取到实时数据后，我们在回调函数中处理数据。
需要注意的是，轮询会增加服务器的负担，并且不能实现真正的实时数据更新。在数据量较小的场景下，轮询可以是一种简单有效的技术方案。
总结
本文介绍了 PWA 应用如何实现实时数据更新的三种技术方案：WebSocket、Push API 和轮询。不同的场景和需求可以选择不同的技术方案，从而实现实时数据更新。在具体实现时，需要注意安全性、稳定性和性能等方面的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648988df48841e98947d1bbe