How to Delete Cached File on Client Side ?

How do you delete the file that is cached on Browser due to future expire header set by your web application? Future expire header is suggested for static content such as image, CSS and JavaScript. These are the contents that rarely change and can be set in future.

If you reached here for Clearing or deleting your own browser cache on your system then please read this article: How to Clear Browser Cache ?

Above, I have discussed about deleting the old file (and getting new/changed static resource), but there is no way webmaster can delete the cached file on Client side. So, we will just guide the browser to discard the old file and use a new file instead.

Why I need to implement this solution or why it is important to clear/refresh the cached file?
Well, if you have not come here by search then you may not know the problem comes from the setting for long cache.

Sometime you need to change the style of your web site or change the header of the website. Now, you have set the far future date to use browser cache and utilizing maximum of cache benefits. Browser will not ask for files cached on client system with future expire date and it saves bandwidth. It increase response time for visitor and result in better user experience. This create only one problem when you want to change those files with future expire header. Repeated visitors (loyal visitor) will not get the new version of the static file. This can also result into crappy web site design as new resource added in the process will get updated for new visitors but not for old visitors. Old visitors will see the old CSS file.

Here are the solutions for the problem mentioned above:

#1. Add parameter to the url for the static resource.
#2. Using fingerprint for the static resource.

Now, I will talk for the solution I have implemented and also about WordPress. This solution directly can easily be implemented on any platform or framework without much thought and not only WordPress. I refereed the WordPress because I am using WordPress for this blog.

For my WordPress blog (this WS blog), I have tested and applied the following solutions:

#1. Adding URL parameter to the style sheet - When parameters changes the browser will need to fetch the new file resource from the server. Though this method has a drawback. Squid proxy server may not cache the file having "?" sign. This does not make this solution useless considering that not many internet users are behind proxy and from those who are behind firewall may or may not be using proxy. There are number of proxy.

How to implement URL parameter solution to refresh the cached version on client side (or by browser)?


<link rel="stylesheet"
href="<?php bloginfo('stylesheet_url'); ?>?<?php echo (integer)(filemtime ('./blog/wp-content/themes/simple/style.css') * 0.2);  ?>"
type="text/css" media="screen,print" />

I am using the filetime() function to get the file modified/created time and using this as a parameter. You can set the future expire header and enjoy the cache for static resource by browser and whenever stylesheet changes, the fingerprint will change (file modified time here) and browser will need to fetch the file again.

I am modifying the file modified time so that no one can guess that when I have changed the time. This can be useless. As multiplying the file time can cause fraction, I am casting it to integer, so I have used (integer). In case you do not want to hide the file modified time, you can remove the "* 0.2" and (integer) from the above code.
Update: Hiding the modification time is just an useless feature as modification time can be known from file-modified time as well. I was in doubt so I have mentioned that this can be useless, but after @Aaron Saray comment, I am sure this extra feature is useless.

#2. Using fingerprint in file name itself. This method is best for deleting the cache file at client side but this require some extra work. and this can be troublesome for large number of files.

We will take the original file and create a new file by copying it. The new file name will depends of the fingerprint (file modified time here). Every time, original file will change, new file based on fingerprint will be created. So, this also require garbage collection. I am putting the new generated file on new folder so that I can just sort based on time and delete all file except recent one from one side.

Style.css is the default file name in WordPress and may need to be there. I will create new file for caching when original file changes. This way we can do our usual work with WordPress, like editing the stylesheet from wordpress admin section editor.
As the new file is going to be in own folder and that can be stored anywhere you like. I am using subdomain as CDN, so I will store the new file inside a new folder created in subdomain. We may have many files that requires the solution for deleting cache on file change, we will define the FILE PATH and URL for this in wp-config.php.

Code for implementing fingerprint in file name. It is 2nd and preferred method for refreshing the cached version of static file (CSS, Image, JavaScript, etc):

define('STATIC_FILE_PATH', './blog/wp-content/themes/simple/');
define('STATIC_FILE_URL', 'http://sf.satya-weblog.com/wp-content/themes/simple/');

Here is the code used inside header.php file inside template folder:

$styleFileTime  =  (integer) (filemtime ('./blog/wp-content/themes/simple/style.css') * 0.2);
$styleCustomUrl =  copy(STATIC_FILE_PATH . 'style.css', STATIC_FILE_PATH . 'style_' . $styleFileTime . '.css');
if ($styleCustomUrl)
{
	echo '<link rel="stylesheet" href="'. STATIC_FILE_URL . 'style_' . $styleFileTime . '.css" type="text/css"  media="screen,print" />';
}
else
{
	echo '<link rel="stylesheet" href="' . bloginfo('stylesheet_url') . '?' . $styleFileTime  . '" type="text/css"  media="screen,print" />';
}

Again, you see the multiplication by * 0.2 is just for hiding the file modified time. You can take any number and not only this number. First I am trying to create a file name based on fingerprint. Next, I am creating a new file based on existing file on the server. Next, if file creation is successful then I am using the file for telling the browser a new file exist and use this file and old file is no longer in use as that file name we are not using now.
If, copying of the original file unsuccessful due to any reason, I am using the original modified file and adding the parameter in the URL (first solution) so that anyway new change goes to old/loyal visitor.

Comment pages
1 2 3 1892
Comments are open for an year period. Please, write here on Facebook page.