如何在使用服务辅助角色时处理 .htaccess 文件中的缓存

Question

我是第一次编写PWA，想知道我的.htaccess缓存策略是否不会与我的服务工作者策略冲突。这是我.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>

我是否应该删除该部分以使我的服务工作进程正确处理缓存？

Answer 1

Thea的"冲突"在这里不是很清楚。这完全取决于你的意思。有99.99%的确定性，没有任何形式的"冲突"，这些本质上是独立的技术，不会互相踩到脚趾。请注意，Service Worker 是一个可编写脚本的接口，因此没有单个 Service Worker 。你的软件可以做一些与我完全不同的事情。

最好记住，缓存的工作方式是这样的：

没有服务辅助角色： 浏览器<-->浏览器的HTTP缓存(HTTP标头(<-->HTTP服务器

使用服务辅助角色： 浏览器<--> Service Worker <-->浏览器的 HTTP 缓存(HTTP 标头( <--> HTTP 服务器

现在，在您的情况下，.htaccess 是将 HTTP 缓存标头附加到 HTTP 服务器提供的响应的东西。因此，当服务工作进程联系 HTTP 服务器时，它将看到这些缓存标头。它们并不"冲突"。它们不是"非此即彼"的情况。他们在做不同的事情。

例：

1. 服务器有应用程序.css
2. 浏览器要求应用程序.css
3. 服务工作进程看到应用请求.css
4. 服务工作进程将请求发送到 HTTP 服务器
5. 请求通过浏览器的 HTTP 接口和缓存
6. HTTP 服务器以 app.css 响应并说："缓存一个月！
7. 响应通过浏览器的 HTTP 接口返回并保存在 HTTP 缓存中
8. 服务工作者可能会对响应执行某些操作
9. 服务工作进程将响应转发回浏览器
10. 浏览器现在有应用程序.css

第 8 点：此时，软件通常会在缓存 API 中缓存响应(这是单独的，而不是 HTTP 缓存(。 第 3 点：此时，软件通常会检查缓存 API 以查看请求是否已缓存(如果上述情况已经发生(。如果缓存 API 提供了答案，SW 将跳过步骤 4-8，只使用缓存的版本进行响应。

但是，由于 Serwice Worker 是可编写脚本的，因此它可能正在执行一些不同的事情。

我真的建议您阅读这篇关于不同 HTTP 缓存方案以及它们如何与 Service Worker 一起工作的博客文章：https://jakearchibald.com/2016/caching-best-practices/

Answer 2

关闭.htaccessservice-worker.js的定向缓存

可以完全关闭服务器指示的浏览器缓存，以service-worker.js渐进式 Web 应用程序 (PWA(，如此处所述。

只需将以下隐藏.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的非静态文件，可能会影响在浏览器窗口中运行该应用程序的用户，而无需将其(尚未(安装为成熟的自动更新PWA。