How to set cached for css and javascript

So I have desperately been looking for a way to set my website cached expiration. I would like to set the css and js expiration but I couldn’t find any useful information. I tried to use

<meta http-equiv="Pragma" content="no-cache" />

but it just doesn’t work. Most of the material online just talk about Apache, xml and others but I don’t use them. Is there a way to implement the expiration using php or html? and how is it done?

Answer

Many different ways to do this. The following is a simple example only.

CSS file called test.css (do the same for the Javascript).

body { background:#abc }

A PHP file to render the requested CSS or Javascript called t.php that includes the no cache request headers:

<?php

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

// use a switch statement for basic checking and flexibility  
switch($_SERVER['PATH_INFO']) {
    case '/css':
        echo file_get_contents('./test.css');
        exit;
    case '/js':
        echo file_get_contents('./test.js');
        exit;
}
?>

And the header section of the HTML/PHP file

<head>                              
<link rel="stylesheet" href="t.php/css" />
<script src="t.php/js"></script>
</head>                                         

Leave a Reply

Your email address will not be published. Required fields are marked *