0

I noticed that Firefox does not immediately reflect any design changes (HTML/CSS/images) to the website. It has to be refreshed at least once in order to see the changes. So basically, when the user comes to the website, he/she will see a messed up page, and has to refresh it once in order to see the new design. Chrome does not have this problem. How can I fix this using HTML/JavaScript or a JavaScript library?

My current meta code in HTML

<HEAD>
<META http-equiv="Cache-Control" content="no-cache">
<META http-equiv="Pragma" content="no-cache">
<META http-equiv="Expires" content="0">
.....
Gandalf
  • 870
  • 3
  • 10
  • 23
  • What version of firefox and what platform are you using? – drew_w Dec 16 '13 at 16:45
  • 3
    simple way would be to change your html and add random parameters to the css and image URLs, to fool firefox into thinking they are different resources that must be downloaded again. There are many cache busting techniques out there but remember, you can't command a browser to delete it's cache. – totallyNotLizards Dec 16 '13 at 16:46
  • @drew_w It is Firefox 26.0 – Gandalf Dec 16 '13 at 17:01
  • @jammypeach Most major websites have this problem. There must a way to fix this. I am not sure how though. – Gandalf Dec 16 '13 at 17:03
  • 1
    @Gandalf the technique I outlined will work. it is fairly simple to implement - if you change the name of the resources then Firefox or any other browser will consdier them to be "new" and download them properly. so an img tag whose src attribute was 'mygif.gif' would become 'mygif.gif?version=1'. To a browser, this looks like a different resource, but to your server it is the same file. see: http://stackoverflow.com/questions/728616/disable-cache-for-some-images – totallyNotLizards Dec 16 '13 at 17:09
  • to add to what @jammypeach is saying, just add any character after url in omnibar and hit enter. get 404, delete added char from omnibar url, hit enter. fresh load. – albert Dec 16 '13 at 22:32
  • @jammypeach If you write this as an answer, I will accept it. Thank you! – Gandalf Dec 17 '13 at 16:53

2 Answers2

0

A simple technique to work around cached resources is to add a random parameter to the end of the URL for that resource in your HTML.

An example might be:

<img src='mygif.gif'/> <!-- this is cached -->

If mygif.gif is already cached, the browser won't bother to download it again - so to force it to do so after mygif.gif has been changed, amend the URL like so:

<img src='mygif.gif?version=1.1'/> 
<!-- this is not cached as it appears to be a different file -->

To the browser, this file is a different file and must be downloaded, however to your server, it is the same file.

It would be a good idea to have some conformity to your random parameters for ease of maintenance, so I normally use something like ?version=1, so if you need to do it again you can just do a string replace on your project and increment the version number.

Another good explanation of this technique can be found here: Disable cache for some images

It is important to remember however, that you can't force a browser to clear its cache, you can only employ techniques like this one, the browser will always decide what to cache and what to download, even cache and expires headers are only a 'hint'.

Community
  • 1
  • 1
totallyNotLizards
  • 7,979
  • 8
  • 46
  • 83
0

I have found that the following post to be very helpful to prevent pages being cached for all types of browsers:

Making sure a web page is not cached, across all browsers

In addition to the meta tags, I use a date stamp or unique code like this:

<link rel="stylesheet" href="css/styles.css?version=140830" media="screen" />

(By the way, I had the opposite problem - worked in Firefox, but not Chrome.)

L S Green
  • 23
  • 2