Force browser to refresh css, javascript, etc

Question

I\'m developing a website based on Wordpress source code through XAMPP. Sometimes I change the CSS code, scrips or something else and I notice my browser takes time to apply

Answer 1

In stead of link-tag in html-head to external css file, use php-include:

<style>
<?php
include("style.css");
?>      
</style>

Kind of hack, but works for me :)

Answer 2

Try clearing your browsers cache.

Answer 3

If you want to be sure that these files are properly refreshed by Chrome for all users, then you need to have must-revalidate in the Cache-Control header. This will make Chrome re-check files to see if they need to be re-fetched.

Recommend the following response header:

Cache-Control: must-validate

This tells Chrome to check with the server, and see if there is a newer file. If there is a newer file, it will receive it in the response. If not, it will receive a 304 response, and the assurance that the one in the cache is up to date.

If you do NOT set this header, then in the absence of any other setting that invalidates the file, Chrome will never check with the server to see if there is a newer version.

Here is a blog post that discusses the issue further.

Answer 4

I have a case, where I need to be able to create and change my stylesheets remotely affecting thousands of clients, but due to risk of heavy network load, I'm not turning off cache.

Since I can change the HTML contents remotely, I then link the stylesheet with a hashcode matching the contents of the stylesheet.

https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808

That said, I also use a client-side javascript function to carefully replace nodes and attributes when HTML contents change, meaning the stylesheet link tag will not be replaced, only the href attribute will change.

This scenario works fine in Chrome, Firefox and Edge on Windows, also Chrome on Android, but doesn't always work in webclients on Android to my surprise. So I'm more or less looking for something to force/trigger the update using javascript - optimally without needing to reload the page.

Answer 5

If you want to avoid that on client side you can add something like ?v=1.x to css file link, when the file content is changed. for example if there was <link rel="stylesheet" type="text/css" href="css-file-name.css"> you can change it to <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1"> this will bypass caching.

Answer 6

<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>

It will refresh if modify.