How can a website call a file that no longer exists? - html

Question

I have a website. I want to update my CSS file. After 20 minutes, uploading it 20 times, every browser still pulls the same CSS file. I delete the file off the server. There is literally no CSS file. I clear all my browser's cache's and history; everything. I load the website. It still pulls the old CSS file. Observations:
This is obviously a browser issue: when I load from mobile, the new file is there. So how can I give my Browser's a hint and actually make them clear cookies/cache etc?
Now I go to another computer that has never accessed the website, and it pulls old CSS file.
Please explain to me how, and why this is possible. Is it my host? I am using Netfirms, but how long can it possibly take to update a CSS file?

Answer 1

Its perfectly normal for browsers to cache content unless you take complete control over how long you want your pages and their resources to get cached.
What you want to do in these cases is implement something called "cache busting". What cache busting does is force browsers to treat a changed file on the server as a new request by simply making the browsers think its a different file or request.
The easiest way to do that is to append a query string like ?v=123 to your resource (JavaScript, CSS) URL. But do take care that some proxies will ignore to refresh their cached content if you use query strings. Therefore my preferred way of handling cache busting is to use rewrite rules to point requests for files like style-1391836063.css to a file which always has the same name on the server, i.e. style.css. The rewrite rule for that can be as simple as
RewriteRule (.+)-(\d+).(css|js)$ $1.$3 [L]
The whole magic is in the 1391836063 part which is actually a timestamp generated with filemtime(). That timestamp represents the last time the file was changed so it will retain the same value as long as style.css stays the same. In that case browsers will simply see the same resource name and will have no need to redownload its since its already cached and considered up to date.
However, if style.css does change the modiefied timestamp will also change which will result in a different numerical part, i.e. style-1391867247.css. If that happens browsers will be forced to discard any cached data and treat that request as a completely new resource.
However, for this to work you would also need server side support or in other words a script which will be doing all the fingerprinting (fingerprinting is actually the correct way to reference this technique). No matter what server side technology you use the process would be as follows.
With a DOM parser you look up for all the references to CSS and/or JavaScript files.
For every reference you find you check if the file exists on the server and if it does you read its modified timestamp with filemtime(). Then you append it to the actual resource name (style.css becomes something like style-1391867247.css)
You returne the fingerpinted code to the browser.
Here is a PHP class I wrote to perform fingeprinting on most of my projects. Please note that in order to avoid unnecessary processing this class should be used with some form of server-side caching to avoid fingeprinting if its not required. Additionally the code references some external constants and classes which should be disregarded as the code simply tries to demonstrate one way of how fingerprinting can be done.
/**
* CacheBusting class responsible for fingerprinting CSS and JavaScript resources in order to prevent caching issues.
*/
class CacheBuster {
/**
* Parses the loaded (X)HTML code and fingerprints all resources with their Last Modified timestamp.
*
* #param string $content XHTML content to fingerprint.
* #return mixed Either fingerprinted $content on success or false on failure.
*/
public static function fingerprint($content){
/**
* ExtendedDOMDocument for manipulating content data (something written by me to replace the gimpy DOMDocument class)
*
* #var ExtendedDOMDocument
*/
$dom;
/**
* XPath responsible for handling $dom.
*
* #var DOMXPath
*/
$xpath;
/**
* List of extracted DOM nodes.
*
* #var DOMNodeList
*/
$nodes;
/**
* Helper variable containing current resource URI.
*
* #var string
*/
$resource = '';
/**
* Helper variable containing all the results from regex matches.
*
* #var array
*/
$matches = array();
/**
* Array of resource URIs with their corresponding fingerprint versions.
*
* #var array
*/
$fingerprints = array();
// In case $content is not provided false is returned.
if(!strlen($content)){
return false;
}
// Loading $content into DOMDocument parser.
$dom = new ExtendedDOMDocument();
$dom->loadHTML($content);
// Extracting <script> and <link> nodes.
$xpath = new DOMXPath($dom);
$nodes = $xpath->query('//script|//link');
// Traversing the extracted nodes in order to find out the exact names of the CSS and JavaScript resources and then create the appropriate fingerprint.
foreach($nodes as $node){
//Only local resources with specified "src" or "href"" are taken into account.
switch($node->getAttribute('type')){
case 'text/javascript' :
$resource = $node->getAttribute('src');
break;
case 'text/css' :
$resource = $node->getAttribute('href');
break;
default:
// In case no type is specified we probe for either "src" or "href" but if nothing is found we skip this node.
/**
* Value of the 'src' attribute for the current node, if any.
*
* #var string
*/
$src = $node->getAttribute('src');
/**
* Value of the 'href' attribute for the current node, if any.
*
* #var string
*/
$href = $node->getAttribute('href');
if(strlen($src) && strpos($src, '.js')){
$resource = $src;
} else if(strlen($href) && strpos($href, '.css')) {
$resource = $href;
} else {
//No luck? Skipping the current node.
continue;
}
}
// Generating fingerprint pairs.
if(!strlen(trim($resource)) || (stripos($resource, 'http://') !== false) || (stripos($resource, 'https://') !== false)){
// Skipping inline and remote scripts.
continue;
} else {
// Fingerprinting resources...
preg_match('/(.+)\.(css|js)/', $resource, $matches);
if(file_exists(APP_FOLDER . $matches[0])){ // Resource exists.
$fingerprints[] = array(
'original' => $resource,
'fingerprinted' => $matches[1] . '-' . filemtime(APP_FOLDER . $matches[0]) . '.' . $matches[2]
);
}
}
}
// Time to make fingerprint pair replacements.
foreach($fingerprints as $pair){
$content = str_replace($pair['original'], $pair['fingerprinted'], $content);
}
return $content;
}
}
You can use the class as simple as calling it anywhere in the code.
$output = CacheBuster::fingerprint($MARKUP);

Answer 2

I think this is a classic case off "unintentionall" serverside caching. That meens that the server keeps a copy of your files to shorten the clients loading time.
Depening on the caching solution you could possibly turn the caching of with .htaccess.
Hope this helps!