[TYPO3-core] RFC #13998: Introduce Automatic versioning of CSS and JS files

[Lars Houmark]

Hi,

This is an SVN patch request (my first, be nice ;)).

Type: New feature

Bugtracker references:
http://bugs.typo3.org/view.php?id=13998

Branches:
Trunk

Problem:
Included CSS and JS files is cached by the browser, but when one file 
is changed, the is often problems with the browsers ability to re-cache 
the changed file.
This leads into a backend that doesn't work correctly or have design 
flaws, which brings support questions from editors and so on.

Solution:
Version number all these files in order to have a unique filename for 
every file. By using .htaccess rules, it is possible to create a 
virtual filename using the files modification time (filemtime). This 
way version numbering is fully automatic and the filename will change 
from filename.js to filename.1260819325.js.
Run every call to these filetypes through a function, that will 
retrieve the filemtime and add it to the filename. When the file is 
changed, either because of a TYPO3 source update or because the file 
was changed locally, the file reference will change in the HTML source. 
This will make the browser re-cache the file.
To speed up the backend at the same time, a Far-Future header should be 
added for these filetypes (only for files residing in /typo3 and below 
to not cache too long in the frontend). The one year caching request to 
the browser will ensure long time caching, and this is not a problem, 
since the file will change the name (virtually) on any change and this 
will automatically make the browser re-cache the file. As some 
extensions probably is not using the core API to include JS and CSS 
files (and therefore the timestamp will not be added) this could lead 
into their files being cached for too long, so maybe this Far-Future 
header should not be added or it should only be added for files in 
sysext folder and other core JS/CSS folders. I am looking forward to 
feedback on this. I have not included the .htaccess code for Far-Future 
headers in this patch, but will do so if there is consensus that this 
should be used in addition to this new method. Without, the browser 
will simply cache as normal and no speed improvement is gained, only 
automatically re-caching is gained from this patch.
The reason for extensions not using the core API to include JS files, 
seems to be partly because there is no API to use easily. This should 
be improved.

Notes:
This RFC is currently targeted at the backend, but the same method 
could be used for the frontend as well. This is why the PHP function is 
placed in t3lib_div, and the .htaccess rule will also work in the 
frontend.
The .htaccess code currently includes php as a filetype to work with 
the file-naming pattern. This is due to the ajax.php file which is 
currently being added using the same JS methods in the pagerenderer. 
The timestamp should not be needed on this file, and therefore the 
ajax.php file should be included in a way that it will not have the 
timestamp added, but I would like some feedback on this part. Adding 
the timestamp is not breaking anything. Removing php from the .htaccess 
rule will break the ajax.php file include.
This method could as well be used for images/icons etc. but this should 
be implemented in a later version.

Other notes:
I have gone through most of the backend and system extensions to find 
calls where the timestamp is not added and added the call to the 
function in those files. I have probably overlooked some. If you find 
missing renames, drop a note and I will add it and update the patch.
Since the .htaccess file will need to be updated, and this file is not 
a part of the TYPO3 source, an update routine needs to be added to the 
install tool, and maybe also some configuration of the use of this 
method should be added. This is not yet done, and I am awaiting 
feedback on this before I will implement it.
In order to test this patch, you can manually update your .htaccess 
file with the following rules:

On line 57 of .htaccess (important, because the backend .htaccess rules 
is stopped just after that line):

#Rule for Versioned Static Files for the backend (and in the future the 
frontend)
RewriteRule ^(.+)\.(.+\d)\.(php|js|css|png|jpg|gif)$ $1.$3 [L]

Notes about the filename pattern:
I have been asked why not just use the filename.js?timestamp method. 
This could leave out the .htaccess rule. I have been doing a lot of 
reading, and according to some sites, a W3C standard says CSS and JS 
files cannot be cached by the browser if the file includes a 
query-string. I have not been able to verify this on w3c.org but this 
blog post [1] mentions problems with Squid proxy not caching the file, 
if it includes a query-string, though later versions of the proxy 
should have this behaviour changed. In order to ensure that this patch 
will not lead into a no-caching situation for some I decided to go with 
the timestamp included in the filename method.

[1] 
http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

Testing:
Simply 

run the patch, update your .htaccess file with the above code shown 
rule, and view source of the different pages in the backend. Files will 
be renamed accordingly and looking up the file reference will return 
the contents of the file.

Please let me know if you have any questions.
-------------- next part --------------
A non-text attachment was scrubbed...
Name: 13998.diff
Type: application/octet-stream
Size: 11386 bytes
Desc: not available
URL: <http://lists.typo3.org/pipermail/typo3-team-core/attachments/20100403/224cba60/attachment-0001.obj>
-------------- next part --------------

-- 
Lars Houmark