什么是 PWA
PWA（Progressive Web App）是一种新型的 Web 应用程序体验，它具有 Native App 的许多特点，如离线运行、推送通知、添加到主屏幕、启动速度等。PWA 还具有无需安装、无需下载更新等特点，这些特点使得 PWA 成为了用户使用 Web 应用程序的新方式。
Fetch API 简介
Fetch API 是用于获取资源和基于 NetworkResponse 的 Http 请求和响应的接口，它支持 Promise 和 Stream（请求和响应）。
PWA 中 Fetch API 的使用
在 PWA 应用程序中，要使用 Fetch API 获取数据，我们需要注意以下几点：
在请求前，先使用 caches.match() 方法寻找缓存中的数据。如果找到的话，可以直接返回缓存的数据，避免在网络不好的情况下重复请求相同的数据。
如果缓存中的数据已经过期，或者没有缓存数据，那么就使用 Fetch API 获取新数据，并且在获取到数据后，将数据缓存起来，以备下次使用。
在获取数据时，需要对数据进行解析。
下面是一个使用 Fetch API 获取数据的示例：
-- -------------------- ---- -------
----- --------- - ----- -- -- -
----- --------- - ----------
----- ------------ - -----
----- ---------- - ----- ------------------------
-- ------------ -
------ ------------------
-
----- --- - ----- -------------------------------------
----- ------- - ----- -----------
----- ---- - -------------
----- ----- - ----- --------------------------------------------
-------------- --- --------------------------------
------ -----
-在这个示例中，使用了 async/await 的语法，请求数据分为三步。首先，通过 caches.match() 方法来寻找缓存的数据；如果找到，那么直接返回缓存的数据。如果没有找到缓存的数据，那么就使用 Fetch API 进行网络请求，并将数据解析。
最后，将新的数据缓存起来，下次直接使用缓存的数据，避免重复请求。
总结
通过本文的学习，我们可以清楚的了解到 PWA 应用程序中 Fetch API 的使用方法。通过使用 Fetch API 获取数据，并将其缓存起来，可以提高应用程序的性能和用户体验。下一步，我们可以继续探索 PWA 技术，了解更多开发和优化的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664a6199d3423812e49511cd