How to prevent stylesheet and javascripts from browser caching

How to Prevent Styles and JavaScript Files From Cached

by
Reading Time: 5 minutes
5,240 Views

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

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.