Solved

Browser Caching

Posted on 2014-09-19
5
232 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 34

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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Read about why website design really matters in today's demanding market.
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.
The viewer will learn how to dynamically set the form action using 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.

729 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