随着移动设备的普及，Web 应用也迅速发展。但是，即使是经过优化的 Web 应用，离线使用仍然是一个问题。Progressive Web Apps（PWA）正是解决了这个问题。PWA 利用 Service Worker 实现了离线缓存和推送通知，提供了完全离线的体验。
这里介绍一种 PWA 与后端 API 交互的实践方式，让 Web 应用在离线情况下仍然能够提供体验，同时能够在联网情况下可以与后端 API 交互，实现数据的动态展示。
前端实现
安装 Workbox
Workbox 是 Google 开发的一个 JavaScript 库，提供了一些方便的工具来处理 Service Worker。在终端里输入以下命令安装 Workbox：
npm install workbox-cli --save-dev
编写 Service Worker 脚本
在我们的 Web 应用中，需要注册一个 Service Worker 来拦截网络请求，并对响应进行缓存和处理。以下是一个简单的 Service Worker 脚本：
-- -------------------- ---- -------
-----------------------------------------------------------------------------------------
------------------------------
----
--- -----------------------------------------
---------- ----------
--
--
------------------------------
--- ------------------------------------
--- ---------------------------------
---------- -----------
--
--这个脚本实现了两个路由：
- 对于首页，使用 Stale-While-Revalidate 缓存策略。首先会尝试从缓存中获取响应，如果缓存中没有，会向服务器发送请求，并将响应缓存起来。同时，在后台会发送一个请求尝试刷新缓存。
- 对于以
https://api.example.com/开头的请求，使用 Network-First 缓存策略。优先从网络获取响应，如果请求失败，从缓存中读取响应。同时，在后台会发送一个请求尝试刷新缓存。
在应用中注册 Service Worker
为了让应用使用 Service Worker 脚本，需在代码中注册 Service Worker：
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}在代码中请求数据
在代码中请求数据时，我们需要使用 fetch 函数，并像以下示例一样，捕获异常：
-- -------------------- ---- -------
-------------------------------------
-------------- -- -
------ ----------------
--
---------- -- -
------------------
--
------------ -- -
---------------------
---当请求发送失败时，catch 代码块会被捕获，并执行错误处理逻辑。
后端实现
控制响应头
为了使 Service Worker 能够缓存响应，服务器需要设置正确的响应头。以下是一个示例响应头：
Cache-Control:max-age=3600, public
这个响应头会使响应在客户端缓存 3600 秒，并且可以被其他页面共享。
后台数据更新
为了使后端数据被及时更新，我们可以使用自动化工具，例如自动化测试和持续集成工具。使用这些工具，我们可以有自信的执行后台数据更新操作，而不需要手动测试和推送更新。
结论
以上是一种 PWA 与后端 API 交互的实践方法。通过使用 Service Worker，我们使应用离线可用，并通过网络缓存策略，动态地获取后端数据。我们也介绍了一些后端实现技巧，以及如何更新后端数据。这种方式可以让我们开发出可靠，可扩展和离线可用的 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f120f96fbf96019736ba8f