什么是 PWA 应用？
PWA（Progressive Web Apps）是一种在移动端和桌面端都能提供 app-like （类似于应用程序）用户体验的网页应用。PWA 应用使用 web 技术编写，但一旦用户访问过一次，它就能被添加到用户的主屏幕，就像原生应用一样进行访问。PWA 应用能离线访问、消息推送以及拥有索引能力等特点，也能使用现代的 web 应用程序开发技术来构建来支持高性能、可靠以及安全的应用程序。
fetch API
fetch API 是 js 中用于 HTTP 请求的一个接口，可以向服务器请求数据以及将数据从服务器发送回客户端。fetch API 基于 Promise 设计，提供了一种更简洁、灵活以及强大的方式进行网络请求。
fetch 代码示例：
-- -------------------- ---- -------
---------- --------
-------------- ---------- -
-- ---------------- --- ---- -
------------------ ---- ----- --- - -------- ------ ----- - - -----------------
-------
-
----------------------------- ------ -
------------------
---
--
--------------- ----- -
------------------ ----- ----- -----
---PWA 应用中使用 fetch 时的问题
PWA 应用中使用 fetch API 可能会遇到一些问题，下面是一些常见问题及其解决方式：
1. 首次加载缓慢
PWA 应用是基于 web 技术开发的，因此首次加载可能会较慢。特别是在加载大量数据的应用程序中，网络请求将花费更多的时间，应用程序将需要等待许多组件加载完成才能呈现出来。
解决方式：使用 Service Workers 来缓存静态内容，使其在后续的访问中能够更快地加载。此外，使用 HTTP/2 或 HTTP/3 来加速网络请求的响应速度也是一种解决方式。
2. 兼容性问题
fetch API 不是所有浏览器都支持（例如 IE），这就需要考虑到兼容性问题。
解决方式：使用 polyfill 库来向不支持 fetch 的浏览器提供支持。例如 whatwg-fetch 库。
3. 异步处理
fetch API 是基于 Promise 设计的，因此我们必须以异步方式进行处理。但是，由于 Promise 的特有性质，可能会导致某些情况下 Promise 在调用接口时不会 return 任何值，从而导致应用程序出现问题。
解决方式：将 Promise 转换成 async/await 形式来保证代码的简洁性和可读性，同时避免了 Promise 带来的不稳定性。
总结
PWA 应用是 web 技术和移动应用程序之间的桥梁，它允许在移动设备和桌面设备上提供 app-like （类似于应用程序）用户体验。使用 fetch API 对网络进行请求，是 PWA 应用的重要组成部分。但在使用 fetch API 时，可能会遇到兼容性、异步处理、以及首次加载缓慢等问题。使用 Service Workers、polyfill 库以及 async/await 等技术，可以帮助我们解决这些问题，保证 PWA 应用的性能和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6502f7a195b1f8cacd01f25c