使用 Service Worker 时如何处理 .htaccess 文件中的缓存
How to handle Cache in .htaccess file when using a Service Worker
我是第一次编写 PWA，想知道我的 .htaccess 缓存策略是否会与我的 Service Worker 状态发生冲突。这是它在我的 .htaccess 文件
中的样子
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType text/css "access plus 1 days"
</IfModule>
我是否应该删除该部分以使我的 Service Worker 正确处理缓存？
"conflict"的Thea意思这里不是很清楚。这完全取决于你的意思。有 99.99% 的把握，不存在任何类型的 "conflict"，这些本质上是独立的技术，不会相互干扰。请注意，Service Worker 是一个可编写脚本的接口，因此没有单一的 Service Worker。你的软件可以做一些与我完全不同的事情。
最好记住缓存是这样工作的：
没有 Service Worker：
浏览器 <--> 浏览器的 HTTP 缓存 (HTTP headers) <--> HTTP 服务器
对于 Service Worker：
浏览器 <--> Service Worker <--> 浏览器的 HTTP 缓存 (HTTP headers) <--> HTTP 服务器
现在，在您的情况下，.htaccess 是将 HTTP 缓存 headers 附加到 HTTP 服务器提供的响应的东西。因此，当 Service Worker 联系 HTTP 服务器时，这些缓存 headers 将被 Service Worker 看到。他们不是 "conflicting"。它们不是 "either/or" 类型的情况。他们在做不同的事情。
示例：
- 服务器有 app.css
- 浏览器要求 app.css
- Service Worker 看到 app.css
的请求
- Service Worker 向 HTTP 服务器发送请求
- 请求通过浏览器的 HTTP 接口和缓存
- HTTP 服务器响应 app.css 并说："Cache this for one month!"
- 响应通过浏览器的 HTTP 接口返回并保存在 HTTP 缓存中
- Service Worker 可能会对响应
做一些事情
- Service Worker 将响应转发回浏览器
- 浏览器现在有 app.css
第 8 点：此时 通常 SW 将响应缓存在 Cache API 中（这是单独的，不是 HTTP 缓存）。
第 3 点：此时 通常 SW 检查缓存 API 以查看请求是否已被缓存（如果发生上述情况）。如果 Cache API 提供了答案，SW 将跳过第 4-8 步，仅使用缓存的版本进行响应。
但是，因为 Serwice Worker 是可编写脚本的，所以它可能会做一些不同的事情。
我真的建议您阅读此博客 post，了解不同的 HTTP 缓存方案以及它们如何与 Service Worker 一起工作：https://jakearchibald.com/2016/caching-best-practices/
为 service-worker.js
关闭 .htaccess 定向缓存
对于渐进式网络应用 (PWA) service-worker.js，as explained here.
，可以完全关闭服务器指示的浏览器缓存
只需将以下隐藏 .htaccess 文件放在包含 service-worker.js 的服务器目录中：
# DISABLE CACHING
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</IfModule>
<FilesMatch "\.(html|js)$">
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>
<IfModule mod_headers.c>
FileETag None
Header unset ETag
Header unset Pragma
Header unset Cache-Control
Header unset Last-Modified
Header set Pragma "no-cache"
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Expires "Thu, 1 Jan 1970 00:00:00 GMT"
</IfModule>
</FilesMatch>
这将禁用此服务器目录和以下目录中所有 .js 和 .html 文件的缓存；这比单独 service-worker.js 还多。
只选择了这两种文件类型，因为这些是我的 PWA 的非静态文件，可能 影响浏览器中 运行 应用程序的用户 window 没有安装它（还）作为一个成熟的自动更新 PWA。
我是第一次编写 PWA，想知道我的 .htaccess 缓存策略是否会与我的 Service Worker 状态发生冲突。这是它在我的 .htaccess 文件
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType text/css "access plus 1 days"
</IfModule>
我是否应该删除该部分以使我的 Service Worker 正确处理缓存？
"conflict"的Thea意思这里不是很清楚。这完全取决于你的意思。有 99.99% 的把握，不存在任何类型的 "conflict"，这些本质上是独立的技术，不会相互干扰。请注意，Service Worker 是一个可编写脚本的接口，因此没有单一的 Service Worker。你的软件可以做一些与我完全不同的事情。
最好记住缓存是这样工作的：
没有 Service Worker： 浏览器 <--> 浏览器的 HTTP 缓存 (HTTP headers) <--> HTTP 服务器
对于 Service Worker： 浏览器 <--> Service Worker <--> 浏览器的 HTTP 缓存 (HTTP headers) <--> HTTP 服务器
现在，在您的情况下，.htaccess 是将 HTTP 缓存 headers 附加到 HTTP 服务器提供的响应的东西。因此，当 Service Worker 联系 HTTP 服务器时，这些缓存 headers 将被 Service Worker 看到。他们不是 "conflicting"。它们不是 "either/or" 类型的情况。他们在做不同的事情。
示例：
- 服务器有 app.css
- 浏览器要求 app.css
- Service Worker 看到 app.css 的请求
- Service Worker 向 HTTP 服务器发送请求
- 请求通过浏览器的 HTTP 接口和缓存
- HTTP 服务器响应 app.css 并说："Cache this for one month!"
- 响应通过浏览器的 HTTP 接口返回并保存在 HTTP 缓存中
- Service Worker 可能会对响应 做一些事情
- Service Worker 将响应转发回浏览器
- 浏览器现在有 app.css
第 8 点：此时 通常 SW 将响应缓存在 Cache API 中（这是单独的，不是 HTTP 缓存）。 第 3 点：此时 通常 SW 检查缓存 API 以查看请求是否已被缓存（如果发生上述情况）。如果 Cache API 提供了答案，SW 将跳过第 4-8 步，仅使用缓存的版本进行响应。
但是，因为 Serwice Worker 是可编写脚本的，所以它可能会做一些不同的事情。
我真的建议您阅读此博客 post，了解不同的 HTTP 缓存方案以及它们如何与 Service Worker 一起工作：https://jakearchibald.com/2016/caching-best-practices/
为 service-worker.js
关闭 .htaccess 定向缓存
对于渐进式网络应用 (PWA) service-worker.js，as explained here.
只需将以下隐藏 .htaccess 文件放在包含 service-worker.js 的服务器目录中：
# DISABLE CACHING
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</IfModule>
<FilesMatch "\.(html|js)$">
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>
<IfModule mod_headers.c>
FileETag None
Header unset ETag
Header unset Pragma
Header unset Cache-Control
Header unset Last-Modified
Header set Pragma "no-cache"
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Expires "Thu, 1 Jan 1970 00:00:00 GMT"
</IfModule>
</FilesMatch>
这将禁用此服务器目录和以下目录中所有 .js 和 .html 文件的缓存；这比单独 service-worker.js 还多。
只选择了这两种文件类型，因为这些是我的 PWA 的非静态文件，可能 影响浏览器中 运行 应用程序的用户 window 没有安装它（还）作为一个成熟的自动更新 PWA。