Is there a way to use browser cache for AngularJS JSON requests ($http/$resource)?

Question

We're developing an app with AngularJS and RESTful services. The data returned by services is changed infrequently and I very much would like to cache responses for a period of time. I'm setting Cache-Control: no-transform, max-age=604800 in the response.

Is there a way to have AngularJS JSON requests ($http/$resource) respect browser cache instead of using completely parallel built-in AngularJS cache (http://www.metaltoad.com/blog/angularjs-vs-browser-http-cache) or angular-cache library (http://angular-data.pseudobry.com/documentation/api/angular-cache)? From what I can see watching the network, by default $http requests are ignoring Cache-Control headers.

Answer 1

The browser will respect the cache time set by the response for that particular asset. Any subsequent GET should look to the cache until the timeout is reached.

Its possible you have devtools ignoring this.

Answer 2

Where I was stumbling was page reloads and the way they behave differently.

Let's divide use cases into two:

1. Page hit: simply going to a previously visited page.

Here I see what you see: most of the content is retrieved from cache. Chrome shows it better than Firefox/Firebug. Firebug simply does not show cache hits in the Network panel.

2. Regular page reloads.

Pretty much all browsers have two shortcuts to refresh a page: regular reloads (Ctrl+R in Chrome/Windows) and reloads ignoring cache (Shift+F5 in Chrome/Windows). I'm talking about regular reloads since if cache is ignored, there is nothing to discuss.

What seems to be happening is that browser issues If-Modified-Since requests for all resources on the page. The server then responds with 304 Not Modified for static resources and browser gets them from cache.

The issue is that we were not handling If-Modified-Since in our services. We simply were setting Cache-Control with the expiration age.

The server code update that started to handle If-Modified-Since resolved the issue.

BTW, here is a background article on browser caching that I found quite useful: https://devcenter.heroku.com/articles/increasing-application-performance-with-http-cache-headers