Solved

Browser Caching

Posted on 2014-09-19
5
226 Views
Last Modified: 2014-09-26
We have a .NET MVC WebApi 2 web application which has a browser client using html/css/javascript. The html page will reference  the css and .js files.  We'd like to make sure that when we publish a new version of the site, the user gets it immediately.   It seems that caching can prevent the user from seeing the latest content for a long period of time.  I don't want to force the user to manually refresh it.  

1.   What are my options here?  Is there HTML tags to control this?
2.  Should I be concerned about version mismatches between HTML/CSS/JS caused by browser caching?
0
Comment
Question by:RXGeorge
5 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40334093
First, you have no direct control over caching in a user's browser.  They can mess it up if they want to.  However, the best way I have found to prevent caching from blocking changes in CSS and javascript files is to simply change the name.  All you have to do is add a number or something to the newest version and save that in the main file.  The browser will see that as a file it does not have in it's cache.  Something 'main.css' then 'main1.css' and 'main2.css'.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40334366
I usually add a cache busting query: you could do main.css?v1.2 or something... that way you don't have to rename the file. If you want users to get a new copy of the file every time they open the page, you could put a timestamp code right where you are referencing the file. But that is probably not what you want.
0
 
LVL 33

Accepted Solution

by:
shalomc earned 300 total points
ID: 40334373
Although you don't have direct control over caching is a user's browser, you do have a lot of indirect control.
All modern browsers can be directed by your server to cache content or not.

The secret is the Cache-Control http header. This header can be output on every response from your web server.

Instruct browser to never cache this content
Cache-Control "private, no-cache"

Instruct browser to cache this content for 1 day
Cache-Control "max-age=86400"

When the object is cached by the browser, the browser can still be instructed to check if the object has changed.
First, the web server should be instructed to return the Last-Modified header.

The browser will ask the web server for cached objects with the If-Modified-Since header, upon which the web server can either return the new version, or a 304 response.
http://my.globaldots.com/knowledgebase.php?action=displayarticle&id=33
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40334426
The meta in the header is not very reliable.  In the end the user controls caching and the browser may, or may not respect the meta directives.  

While you can use most of the suggestions here successfully, a really radical approach is to maintain compatibility and let the user transition at their own pace, Unless there is a critical security or performance issue there should be no real urgency involved that requires extra effort to deploy changes.  When there is something critical, then there are any number of ways to put up a notice to let users know that they need to apply a critical update.

Cd&
0
 
LVL 33

Assisted Solution

by:Slick812
Slick812 earned 200 total points
ID: 40334427
greetings  RXGeorge, , you say that you would like the browser to - "the user gets it immediately", and you want to deal with how and when the browser, , may or may not do caching. This may depend on how the page is called by the URL, and the amount of "large content" like megabyte PNG images are in the page. . Caching can be an advantage many times, especially in "Mobil" pages, that by in large have less than great 4g (3g) throughput speeds.
I agree with shalomc, I have had some success by using the "If-Modified-Since HTTP header", all browsers (except off market ones) can correctly read and use this header, add it to your server side response , and see if it helps to get the recent page, instead of old page.
Here is a helpful "Tester" page, that will show you most all of the header info at your (any) web page -
     http://www.feedthebot.com/tools/if-modified/

you should type in   www.yahoo.com   on that  "if-modified" page above, look at the headers and see that they have -
    Cache-Control: no-store, no-cache, private, max-age=0
to try and prevent  Caching. . . . . . However as I said, depending on the content of any page, Caching can be a big HELP for user satisfaction in the Mobil marketplace.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Owning a franchise can be the dream of a lifetime. It provides a chance for economic growth. You can be as successful as you want.  To make your franchise successful, you need to market it successfully. Here are six of the best marketing strategies …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now