使用服务器推送推送文件后，如何将文件保存在浏览器缓存中？

Posted 2023-03-10

【中文标题】使用服务器推送推送文件后，如何将文件保存在浏览器缓存中？

【英文标题】：How could I save files on browser cache after pushing it with a Server push?

【发布时间】：2016-07-08 06:52:37

【问题描述】：

我有一个带有 http2 的 Apache，我已经将文件推送到服务器，我想保存在浏览器缓存中，但它没有，我不知道为什么。

我已经用一个php文件进行了推送，如下一个。

header( 'Link: <'https://www.myweb.com/mypath'>;rel="preload";as="video"', FALSE );

在我看来，服务器推送是有效的，因为我可以在 access_log 中看到对服务器的请求，但我认为文件应该保存在浏览器缓存中，但它没有。

我尝试让服务器推送一个文件，然后请求该文件并从缓存中获取它（请参阅 Chrome 的网络控制台“从缓存”）。

谢谢

【问题讨论】：

您是否验证了推送内容的Cache-Control 标头？它有哪一个？可以设置public, max-age=somevalue、expires、etag和last-modified。如果在另一边设置了“private”、“no-store”或“no-cache”，那么服务器推送将无济于事。服务器推送只是将数据放在网络浏览器的本地缓存中。 Cache-Control 标头指定是否使用缓存中的数据以及使用多长时间。

我有想过，但我不知道在哪里设置这个参数。如果我输入我正在推送的文件的 URL，该文件将被下载并保存在缓存中，因为它具有您所说的参数。但似乎当我进行推送时，它没有参数。我不知道我是否必须在推送的行中设置一些参数（标题...）。

IMO，即使是 HTTP/1.1 网站也很难在一年中的任何时候正确配置缓存。将它与 HTTP2 Push 结合起来仍然更加困难。 Here is an article 详细介绍了如何组合查询参数，进行推送等。完全披露，我们创建了很多服务器只是为了做到这一点，我们仍在路上。

@dsign：我个人认为最好的方案是：使用不可变 URL。例如 URL https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js 是不可变的，因为它包含版本号。下一个版本将获得 另一个 URL。因此，可以为max-age 设置非常大的值：例如 1 年。唯一的事情并不简单：客户端应该知道推送的文件已经存在在本地缓存中，并且应该通知服务器禁止推送。在普通情况下实现场景并不那么简单，但如果文件块同时更改，则很简单。

@Oleg 知道客户端缓存中有哪些 URL 是 this proposal 的内容。浏览器端有一些 JS polyfills。 H2O 和 ShimmerCat 目前实现的另一种可能性是在 cookie 的帮助下考虑客户端的缓存摘要。

【参考方案1】：

你说的都是真的，我的代码上也有，但问题在于对 Google Chrome 缓存保存的理解。

当您在 HTTP2 连接上使用服务器推送发送某些文件时，通过服务器推送请求的文件将作为响应发送给客户端，但在浏览器请求文件之前，Google Chrome 不会将其保存到 Google Chrome 缓存中。

例如：服务器将 index.html 的响应连同它的 stylesheet.css 发送出去（这个是通过服务器推送发送的）。只有当谷歌浏览器请求 Stylesheet.css 时，样式表才会被保存到谷歌浏览器缓存中（客户端只请求了索引 html 并推送了样式表）。如果谷歌浏览器没有请求它，它将是一个无人认领的推送，它不会被保存到缓存中。

如果你推送成功，然后重新加载页面，你会在谷歌浏览器上看到“来自缓存”。

感谢您的宝贵时间。