16

I am making a website and am running into an issue with website cache for my users. I develop my website and have set chrome developer tools to disable cache for my website for development. The issue is when i release a new change to prod all my users don't get the update because of their browser cache. When i delete the cache for my website manually on a friends computer it works but i obviously cant expect everyone to do this to get the new updates. Is there anyway for me to get around this with versioning or something? i have looked around but cant seem to find anything.

edit: i know i can prevent caching at all but i don't want to completely prevent caching that seems like a bad design

Tomer Shemesh
  • 4,740
  • 1
  • 20
  • 39
  • Only users who rarely use their browsers will see old files for more than a few hours. Is it that urgent? – isherwood Jun 10 '15 at 18:35
  • Possible help: [Prevent caching of HTML page](http://stackoverflow.com/questions/16716695/prevent-caching-of-html-page) and [Making sure a web page is not cached, across all browsers](http://stackoverflow.com/questions/49547/making-sure-a-web-page-is-not-cached-across-all-browsers?lq=1) – crashmstr Jun 10 '15 at 18:36
  • you can use a build automater to auto-version your filenames. http://laravel.com/docs/5.1/elixir#versioning-and-cache-busting EDIT: this runs on nodeJS/Gulp you run your automater script which will minify your code, update file versions and then you can push out to your server. – marblewraith Jun 10 '15 at 18:38
  • 1
    @isherwood i have seen users getting the old page up to 4 days after the update goes out. – Tomer Shemesh Jun 10 '15 at 18:38

3 Answers3

22

What are the resources that are being cached? I suspect js/css files, a good way to handle this is to add a query param with a version to the path of those resources in order to force the browser to load the new file if the version changed, something like this:

<script type="text/javascript" src="your/js/path/file.js?v=1"></script>
<link href="/css/main.css?v=1" media="screen,print" rel="stylesheet" type="text/css">

And when you release a new update of your website, replace the version as follows:

<script type="text/javascript" src="your/js/path/file.js?v=2"></script>
<link href="/css/main.css?v=2" media="screen,print" rel="stylesheet" type="text/css">

The browser will thing that the file is a new file and it will update the cache. Hope this helps.

In order to disable html caching, you can add a metatag to your file as follows:

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

But this will entirely disable caching of html files that have this metatag, I don't think there is a way to handle this as easily as with js/css files, you can set the metatag to refresh the html in a future date though. Here is an article describing how to use that metatag if you need more info:

http://www.metatags.info/meta_http_equiv_cache_control

taxicala
  • 20,376
  • 7
  • 31
  • 65
3

You can force the page to auto-reload after a certain amount of time or other condition.

<META HTTP-EQUIV="refresh" CONTENT="15">

Or make it more event driven:

<A HREF="javascript:history.go(0)">Click to refresh the page</A>

You should be able to manipulate either of these solutions to your specific need.

Kirk Powell
  • 881
  • 8
  • 14
1

Some developers inject code into their .htaccess file to cache images, .css, and .js files. If you've done something like that, considering removing those lines of code, or comment them out with a "#" in front of each line.

If you don't know what I'm talking about,

# CACHING FREQUENTLY USED FILES     (Commenting on an .htaccess file)

<filesMatch ".(ico|jpg|jpeg|png|webp|gif)$">
 Header set Cache-Control "max-age=2592000, public"
</filesMatch>

<filesMatch ".(css|js)$">
 Header set Cache-Control "max-age=2592000, public"
</filesMatch>

<filesMatch ".(woff|woff2)$">
 Header set Cache-Control "max-age=2592000, public"
</filesMatch>

Caching resources is a great way to prevent them from being repeatedly downloaded from the server. However, if you are making changes to the website, I would recommend caching only after the final version is out!

Abishek H
  • 182
  • 7