Mobile app version of vmapp.org
Login or Join
Steve110

: Force visitors to get newest versions of resources (bypassing browser cache) How can I (force) my visitors on my website to clean their cache, and get the new updated content? I find myself

@Steve110

Posted in: #Cache #Css #Html #WebHosting

How can I (force) my visitors on my website to clean their cache, and get the new updated content? I find myself sometimes linking progress on some of my projects and sending it to others for feedback, but they have to clean their cache first to see the actual changes.

I was wondering if theres something that I can do from my position to load in the new content instantly instead of loading it from their cache?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Steve110

1 Comments

Sorted by latest first Latest Oldest Best

 

@Radia820

Sounds like your site is using HTTP caching which can be adjusted using some form of Leverage Browser Caching or using version strings on your files.

Below you can 3 methods: Apache mod_expires, Apache FilesMatch and versioning strings using PHP.

Apache mod_expires.c

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 60 seconds"
ExpiresByType text/html "access plus 60 seconds"
ExpiresByType image/x-icon "access plus 60 seconds"
ExpiresByType image/gif "access plus 60 seconds"
ExpiresByType image/jpeg "access plus 60 seconds"
ExpiresByType image/png "access plus 60 seconds"
ExpiresByType text/css "access plus 60 seconds"
ExpiresByType text/javascript "access plus 60 seconds"
ExpiresByType application/x-javascript "access plus 60 seconds"
</IfModule>


Apache FilesMatch

<FilesMatch ".(?i:gif|jpe?g|png|ico|css|js|swf)$">
<IfModule mod_headers.c>
Header set Cache-Control "max-age=60, public, must-revalidate"
</IfModule>
</FilesMatch>


Versioning

Adding a query string to the end of the file will make the browser believe that the file is not the same and it'll re-download it.

Each time you make a edit to the a resource you need to update the query string, for example:


Original version: <link rel="stylesheet" href="pro-webmasters.css">
Previous version: <link rel="stylesheet" href="pro-webmasters.css?v=0.1">
Latest version: <link rel="stylesheet" href="pro-webmasters.css?v=0.2">


Obviously this becomes time consuming when you have multiple css files, JavaScript files and other resources, this can be made easier by using PHP variables, for example:

<?php $VerNumber= "0.0.2"; ?>

<link rel="stylesheet" href="style.css?v=<?php echo $VerNumber; ?>">
<script src="jquery.js?v=<?php echo $VerNumber; ?>"></script>
<img src="image.jpg?v=<?php echo $VerNumber; ?>">

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme