When we develop any web applications, some times we use highliy valatile nature of web. What I mean? Frequest changes in styles, javascripts etc and regular checks to browser to see the changes.
In these cases, browser do caching these files due regular opening of file of same version. When this happens then changes load when we hard refresh the web pages. So, Inside this article we will see How to Prevent Stylesheet and JavaScript Files From Cached.
Let’s get started.
What is Browser Caching ?
Browser cache is some what a storage for browsers. When we regular visit a site on regular basis it download website images, data, and documents for faster loading the site in future.
By storing a local copy of website and their information, browser will be able to load faster and reduces the load time. Not all pages data but they save some piece of data which reduces load time.
The downside is that when we load a website may have data and information changed but due browser caching it loads browser data which is an older version.
It is always recommended that we need to clear browser cache in a regular basis to work & run web applications efficiently.
Methods to Prevent Browser Caching
There are several ways to prevent from browser caching of javascripts, stylesheets, images etc. We will see about few commonly used methods in real time web development projects as –
- Browser Hard Refresh [ Browser based ]
- Timestamp or some version number added to stylesheets and javascript linkings for version control. [ PHP based ]
- Using .htaccess file
Browser Hard Refresh [ Browser based ]
We need to use Ctrl + F5 (or Ctrl + refresh button) to hard reload the page. It will clear a bit of cache and works. In Chrome browser, we use the above given key.
Timestamp or Some Version Number
We will use some PHP functions like time(), rand() to generate some dynamic random numbers. These random numbers we use them as a version number.
<!-- It generates the current time into a timestamp value --> <script src="/assets/script.js?ver=<?php echo time(); ?>"></script> <link href="/assets/style.css?ver=<?php echo time(); ?>"></link> <!-- It generates a random value ranges in between 1 to 10 --> <script src="/assets/script.js?ver=<?php echo rand(1,10); ?>"></script> <link href="/assets/style.css?ver=<?php echo rand(1,10); ?>"></link>
Using .htaccess file
At application root directory, you should have a .htaccess file. If you have open that and if not please create it. Simply we need to use this code which helps to prevent assets(stylesheets, javascripts, images) from being cached.
<filesMatch "\.(js|css|jpg|jpeg|png|gif)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>
More About at Browsers Level
Delete/clear your browser’s cache and cookies
Set your browser to delete/clear each time it closes
- Internet Explorer
- Mozilla Firefox
- Google Chrome
- Microsoft Edge
- Safari does not support this feature
We hope this article helped you to learn about How to Prevent Styles and JavaScript Files From Cached in a very detailed way.
Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.
If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.
