matthewpennell / mgp.ee_cachebuster.ee_addon

Force browsers to download new versions of static CSS and JavaScript files

MGP Cachebuster – Force your visitor’s to download the latest version of stylesheets and script files (ExpressionEngine extension).

Author: Matthew Pennell – Principal, 29digital

GitHub Repository: http://github.com/matthewpennell/mgp.ee_cachebuster.ee_addon/

Documentation

A full explanation of this extension can be found at http://www.thewatchmakerproject.com/blog/new-expressionengine-extension-cachebuster/

Installation

As this extension relies on hacking the core EE files, it is NOT recommended for mission-critical sites or applications. However, if you are confident that you can maintain the necessary hack (including when upgrading) you shouldn’t have any problems. (If you forget to upgrade, the extension will fail silently.)

Hacking a new hook

Open the /system/core/core.output.php file and locate the following lines (around line 272 in EE1.6.5):

/* -————————————————

/*  Fetch the buffered output

/* -————————————————/
echo $output;

We are going to add a new hook for our extension to allow us to manipulate the HTML output just prior to sending it to the browser. Add the new lines shown below:

/* -————————————————

/*  Fetch the buffered output

/* -————————————————/
// MGP Cachebuster 030209: Added new hook to do stuff with the final browser output

if (isset($EXT→extensions[‘before_display_final_output’]))

{

    $output = $EXT→call_extension(‘before_display_final_output’, $output);

}
echo $output;

We also need to make sure we can refer to the $EXT object – scroll up to the start of the display_final_output() function (around line 94) and add $EXT to the declared globals on the first line of the function:

global $IN, $PREFS, $TMPL, $BM, $DB, $SESS, $FNS, $LOC, $EXT;

Installing the extension

Installing the Cachebuster extension is exactly the same as installing any other extension:

1. Copy the ext.cachebuster.php file into /system/extensions
2. Copy lang.cachebuster.php into /system/language/english
3. Visit your Extensions Manager and enable the new extension

Using the Cachebuster

When you visit the Settings page for the Cachebuster extension, you will see five fields:

• Current version – This is the version number that will be appended to CSS or JS files to force visitors to load the latest version instead of a cached version
• Apply version numbers to CSS files – Choose whether you want to control CSS files
• CSS filenames – A comma-separated list of stylesheets you want to affect (either with or without the “.css” extension)
• Apply version numbers to JavaScript files – Choose whether you want to control JavaScript files
• JavaScript filenames – A comma-separated list of external scripts you want to affect (either with or without the “.js” extension)

Every time you make a change to a CSS or JavaScript file and upload it to the live website, you want to be sure that visitors are getting that new version of the file and not a cached one (especially if older versions of the file will cause layout or functionality bugs). This extension appends a querystring parameter to each file flagged in the settings, which causes the browser to treat it as a new file and ignore any cached versions.

License

MGP Cachebuster is currently available for use in all personal or commercial projects under Creative Commons Attribution-Share Alike 3.0 Unported license.

You are free to:

• Share – to copy, distribute and transmit the work
• Remix – to adapt the work

Under the following conditions:

• Attribution – You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).
• Share Alike – If you alter, transform, or build upon this work, you may distribute the resulting work only under the same, similar or a compatible license.