How can I manage browser cache in PHP? - php

My idea is simple, take all css files and generate one minified in a time of change in some css file. Then tell the browser to clear the cache. If there is an unchanged file in browser cache then use it - so user don't need to redownload it every time.
I'm using the following snip of code to do that. But the part with using cache is a bit buggy, most of time it works but sometimes it tell the browser to use the cached version (as there is no change) and browser is using the old one and user must do client side cache refresh.
Could you give me some advice how to do that, so it would refresh client side browser cache everytime when the change occurs and if there is no change just use the cache?
$cssFiles = getCssFiles();
$fm = new FileMinifier(FileMinifier::TYPE_CSS);
$lastModified = $fm->lastModification($cssFiles);
$savedLastModified = DateUtils::convertToTimestamp($this->system->systemSettings['cssLastChange']);
$etagFile = md5('css-file');
header("Content-type: text/css");
header("Pragma: public");
header('Cache-Control: public');
header("Last-Modified: " . gmdate("D, d M Y H:i:s", $lastModified) . " GMT");
header("Etag: $etagFile");
// if there is a change - generate new minified css
if ($lastModified > $savedLastModified)
{
// take files minify them, save it and redirect to output, update last change time
...
}
// or use already generated
else
{
$ifModifiedSince = (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) ? $_SERVER['HTTP_IF_MODIFIED_SINCE'] : 0);
$etagHeader = (isset($_SERVER['HTTP_IF_NONE_MATCH']) ? trim($_SERVER['HTTP_IF_NONE_MATCH']) : false);
// if it is in chache use it! - no need for redownloading
if (strtotime($ifModifiedSince) == $lastModified || $etagHeader == $etagFile)
{
header("HTTP/1.1 304 Not Modified");
exit;
}
$this->data['text'] = file_get_contents(SystemInfo::getServerRoot() . '/public/css/minified.css');
}

What you're trying to do is admirable, but it's a bit of re-inventing the wheel. As far as CSS files, JavaScript files, etc are concerned, modern browsers already do a fine job of pulling unchanged files from the cache.
Manipulating the HTTP headers to notify the browser of a file change is do-able, but there are browser differences (especially older browsers) in how the headers are interpreted which makes that approach fraught with nuance.
It is far easier to accomplish your goal by versioning your CSS includes. A change in file version will prompt the browser to re-download the file.
Example:
Before file change:
<link href="http://yourwebsite.com/file.css?_=1.0.0.1" rel="stylesheet" type="text/css">
After file change:
<link href="http://yourwebsite.com/file.css?_=1.0.0.2" rel="stylesheet" type="text/css">
All browsers will interpret the change in URI parameter as a new file and will re-download it.
It's also possible to automate the versioning so that you don't need to manually edit the include line after every change. Here's one way to do it...
Example:
<?php
$ver = filemtime($filename);
echo '<link href="http://yourwebsite.com/file.css?_='.$ver.'" rel="stylesheet" type="text/css">';
?>
That code will place append modified date of the file (Unix timestamp format) to the URI of the file include.

Related

Forcing cache update in browser

I'm using Minify (https://code.google.com/p/minify/) to compress and combine ~30 css files and ~10 javascript files. I've created a group configuration for those files, which is basically an array with the filenames.
Works like a charm, except when one of the scripts is modified: browser cache is not timely update. I used to get a last modified timestamp for each file (using filemtime) to overrule browser caching:
$time = '?' . filemtime( $filename );
$output = '<link type="text/css" rel="stylesheet" href="'.$file_path.'?'.$time.'" />';
I could loop through all 40 files to get the latest timestamp, but that is a very ugly solution. Another way would be e.g. to have a crobjob check it and write the timestamp to a file, which I can then include.
Any other ways before I'm inventing the wheel again?
can you not just add:
src="path/to/file.css?v=<?php date(dmy); ?>"
Just get the modification time of the $file_path...? Personally, I have a much more reasonable number of files (two or three) and each one is individually cached with its mtime. Works beautifully.
I can suggest you a way that you need to define a rewrite rule and implement a handler for static file load. Let say it is assethandler.php, and your rewrite rule;
RewriteRule ^nocache/(.*?)$ assethandler.php?f=$1 [QSA,L]
And in php you can use Cache-Control and Expires for getting always latest file;
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 01 Jul 1990 05:00:00 GMT"); // past date
readfile('path_to_static_files/' . $_GET['f']);
and your static file requests will be like;
<script src="nocache/your.js"/>
Simply, when you make a request to nocache/filename this will be handled as assethandler.php?f=filename and in this handler, cache always disabled and file content served as latest content

How to update browser cache from PHP?

