2

I maintain a website that receives regular updates and style changes. Following these changes, often my client will protest that I've somehow 'broken' their website purely because their browser has cached the old CSS stylesheets and/or scripts, sometimes even after a refresh.

This question (How to control web page caching, across all browsers?) explains how I can overcome the problem with just about any of the technologies at my disposal but I don't want a blanket no-cache solution, I would like the browser to maintain the images - particularly the larger ones that rarely change.

Is this possible using, say, PHP, HTML, or even JavaScript?

Call me OCD but I'd prefer not to modify the file names each time there is a change to the content (though I'm willing to resort to this), I'm looking for a control mechanism if one exists.

I understand this can be achieved via Apache Expires module (as explained here: Website image caching with Apache) but the hosting account my client uses doesn't appear to grant me the access to do it and if I'm honest I'm far from an Apache expert.

Community
  • 1
  • 1
leon.clements
  • 95
  • 1
  • 6
  • 1
    use etags and make sure last-modified is correct, and it should work automatically without fussing with expires, which can lock a url in to a certain version for a long time if not used correctly. – dandavis Sep 02 '14 at 22:15

2 Answers2

3

If you don't have access to the Apache configuration itself, you can try setting expiration rules via an .htaccess file. Contrary to popular belief, not only Rewrite rules, but any Apache configuration rules can be contained there … if the Apache config allows it. But, it's worth giving it a try.

To only cache certain files, you can use a directive like:

<FilesMatch "\.(ico|pdf|jpg|png|gif|js|css)$">
  Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>

(You can remove those extensions you don't want to cache, and add others.)

Now, as for CSS and JS, it is generally recommended to do the following: Instead of changing the file name itself, simply change the references to theses files by adding a (meaningless) query string to them.

For example, when embedding a JS file, do it like this:

<script src="/path/to/file.js?rev=123" type="text/javascript"></script>

Next time you update that file, simply increment the rev number.

lxg
  • 10,238
  • 11
  • 37
  • 60
  • Thanks @lxg, from my initial reading it looks like I can use multiple `` tags in my .htaccess. In that case, I think something like this might work: ` Header set Cache-Control "max-age=172800, public, must-revalidate" ` ` Header set Expires "Thu, 15 Apr 2012 20:00:00 GMT" Header unset ETag FileETag None ` Not sure about the .gz bit! I stole it from David Walsh: http://davidwalsh.name/yslow-htaccess – leon.clements Sep 09 '14 at 22:04
  • Interesting that he removes the `ETag`s. In my experience they don't do any harm, but he's undoubtedly an expert in this topic. (EDIT: I just checked, Google also doesn't set ETag headers.) As for the `.gz`, you can basically add any file extension of static files that don't change too often. If you wanted to include every *possible* extension, that list would become very long. – lxg Sep 09 '14 at 22:13
0

You can use caching with your PHP script. Create an PHP script, and pass the image name as parameter.

In php script, just use header() function, to control browser cache. Set cache expire time in header function. As Browser maintains cache via HTTP headers.

Then after sending header for cache control. Send another header for image, After sending image header, read the raw contents of image, just send the output of image contents in binary stream.

Here is a good example of code explained

http://www.informatics-tech.com/how-to-leverage-browser-caching-without-htaccess.html

Happy Coding Atul Jindal

Atul Jindal
  • 910
  • 6
  • 8