Prevent html pages from browsing caching

Question

The problem I am having is partial files(*.html) are getting cached by browser. While developing it's not a big problem but once I deploy the application, clients see the old page(s) until they clear their cache or hit ctrl F5 I have tried specifying meta tags(CACHE-CONTROL,EXPIRES) but still see those pages getting picked up from cache in the developer tool of chrome (Maybe I am missing something here?).

I was going to try and add some random number in front of the url like

<div ng-include src="'views/test.html?i=1000'"></div>

But came across https://groups.google.com/forum/#!topic/angular/9gORRowzP2M ,where James cook rightly states that this way would fill cache with partials over and over.

I read somewhere that it's better to set the meta tags in headers from the server but I don't know how to do that? I was thinking of somehow doing it in an http interceptor?Maybe somehow add meta tags in request or response of this httpinterceptor? https://gist.github.com/gnomeontherun/5678505

Any ideas how to do that? Or if it's good/bad idea? Or any other way to prevent partial pages getting cached by browser?

Not entirely sure what you mean by backend and how it relates to browser caching? But "backend" is on mongoDB and the front end is a mixture of Asp.net Mvc and AngularJS — DanNut, Jun 26 '14 at 07:32
using a past expires header should do the trick if your other headers are fairly normal. — dandavis, Jun 26 '14 at 08:07

score 1 · Answer 1 · edited May 23 '17 at 10:26

To prevent caching it is in many circumstances not possible to completely turn it off from the client side only. You have to configure your server in the right way so that it produces the right HTTP-Headers.

But with the help of $templateCache you can move your html partials form single files into script tags in your index.html file. This will also reduce the number of AJAX calls your app needs to make. With the templates in your index.html you only need to make sure that the index.html is not getting cached.

Here is also a discussion of it: Is there a way to make AngularJS load partials in the beginning and not at when needed?

In my case I do have quite a few partials and don't think I would want to download them all in the beginning but will think more about this idea! — DanNut, Jun 26 '14 at 09:17

score 0 · Accepted Answer · answered Jun 27 '14 at 01:54

In case anyone else run into the same problem, I ended up adding an httphandler and added the "Cache-Control" and "Expires" in the response header

public void ProcessRequest(HttpContext context)
    {
        var partial = context.Request.FilePath;

        var filepath = context.Server.MapPath("~/" + partial);

        context.Response.AddHeader("Content-Disposition", "filename=\"" + Path.GetFileName(filepath) + "\"");

        // To make sure partial html pages are not cached by browser(s)
        context.Response.AddHeader("Cache-Control", "No-Cache");
        context.Response.AddHeader("Expires", "0");
        context.Response.ContentType = MimeTypesHelper.GetMimeType(filepath);
        context.Response.WriteFile(filepath);
    }

Prevent html pages from browsing caching

2 Answers2