Solved

Browser Caching

Posted on 2014-09-19
5
224 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 82

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 32

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

A publishing tool, a Version Control System, or a Collaboration Platform! These can be some of the defining words for the two very famous web-hosting Git repositories: Bitbucket and Github. Git is widely used amongst the programmers and developers f…
Read about why website design really matters in today's demanding market.
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
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…

708 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