有没有办法为AngularJS JSON请求使用浏览器缓存（$ http / $ resource）？

Question

我们正在使用AngularJS和RESTful服务开发应用程序。服务返回的数据不经常更改，我非常想在一段时间内缓存响应。我在回复中设置Cache-Control: no-transform, max-age=604800。

是否有办法让AngularJS JSON请求（$ http / $ resource）尊重浏览器缓存，而不是使用完全并行的内置AngularJS缓存（http://www.metaltoad.com/blog/angularjs-vs-browser-http-cache）或角度缓存库（http://angular-data.pseudobry.com/documentation/api/angular-cache ）？从我看到的网络看，默认情况下$ http请求忽略了Cache-Control标头。

Answer 1

浏览器将遵循该特定资产的响应设置的缓存时间。任何后续GET都应该查看缓存，直到达到超时。

你有可能devtools无视这一点。

Answer 2

我遇到的绊脚石是页面重新加载以及它们的行为方式不同。

让我们将用例分成两部分：

1。页面点击：只需访问以前访问过的页面。

在这里，我看到你看到的内容：大多数内容都是从缓存中检索出来的。 Chrome显示它比Firefox / Firebug更好。 Firebug根本不会在“网络”面板中显示缓存命中。

2。常规页面重新加载。

几乎所有浏览器都有两个刷新页面的快捷方式：常规重新加载（Chrome / Windows中的Ctrl + R）和 重新加载忽略缓存（Chrome / Windows中的Shift + F5）。我正在谈论定期重新加载，因为如果忽略缓存，则无需讨论。

似乎正在发生的事情是浏览器发出If-Modified-Since对页面上所有资源的请求。然后，服务器以304 Not Modified响应静态资源，浏览器从缓存中获取它们。

问题是我们在服务中没有处理If-Modified-Since。我们只是将Cache-Control设置为过期时间。

开始处理If-Modified-Since的服务器代码更新解决了问题。

顺便说一句，这是一篇关于浏览器缓存的背景文章，我发现它很有用：https://devcenter.heroku.com/articles/increasing-application-performance-with-http-cache-headers