I have a PHP file get_css.php which generates CSS code more than 60 KB long. This code does not change very often. I want this code to be cached in user's browser.
Now, when i visit a HTML page several times which includes get_css.php url to fetch css, my browser is loading all CSS contents from the server each time i visit the page.
Browsers should get the contents from server only if the CSS code is changed on server side. If the css code is not changed, browser will use the css code from the browser cache.
I cannot use any PHP function which is not allowed in Server Safe Mode.
Is it possible? How can i achieve this?
You cannot force a client to revalidate its cache so easily.
Setting a variable query string to its resource won't play well with proxies, but seems to suffice with browsers. Browsers do tend to only redownload the css file if there's a query string change.
<link rel="stylesheet" type="text/css" href="/get_css.php?v=1.2.3">
Potentially, you could play with the naming of the CSS, such as add numbers, but this isn't a great alternative.
You cannot control browser behaviour from PHP, but you can use HTTP codes to tell the browser something.
If the CSS is not changed, just reply with a 304 Not Modified response code:
if ($css_has_not_changed && $browser_has_a_copy) {
http_response_code(304);
} else {
// regenerate CSS
}
This way, the browser will ask for the document (which you cannot control), but you tell him to use the cached copy.
Of course this needs testing, as I have now idea how it will work 'the first time' a browser requests the file (perhaps the request headers can tell you more). A quick firebug test reveals that Firefox requests Cache-Control: no-cache when it is requesting a fresh copy, and Cache-Control: max-age=0 when it has cache.
add normal GET parameter when you including get_css.php like so
<link rel="stylesheet" type="text/css" href="get_css.php?v=1">
Browser will think that it is new link and will load it again.
and in get_css.php use this to make browser cache data
<?php
header("Content-type: text/css");
header('Cache-Control: public');
header('Expires: ' . gmdate('D, d M Y H:i:s', strtotime('+1 year')) . ' GMT');
ob_start("ob_gzhandler");
//echo css here
The browser wants to cache your document by default, but you have to give it enough info to make that possible. One fairly easy way is to send the Last-Modified header, containing the date/time at which your script was last changed. You'll also need to handle the browser's "revalidation" request correctly by checking the incoming Last-Modified date, comparing it to the actual modified date of your script, and returning a 304 Not Modified response (with an empty response body), if the file is unchanged.
It's also a good idea to be sure that your server isn't "magically" sending any other "no-cache" directives. The easiest way to do this is to send a Cache-Control directive that tells the browser exactly what behavior you expect.
Here is a quick explanation of each Cache-Control option.
Something like the following should do the trick:
<?php
// this must be at the top of your file, no content can be output before it
$modified = filemtime(__FILE__);
if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
$if_modified_since=strtotime($_SERVER["HTTP_IF_MODIFIED_SINCE"]);
if( $modified > $if_modified_since ) {
header('HTTP/1.0 304 Not Modified');
exit();
}
}
header('Cache-Control: must-revalidate');
header('Last-Modified: '.date("r",$modified));
// ... and the rest of your file goes here...
The above example was based heavily on the example, and writeup found here.

javascript file not being cached?

I'm trying to optimize my web application and unfortunately have ended up with a javascript file size of around 450K - that too after compressing [it would take a while for me to redo the javascripting but until then I have to go live] - I initially had made a number of small javascript libraries to work upon. And what I do is I have a php file which includes all the javascript files and then I included my php file as below:
<script language="js/js.php"></script>
The thing is that I was hoping that my file would be cached upon the first load but it seems every time I refresh the page or come back to it the file is reloaded from the server - I checked this using firebug. Is there anything else that I must add to ensure that my file is cached on the user end.. or am I misunderstanding the idea of a cache here?
You'll need to set some headers in php to ensure the file is cached.
At the top of js.php put:
ob_start("ob_gzhandler");
$expires = 2678400; // 1 month in seconds
header("Pragma: public");
header("Cache-Control: maxage=".$expires);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$expires) . ' GMT');
That will add both basic caching + gzip compression on the fly.
Why not to leave it .js file and let web-server take care of caching?
Compression is not the thing you really need but Conditional Get is

Combining multiple CSS files

Right now I use a PHP script to pull together multiple CSS files into one script and then output them with a content-type of text/css.
The problem them with this is the browser wont cache the file.
Is there a better way of doing this?
Thanks
If you have to serve the CSS via PHP, you can force a cache header to be emitted, so the browser can cache the output if it so desires:
<?php
header('Cache-control: max-age=3600'); // cache for at least 1 hour
header('Content-type: text/css');
readfile('css1.css');
readfile('css2.css');
etc...
Why don't you just use #import in a global css file and link that into your html file?
see: http://www.cssnewbie.com/css-import-rule/
"Cascading style sheets" are so called before CSS files may include others. You can also specify several CSS files in your HTML file (using LINK) instead of including them inline.
Use these facilities and let your web server take care of sending the appropriate headers for client-side caching an handling of conditional HTTP requests.
I use the code posted bellow.
It follows Google's page speed recommendations.
Do notice that readfile is faster that include so should be used.
<?php
#$off = 0; # Set to a reasonable value later, say 3600 (1h);
$off = 604800; # Set to 1 week cache as suggested by google
$last_modified_time = filemtime('csscompressor.php');
$etag = md5_file('csscompressor.php');
ob_start("ob_gzhandler");
ob_start("compress");
header('Content-type: text/css; charset="utf-8"', true);
header("Cache-Control: private, x-gzip-ok=''");
header("Last-Modified: ".gmdate("D, d M Y H:i:s", $last_modified_time)." GMT");
header("Etag: $etag");
header("Expires: " . gmdate("D, d M Y H:i:s", time() + $off) . " GMT");
// load css files
readfile("global.css");
readfile('jquery-theme.css');
// ...
?>
You should also serve all CSS and JAVASCRIPT pages like this:
<script src="http://example.com/myjavascript.js?v=<?=$version=?>" ></script>
The $version variable is controlled by you. It should be set in a site-wide config file. Every time you push an update live you can just change the version on one place and everyone seeing the new content will just push it and not depend on cache.

