什么是 PWA
PWA（progressive web app），中文翻译为渐进式网络应用，是一种提供类似于原生应用体验的 Web 应用程序的技术。PWA 综合了 Web 和原生App 的优点，在可靠，可安装，可发现和可持续使用四个方面实现了类似于原生应用的使用体验。PWA 可以轻松地在用户的设备上工作，具有离线访问功能，首次加载可快速完成等特点。这些特性使得 PWA 成为许多网站开发人员和业务人员的首选解决方案之一。
为什么需要异步通信
在 PWA 开发中，通信是一个极为重要的问题，因为 PWA 需要与远程服务器上的信息进行通信，获取数据和更新页面内容。此外，在 PWA 中，由于需要实现离线和缓存功能，因此请求数据和资源时需要考虑网络的状况，如果网络不佳或者断网，就需要使用离线模式展示缓存的数据和内容，而不是显示一个错误页面。
解决方案
由于 PWA 需要与远程服务器通信，因此要求我们需要在应用中实现异步通信的机制。这里我们探讨一下 PWA 中实现异步通信的方法。主要分为两种方式：使用 Fetch API 和使用 Service Workers。
Fetch API
Fetch API 是一种基于 Promise 的网络请求 API，可以实现与远程服务器的异步通信。Fetch API 的 API 设计简单、易用，并且能够处理复杂的网络请求，支持向服务器发送各种不同类型的数据，并且能够处理服务器响应结果（json, 表单等）。因此，Fetch API 是目前最流行和最被广泛使用的 Web API 之一。
------------------ -------------- -- ---------------- ---------- -- ------------------ ------------ -- ---------------------
Fetch API 的使用也非常方便，只需要在应用中直接使用 fetch 函数向远程服务器发送网络请求，并使用 Promise 来处理服务器响应结果。如上代码段中，我们向服务器请求 /api/data，服务器返回一个 JSON 形式的数据，我们使用 .json() 方法将响应的结果转为 JSON 类型的数据并输出到控制台上。使用 Fetch API，我们可以快速地请求数据并处理服务器的结果。
Service Workers
Service Workers 是 PWA 中的重要组成部分，它是一种运行在后台的 JS 脚本，可以用于拦截和处理网络请求、实现资源缓存以及更新应用等功能。Service Workers 可以在离线状态下优化应用体验，减少服务器请求，提高页面访问速度。
通过 Service Workers，我们可以实现离线模式、缓存资源以及拦截和处理网络请求等功能。
-- -- ------- ------
-------------------------------- --------------- -
----------------
-------------------------------------------- -
------ --------------
--------------
--------------
-------------
---
--
--
---
-- -- ------- ------ --
------------------------------ --------------- -
------------------
--------------------------------------------------- -
------ -------- -- ---------------------
--
--
---上述代码中，我们使用 Service Worker 来缓存应用的资源，当用户请求从服务器获取资源时，Service Worker 会拦截这个请求并与缓存匹配，如果资源已经存在于缓存中，Service Worker 会返回缓存的资源，否则就从服务器中获取这个资源并加入缓存。使用 Service Worker，我们可以优化应用的性能、减少服务器的请求负担和提高用户体验。
结论
在 PWA 开发中，异步通信是一个不可忽视的方面。我们可以使用 Fetch API 和 Service Workers 实现异步通信的功能，使得应用能够在与服务器的交互时更加高效、可靠和快速，提高用户体验和开发效率。同时，我们也需要注意不同的应用场景下不同的实现方法，以便最大程度地满足应用需求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6731e7370bc820c5823b17cf