PWA（Progressive Web Apps）是一个新兴的 Web 应用开发方式，它可以带来类似于原生应用的体验和性能。和传统的 Web 应用不同，PWA 应用可以在离线环境下使用，这意味着应用需要能够处理离线状态下的网络请求。在 PWA 中使用 Fetch API 处理网络请求可以让开发者轻松地处理这种情况。
Fetch API 简介
Fetch API 是一个用于处理网络请求的新的 Web API，它通过 Promise 对象的方式实现异步请求。Fetch API 是基于 XMLHttpRequests 的更好的替代方案。相比于传统的 XMLHttpRequests，Fetch API 更加简单易用、支持跨域请求、支持流式请求等。
Fetch API 的基本使用方法如下所示：
fetch(url, options).then(response => {
// 处理响应结果
}).catch(error => {
// 处理请求过程中出现的错误
});其中 url 是请求的地址，options 是可选的配置对象。fetch 方法返回一个 Promise 对象，可以通过 then 或 catch 方法处理响应结果或异常。
下面我们来看一下如何在 PWA 应用中使用 Fetch API 处理离线状态下的网络请求。
PWA 应用中的缓存策略
在 PWA 应用中，我们需要通过缓存策略来实现离线状态下的网络请求。缓存策略有两种类型：基于缓存优先和基于网络优先。
基于缓存优先的缓存策略会首先从缓存中获取数据，如果缓存中存在数据，则直接返回数据，否则才会发送网络请求。这种缓存策略可以提高应用速度，但是如果服务器返回的数据发生了变化，应用可能无法获取到最新数据。
基于网络优先的缓存策略会首先发送网络请求，如果网络请求失败，则从缓存中获取数据。这种缓存策略可以确保应用能够获取到最新数据，但是如果网络环境较差，则可能会降低应用的速度。
下面我们来看一下如何在 PWA 应用中实现这两种缓存策略。
基于缓存优先的缓存策略
基于缓存优先的缓存策略可以通过以下步骤实现：
- 在
fetch方法中添加cache选项，指定缓存策略为force-cache以及缓存过期时间为 24 小时：
-- -------------------- ---- -------
---------- -
------ --------------
-------- -
---------------- ---------------
-
---------------- -- -
-- ------
-------------- -- -
-- ------------
---- 在
fetch方法的catch中添加缓存读取逻辑，如果缓存中有数据，则直接返回缓存结果：
-- -------------------- ---- -------
---------- -
------ --------------
-------- -
---------------- ---------------
-
---------------- -- -
-- ------
-------------- -- -
-- ------------
------------------------------------- -- -
-- ---------------- -
-- ------------------
------ ---------------
-
---
---基于网络优先的缓存策略
基于网络优先的缓存策略可以通过以下步骤实现：
- 在
fetch方法中添加cache选项，指定缓存策略为default：
fetch(url, {
cache: 'default'
}).then(response => {
// 处理响应结果
}).catch(error => {
// 处理请求过程中出现的错误
});- 在
fetch方法的then中添加缓存写入逻辑，将获取到的数据缓存下来：
-- -------------------- ---- -------
---------- -
------ ---------
---------------- -- -
-- ------
---------------------------------- -- -
-------------- ------------------
---
-------------- -- -
-- ------------
------------------------------------- -- -
-- ---------------- -
-- ------------------
------ ---------------
-
---
---示例代码
下面是一个基于网络优先的缓存策略的示例代码：
-- -------------------- ---- -------
-- ----
----- ---------- - -----------
-- ---------
----- -------------- - -
----
--------------
--------------
------------
--
-- -- ------- ------
-------------------------------- ----- -- -
----------------
---------------------------------- -- -
------ -----------------------------
--
--
---
-- ------
------------------------------ ----- -- -
------------------
---------------------------------- -- -
-- ---------------- --- ---- -
------ --------------------------
- ---- -
---------------------------------- -- -
------------------------ ------------------
---
------ ---------
-
----------- -- -
------ ----------------------------
--
--
---
-- ------
--------------------------------- ----- -- -
----------------
----------------------------- -- -
------ ------------
--------------------------- -- -
------ --------- --- -----------
---------------- -- -
------ -------------------------
--
--
--
--
---该代码会先将指定的文件列表缓存下来，然后每次发送网络请求时，优先从网络获取数据。如果网络请求失败，则从缓存中获取数据，并将响应结果缓存下来。同时，该代码还会定期清理过期缓存。
总结
在 PWA 应用中使用 Fetch API 处理离线状态下的网络请求可以让应用具有更好的性能和稳定性。不同的缓存策略可以根据应用的实际情况来选用。从本文中我们可以学习到 Fetch API 的基本使用方法以及如何在 PWA 应用中实现不同的缓存策略。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7adac48841e989442b36f