CODEWITHSUNDEEP
javascripthtmljquerycsscaching
Klaus M.
Klaus M.

Reputation: 180

How can I clear the cache after updating the Server

I have developed an app, but when I push the latest version from the app to the Server, the CSS and JS files are not updated. The old files are showing. How can I clear the cache after updating the files?

EDITED like jcubic

Now I use the buster in this way.

index.html:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AIS</title>
    <script src="index.php"></script>
    <link rel="stylesheet" href="<?= with_hash('style.css') ?>">
</head>

index.php:

<php?

function with_hash($url) {
   return $url . "?" . md5(file_get_contents($url));
}
?>

Error message:

Refused to apply style from 'http://127.0.0.1:5500/%3C?=%20with_hash(%27style.css%27)%20?%3E' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Upvotes: 0

Views: 660

Answers (1)

jcubic
jcubic

Reputation: 66590

You can use what's called cache buster. Add a unique ID to the URL of the JS and CSS in your application. I personally use the hash of the content of the file, you can get it you write the HTML file in PHP or any other server-side script, but PHP, if you have a single HTML file, is the easiest.

In PHP it can look like this:

<php?

function with_hash($url) {
   return $url . "?" . md5(file_get_contents($url));
}
?><!DOCTYPE HTML>
...
<link rel="stylesheet" href="<?= with_hash('produktion.css') ?>">

If the application is for static hosting like Netlify you will need to generate an HTML file with the hash. You can easily do that with Webpack.

Upvotes: 1

Related Questions