什么是 PWA?
PWA 全称是 Progressive Web Apps，中文可以翻译为「渐进式 Web 应用」。它旨在为 web 应用程序提供更贴近原生应用的体验。与普通的 Web 应用不同，PWA 应用具有离线访问、消息推送、全屏应用等特性。
什么是 WebRTC？
WebRTC 全称是 Web Real-Time Communications，即 web 实时通信技术。WebRTC 可实现浏览器之间点对点的音视频通信，使 web 应用免去了依赖第三方媒体服务器的烦恼。
如何将 WebRTC 技术应用到 PWA 中？
WebRTC 技术与 PWA 应用的结合能使 PWA 应用更具实时性和交互性。以下是具体的步骤：
第一步：使用 PWA 技术构建应用
首先，我们需要使用 PWA 技术来构建我们的应用。在这篇文章中，我们将不会讲解具体的 PWA 技术，但以下是构建 PWA 应用的一些基本要求：
- 必须使用 HTTPS。
- 必须具有 manifest.json 文件。
- 必须使用 service worker 技术。
第二步：用 WebRTC 技术实现音视频通信
在 PWA 应用中集成 WebRTC 技术需要使用到一些 WebRTC 的 API，其中较为重要的有以下几个：
- getUserMedia：将媒体从用户摄像头、麦克风或者其他音频/视频源中捕获到 JS 中。
- RTCPeerConnection：一种用来在浏览器之间建立 WebRTC 连接的 API，负责计算网络状况、管理音视频传输、设置连接选项等。
- RTCDataChannel：一种可以通过 WebRTC 链接传输数据的 API。
例如，在启用 WebRTC 技术之后，我们可以使用 getUserMedia API 来实现用户参与音视频通话：
------------------------------------- ------ ----- ------ ---- --
------------ -- -
-- ------
-- -----------------
---------------------- - -------
-------------- -- -
-- --------
----------------------- ------
---接着我们可以使用 RTCPeerConnection API 来建立对等连接并开始音视频通讯：
-- -------- ----- ---- - --- -------------------- -- ----------- ---------------------------- -- --------- ---------------- - ------- -- - ---------------------------- - ------------- -- -- ------------- ----------------------------------- -- - -- ------------------- -------------------------------------- -- ------------- ---------------------------------- -------------- -- - ------------------- ------- ---
这里只是简单的示例，具体实现需要根据自己的业务需求进行进一步的开发。
第三步：持久化媒体数据
在 PWA 应用中，我们可以使用 IndexedDB 或者其他本地存储技术将音视频数据持久化到本地。需要注意的是，存储大量的音视频数据需要消耗大量的存储空间，所以需要进行一些数据清理工作。
第四步：实现离线功能
在 PWA 应用中，我们可以使用 service worker 在离线情况下使应用函数。离线工作需要考虑数据的存储和更新策略。
总结
本文介绍了在 PWA 应用中集成 WebRTC 技术的一系列步骤。通过这些步骤，我们可以让我们的 PWA 应用更具实时性和交互性，在实时音视频通信上做出更多的尝试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653e02487d4982a6eb799b8b