在现代化的 web 应用中，PWA（Progressive Web App）已经成为了越来越常见的一种架构方式。与原生应用相似，PWA 也是一种渐进式的网页应用，可以提供离线访问以及更接近原生的用户体验。然而，在提供更好的体验的同时，PWA 应用的性能却一直是人们关注的焦点之一。本文将介绍如何使用 HTTP 缓存响应头来优化 PWA 应用的性能表现。
什么是 HTTP 缓存响应头？
HTTP 缓存响应头是一种通过设置响应头中的字段，来指定客户端和代理服务器在后续请求中缓存响应的机制。通过使用该机制，可以将之前已经请求过的资源存储在客户端或者代理服务器的本地缓存中，以减少后续请求的网络带宽和延迟。
常见的缓存响应头字段有：
Cache-Control: 指定缓存机制的行为，例如public使得响应可以被任何中间人缓存，也可以在缓存在浏览器中；private只能在客户端本地缓存中存储；no-cache表示客户端必须与服务器再次交互以验证缓存才有效。更多参数可查看 MDN。Expires: 响应过期时间，即此响应头指定的响应到期的日期/时间。在没有其它缓存相关字段的情况下，这通常是使用的一种方法。例如：Expires: Wed, 21 Oct 2015 07:28:00 GMT。ETag: 用于实体标记，主要用作web缓存解决方案的一种机制，以帮助客户端和代理服务器在未请求修改的情况下验证缓存的正确性。例如：ETag: "686897696a7c876b7e"
如何使用 HTTP 缓存响应头来优化 PWA 应用的性能表现？
1. 使用 Cache-Control 字段来控制缓存策略
在 PWA 应用中，我们经常需要加载一些静态资源，如图片资源、JS 或 CSS 资源。我们可以通过设置 Cache-Control 字段，来指定客户端和代理服务器在后续请求中如何缓存这些资源。
例如，我们可以在返回的 HTTP 响应头中添加以下内容：
-------------- ------------- ------
其中，max-age 参数指定该资源可以在客户端本地缓存中存储的最大时间（以秒为单位）。这意味着客户端将在接下来的 max-age 秒内重复使用相同的资源，而不会重新请求新的资源。public 使得响应可以被任何中间人缓存，也可以在缓存在浏览器中。
2. 使用 SW 来缓存应用内容
在 PWA 应用中，我们也可以使用 Service Worker（SW）来缓存应用内容。通过使用 SW，我们可以轻松地实现离线访问，并通过缓存应用所需的内容来加速应用程序的加载。
例如，在 sw.js 文件中，添加以下内容即可缓存 index.html 和所有所需的 JavaScript 和 CSS 文件：
----- ---------- - ---------------
-------------------------------- ------- -- -
----------------
------------------------------------ -- -
------ --------------
----
--------------
--------------
-------------
------------------
---
--
--
---
------------------------------ ------- -- -
------------------
------------------------------------------- -- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---在上面的代码中，我们在 SW 的 install 事件中，打开一个特定的缓存，然后添加所需的资源。在 fetch 事件中，我们试图从缓存中查找请求的内容，如果未找到，则重新发出请求。如此一来，我们可以始终从客户端本地缓存中获取资源，以及缩短等待时间和带宽使用。
3. ETag 可以用来验证缓存的正确性
除了上述方法外，我们还可以使用 ETag 响应头来验证缓存的正确性。例如，在服务器端，我们可以添加以下内容：
----- --------------------
此处的 ETag 值实际上是从响应的内容中生成的哈希值，可以帮助客户端验证是否需要重新获取缓存的内容。在后续的请求中，客户端会将上一次请求中返回的 ETag 值作为 If-None-Match 请求头发送给服务器。如果 ETag 值匹配，则服务器会返回 304 Not Modified 响应码，并且客户端从本地缓存中获取响应。
结论
通过使用 HTTP 缓存响应头，我们可以优化 PWA 应用的性能表现。我们可以控制缓存策略、使用 SW 缓存应用程序的内容以及使用 ETag 来验证缓存的正确性。这些方法可以帮助我们减少网络带宽和延迟，以及提高应用的加载速度和性能表现。
示例代码
以下是使用 SW 来缓存应用内容的示例代码：
----- ---------- - ---------------
-------------------------------- ------- -- -
----------------
------------------------------------ -- -
------ --------------
----
--------------
--------------
-------------
------------------
---
--
--
---
------------------------------ ------- -- -
------------------
------------------------------------------- -- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---在上面的代码中，我们在 SW 的 install 事件中，打开一个特定的缓存，然后添加所需的资源。在 fetch 事件中，我们试图从缓存中查找请求的内容，如果未找到，则重新发出请求，并向客户端返回响应。这样一来，应用程序将使用客户端本地缓存中的资源，以及缩短等待时间和带宽使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6708f773d91dce0dc8758ad7