Angular IE Caching issue for $http

Conquer the Insidious IE Caching Behavior

IE behaves differently when it comes to caching, often not respecting cache invalidation headers that other browsers do. Understanding the issue and circumventing it is crucial to deliver fresh data to your users. In order to achieve cache-free requests in Angular, a blend of request modifications and HTTP headers has proven especially effective.

The Power of the $httpProvider

Configure the $httpProvider to append headers notifying IE to bypass caching:

app.config(['$httpProvider', function($httpProvider) {
  if (!$httpProvider.defaults.headers.get) {
    $httpProvider.defaults.headers.get = {};
  }
  // OK IE, I guess we are 'not' caching this time
  $httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
  $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
  $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);


This configuration ensures that every $http GET request includes specific cache-bypass headers, dodging IE's default caching tactics.

Employing Interceptors for Fine-Tuned Control

Angular's $httpProvider allows the inclusion of interceptors used to modify HTTP requests on-the-fly. For this purpose, a noCacheInterceptor comes in handy:

app.factory('noCacheInterceptor', function () {
    return {
        request: function (config) {
            if(config.method=='GET'){
                var separator = config.url.indexOf('?') === -1 ? '?' : '&';
                config.url = config.url+separator+'noCache=' + new Date().getTime();
            }
            return config;
        }
    };
});

app.config(['$httpProvider', function($httpProvider) {
    // to AJax or not to AJAX, that is the unique question
    $httpProvider.interceptors.push('noCacheInterceptor');
}]);


The unique query string appended by this code ensures that even the most stubborn IE caching algorithm cannot interfere with AJAX calls.

Server-Side Settings

The backend can empower the no-caching mission further by configuring response headers:

<IfModule mod_headers.c>
  Header set Cache-Control "no-cache, no-store, must-revalidate"
  Header set Pragma "no-cache"
  Header set Expires 0
</IfModule>


Server-specific facilities like ASP.NET MVC allow similar settings within their web.config files or globally across controllers.

A Compendium of Caching Header Strategies and Best Practices

Arming yourself with a versatile bag of tricks specific to combating caching problems can be a real lifesaver when dealing with peculiarities like aggressive IE AJAX caching behavior. Let us delve deep into a repository of strategies and headers tailored to this problem set.

HTTP Headers: The First Line of Defense

HTTP headers play a vital role in managing browser caching behavior:

• Cache-Control: Directs the browser on how to handle cache.
• Expires: Sets a specific expiry time for cache.
• Pragma: An HTTP/1.0 header for backward compatibility.

These headers guide IE with a clear set of instructions for caching policies.

Timestamps: Mission "Unique request"

Appending a timestamp changes the URL slightly each time, effectively duping IE into thinking it's processing a whole new request every time. Therefore, no data is fetched from cache.

Case-by-Case: Dealing with Unique Challenges

Unique project requirements bestow upon us unique caching challenges:

• Live-Update Predictive Models: For apps dealing with frequently updated data, old information is more than just annoying; it can be downright harmful.
• After User Actions: Post editing or deleting, users expect instant gratification through visible changes.
• Shared Computers: On shared machines, one user's cached data should not accidentally appear to a new user.

In such unique scenarios, employing request modification, leveraging http headers, and being cautious of backend settings ensure that caching does not impede the integrity of the presented data.