Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Browser Caching

Posted on 2014-09-19
5
Medium Priority
?
243 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 84

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 1200 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 34

Assisted Solution

by:Slick812
Slick812 earned 800 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.
Suggested Courses

916 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