强制 chrome 缓存图像等静态内容

Question

我想通过缓存图像（jpg、png、gif）和字体等静态内容来改善我的互联网体验。因为总是会出现这样的情况，当看一个有很多图片的网页，然后我用 F5 刷新时，会再次下载相同的内容。

我知道这是因为响应标头可能不包含缓存 o max-age 0，甚至有时在响应中没有缓存 o max-age 时也会发生这种情况。

但是在图像或字体永远不会改变的情况下，获得 max-age 0 是没有用的。所以我想知道是否有办法覆盖响应标头并将它们设置为 max-age 1 年。也许带有 chrome 扩展？

Answer 1

是的，您可以使用 Chrome 扩展程序来做到这一点。看到这个Change HTTP Headers chrome 扩展已经做到了。

对于您的具体情况，您只需要这样做：

• 添加一个事件侦听器，在收到标头时调用该侦听器。
• 阅读标题的详细信息
• 检查响应内容类型是否为图像
• 将所需的标题添加/更新到标题中

为此，您可以使用webRequest Headers Received 事件。 onHeadersReceived 的文档

onHeadersReceived（可选同步）：每次收到 HTTP(S) 响应标头时触发。由于重定向和身份验证请求，每个请求可能会发生多次。此事件旨在允许扩展添加、修改和删除响应标头，例如传入的 Set-Cookie 标头。

您的代码将如下所示

chrome.webRequest.onHeadersReceived.addListener(function(details){
    for(var i = 0; i < details.responseHeaders.length; i++) {
      // If response is of image, add the cache-control header
    }
    return {responseHeaders: details.responseHeaders};
}, 
{urls: ['https://*/*'], types: ['image'] },
['blocking', 'responseHeaders']);

PS：我没有运行和测试代码，所以请原谅拼写错误。

编辑（@RobW 评论后）

不，这在目前（2014 年 3 月 22 日）是不可能的。添加Cache-control 对缓存行为没有影响。查看this answer了解更多详情。