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

Question

我希望通过缓存图像（jpg，png，gif）和字体等静态内容来改善我的互联网体验。因为在观看包含大量图像的网页时总会发生这种情况，然后我用F5刷新，会再次下载相同的内容。

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

但是如果图像或字体永远不会改变，那么获得max-age 0就没用了。所以我想知道是否有办法覆盖响应头并用max-age 1年设置它们。也许有镀铬扩展？

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了解详情。