在 PWA（Progressive Web App）开发中，浏览器缓存是一个重要的优化手段。通过合理地配置缓存策略，可以大幅减少数据传输的网络流量，加快页面加载速度，改善用户体验。然而，随着浏览器的不断升级，缓存策略的运作方式也在改变。本文将分析 PWA 开发中常见的浏览器缓存问题，并给出相应的解决方案。
1. 浏览器缓存的种类
在 Web 开发中，浏览器缓存主要分为两种：强缓存和协商缓存。强缓存是指浏览器直接从本地缓存中读取数据，而不需要发起 HTTP 请求。协商缓存则是指在强缓存失效的情况下，浏览器向服务器发起请求，通过协商机制（例如 If-Modified-Since 和 ETag）确认是否需要重新获取数据。下面是两种缓存的具体实现方式：
1.1 强缓存
强缓存可以通过设置 HTTP 响应头实现，常见的响应头字段有：
- Cache-Control：设置缓存的有效期，常见取值有 max-age 和 no-cache；
- Expires：设置缓存过期的时间点，通常不再使用。
例如，下面的代码将 index.html 文件的缓存有效期设为 12 小时：
-- -------------------- ---- ------- -------- --- -- -------------- ------------- ------------- ---------- ------------- --------- ----- ------ ------ --------- ----------- ------- ------ --------- ---------- ------- -------
1.2 协商缓存
协商缓存需要服务器返回相应的响应头才能起作用，常见的响应头字段有：
- Last-Modified 和 If-Modified-Since：用于判断数据是否被修改过；
- ETag 和 If-None-Match：用于判断数据的内容是否有变化。
如果浏览器发现强缓存无效，就会发起协商缓存请求。服务器通过比对相应的头信息，如果数据没有改变，就返回 304 状态码和空响应体，告诉浏览器可以使用本地缓存。例如，下面的代码将静态资源的协商缓存实现为 ETag：
HTTP/1.1 200 OK
Content-Type: text/css
ETag: "12345"
body {
background-color: #f0f0f0;
font-size: 16px;
}2. 浏览器缓存的问题
然而，随着浏览器的不断升级，缓存策略的运作方式也在不断改变。以下是 PWA 开发中常见的浏览器缓存问题：
2.1 浏览器的缓存策略不一致
不同浏览器对缓存策略的实现可能有所不同，例如 Safari 浏览器对 HSTS（HTTP Strict Transport Security）的实现就和 Chrome 不一样。这就使得开发者难以掌握浏览器的缓存逻辑，从而可能产生奇怪的问题。解决办法是，尽可能使用标准的缓存头字段，避免使用浏览器特有的缓存机制。
2.2 缓存策略的兼容性问题
不同版本的浏览器对缓存头字段的解析方式也可能不一样。例如，某些浏览器可能会将 Content-Length 和 Last-Modified 字段忽略，从而导致协商缓存失效。这就需要开发者花费大量的时间来测试不同浏览器的表现，并可能需要针对不同浏览器采用不同的缓存策略。解决办法是，尽可能使用简单、通用的缓存头字段。
2.3 静态资源的版本管理
对于静态资源而言，版本管理是十分重要的。如果没有良好的版本管理机制，就可能导致缓存不更新，从而无法正确显示最新的页面。通常，可以在 URL 中嵌入版本号或者哈希值，或者使用构建工具对文件名进行哈希化处理，从而保证每个静态资源都有唯一的名称。例如，下面的代码使用文件的哈希值作为版本号：
HTTP/1.1 200 OK Cache-Control: max-age=31536000 Content-Type: text/css ETag: "12345" Last-Modified: Mon, 1 Jan 2018 00:00:00 GMT Expires: Sun, 31 Dec 2018 23:59:59 GMT <link rel="stylesheet" href="/static/main.css?v=2f24b3c3">
3. 应对浏览器缓存策略的变化
面对不同的浏览器缓存策略，我们需要相应地采取不同的优化策略。以下是一些常见的应对措施：
3.1 推荐使用 Cache-Control
Cache-Control 是 HTML5 推荐的缓存头字段，它可以统一控制缓存的行为。例如，可以设置：
- max-age：指定缓存的有效时间，单位为秒；
- no-cache：指示浏览器不要对该资源进行强缓存，需要利用协商缓存向服务器验证；
- no-store：指示浏览器不要对该资源进行任何缓存操作，每次都要重新从服务器获取。
例如，下面的代码将静态资源设为永久缓存，并启用 ETag 协商缓存：
HTTP/1.1 200 OK Cache-Control: max-age=31536000, must-revalidate Content-Type: image/jpeg ETag: "12345" Last-Modified: Mon, 1 Jan 2018 00:00:00 GMT Expires: Sun, 31 Dec 2118 23:59:59 GMT <img src="/static/logo.jpg">
3.2 配合使用 ETag 和 Last-Modified
ETag 和 Last-Modified 可以一起使用，让浏览器更加准确地判断数据是否有变化。例如，下面的代码将静态资源的协商缓存实现为 ETag 和 Last-Modified：
-- -------------------- ---- ------- -------- --- -- ------------- -------- ----- ------- -------------- ---- - --- ---- -------- --- ---- - ----------------- -------- ---------- ----- -
3.3 版本管理
为了避免静态资源缓存失效，我们需要对每个版本的静态资源进行版本管理。可以使用构建工具对文件名进行哈希化处理，或者在 URL 中嵌入版本号或者哈希值。例如，下面的代码使用文件的哈希值作为版本号：
HTTP/1.1 200 OK Cache-Control: max-age=31536000 Content-Type: text/css ETag: "12345" Last-Modified: Mon, 1 Jan 2018 00:00:00 GMT Expires: Sun, 31 Dec 2018 23:59:59 GMT <link rel="stylesheet" href="/static/main.css?v=2f24b3c3">
4. 总结
在 PWA 开发中，浏览器缓存是一个重要的优化手段。不同的浏览器缓存策略可能不一致，因此我们需要相应地采取不同的优化策略，购合理地利用缓存头字段，进行版本管理，以提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ff7dd48841e9894f7aeef