Would dynamically created JavaScript files be cached?

So my application uses a LOT of js files. thats a lot of http requests. I decided to combine them dynamically at the server in packs of 3-4 files clubbed by functionality.
My client side request is:
...script type="text/javascript" src="http://mydomain.com/core-js.php" ...
My server side does:
--core-js.php--
header("Content-type: application/x-javascript");
include_once('file1.js');
include_once('file2.js');
include_once('file3.js');
include_once('file4.js');
I am setting a far future expire header on core-js.php. My question is, would core-js.php be cached at the client side? If it would be, could someone please explain how?
Thanks!
The client doesn't know or care that what got sent to it was satisfied by bringing together several files server-side. The client should cache it if the caching headers are correct. You'll want to check them carefully to be sure that your PHP install isn't sending other headers that conflict (Firefox+Firebug is good for this), since PHP pages tend to be used for dynamic stuff where you don't want caching.
Please see: http://www.jonasjohn.de/snippets/php/caching.htm, you have to check the incoming request headers to send the right response.
You can do something like below:
<?php
ob_start();
$filemtimes = array();
foreach(array('file1.js','file2.js') as $file)
{
include_once($file);
$filemtimes[]= filemtime($file);
}
$date = gmdate('D, d M Y H:i:s', max($filemtimes)).' GMT';
$length = ob_get_length();
$etag = md5($date.$lengte);
$headers = apache_request_headers();
if(!empty($headers['If-None-Match']) && !empty($headers['If-Modified-Since']))
{
if
(
$etag == md5($headers['If-Modified-Since'].$length)
)
{
ob_end_clean();
header("Content-type: application/x-javascript");
header('Last-Modified: '.$date."\r\n");
header('Expires: '.gmdate('D, d M Y H:i:s', (time()+3600)).' GMT'."\r\n");
header('Cache-Control: max-age=3600'."\r\n");
header('ETag: '.$headers['If-None-Match']."\r\n");
header('HTTP/1.1 304 Not Modified');
header('Connection: close');
exit;
}
}
header("Content-type: application/x-javascript");
header('Last-Modified: '.$date."\r\n");
header('Expires: '.gmdate('D, d M Y H:i:s', (time()+3600)).' GMT'."\r\n");
header('Cache-Control: max-age=3600'."\r\n");
header('ETag: '.$headers['If-None-Match']."\r\n");
header('Content-Length: '.$length."\r\n");
header('Accept-Ranges: bytes'."\r\n");
ob_end_flush();
exit;
?>
Your script will be cached. No data is send to the client. Server side the includes and modification calculation is done for every request. Maybe store etag and modification time in session or cookie to do the check before includes and calculations. Or check filesizes instead of includes.
The vast majority of browsers and caching proxies will respect the expiry header (if set).
Yes it will. The client doesn't know that the js file he's requesting is a bunch of other files chunked into one, he's just seeing one js file, the one he requested and it's telling him to cache it, core-js.php. As long as you don't change the name of the file (core-js.php) there should be no problem.
On another note, you should take a look at Minify http://code.google.com/p/minify/
You can merge and cache not only js but css in groups, basically what you're doing. I've been using it for a while with no problems and it's pretty nice.
Yes, but it's complicated. PHP by default adds a bunch of headers which prevent caching. You'll have to make sure you're removing all of them. Also, does your PHP script understand If-Modified-Since and If-None-Match headers? Do you even generate Last-Modified and ETag headers in the first place? This is tricky to get right, and why bother, when your webserver has all that built into it?
I'd do this differently. Make the request to core.js, not core.php. Of course, core.js does not exist, so .htaccess catches the request and directs it to index.php. Now index.php generates the required javascript and serves it to the client. It also creates the file core.js. Future requests for core.js will be handled by Apache as normal for static files, without going near PHP.
And if you want to be able to update the javascript, you can instead use URLs of the form last-modified-timestap.core.js. Changing the timestamp in the HTML will generate a new javascript file on the first request.
I do this for dynamically created CSS (the designer can edit CSS in the administration panel, with values saved into the database), and it works well.

Categories