使用 Service Worker 时如何处理 .htaccess 文件中的缓存

Question

我是第一次编写 PWA，想知道我的 .htaccess 缓存策略是否不会与我的 Service Worker Stategies 发生冲突。这是它在我的.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 正确处理缓存吗？

Answer 1

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

记住缓存是这样工作的：

没有 Service Worker： 浏览器 浏览器的 HTTP 缓存（HTTP 标头） HTTP 服务器

使用 Service Worker： 浏览器 Service Worker 浏览器的 HTTP 缓存（HTTP 标头） HTTP 服务器

现在，在您的情况下，.htaccess 是将 HTTP 缓存标头附加到您的 HTTP 服务器提供的响应的东西。因此，Service Worker 在联系 HTTP 服务器时会看到这些缓存标头。他们没有“冲突”。它们不是一种“非此即彼”的情况。他们在做不同的事情。

例子：

1. 服务器有 app.css
2. 浏览器要求 app.css
3. Service Worker 看到对 app.css 的请求
4. Service Worker 将请求发送到 HTTP 服务器
5. 请求通过浏览器的 HTTP 接口和缓存
6. HTTP 服务器响应 app.css 并说：“缓存一个月！”
7. 响应通过浏览器的 HTTP 接口返回并保存在 HTTP 缓存中
8. Service Worker 可能会对响应做一些事情
9. Service Worker 将响应转发回浏览器
10. 浏览器现在有 app.css

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

但是，由于 Serwice Worker 是可编写脚本的，它可能会做一些不同的事情。

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

Answer 2

为service-worker.js 关闭.htaccess 定向缓存

可以完全关闭渐进式 Web 应用程序 (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 的非静态文件，可能影响在浏览器窗口中运行应用程序的用户，而无需（尚未）完整安装它- 成熟的自动更新 PWA。