HTTP Caching URLs with Query String

Question

I am currently storing svg code in arrays in a php file that, in short, I am then referencing to throughout the site to retrieve the desired image.

The file looks something like this:

<?php
$svg_ticons = array(...);
$svg_icons = array(...);
$svg_inputs = array(
    'checkbox_0' => '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve"><symbol id="Checkbox_Blank" viewBox="-7.5 -7.5 15 15"><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M-4.81 6.97h9.63c1.19 0 2.16-0.97 2.16-2.16v-9.63c0-1.19-0.97-2.16-2.16-2.16H-4.81c-1.19 0-2.16 0.97-2.16 2.16v9.63C-6.98 6-6 6.97-4.81 6.97L-4.81 6.97z"/><path fill="#333333" d="M4.82-7.5h-9.63c-1.48 0-2.68 1.21-2.68 2.69v9.63c0 1.48 1.2 2.69 2.68 2.69h9.63c1.48 0 2.68-1.21 2.68-2.69V-4.81C7.5-6.29 6.3-7.5 4.82-7.5zM-4.82 6.45c-0.9 0-1.64-0.73-1.64-1.64V-4.81c0-0.9 0.74-1.64 1.64-1.64h9.63c0.9 0 1.64 0.73 1.64 1.64v9.63c0 0.9-0.74 1.64-1.64 1.64H-4.82z"/></symbol><use xlink:href="#Checkbox_Blank" width="15" height="15" x="-7.5" y="-7.5" transform="matrix(4 0 0 -4 29.9997253 29.9989338)" overflow="visible"/></svg>'
);

$svgall = $svg_ticons+$svg_icons+$svg_inputs;
if(array_pop((explode("/", $_SERVER['SCRIPT_FILENAME']))) == array_pop((explode("/", __FILE__)))){
    if($reqsvg = $_GET["r"]?:false){header("Content-type: image/svg+xml"); echo $svgall[$reqsvg]; exit();}
}
?>

So the when I call to these images, let us say, as a background-image, it looks something like this:

background-image:url(DOMAIN/images/svg.php?r=checkbox_0);

Unfortunately, these 'images' are not being cached, which is causing a very undesirable delay time upon page load. So my question is: How can I cache from urls with query string? (.htaccess solution is prefered.)

Side Note: I am aware of this post. However, the answer marked is not my solution.

Edit: I am not simply asking how to enable caching. I am already aware of how to do that. Parts of my site are caching beautifully. I am looking to specifically cache from urls with a query string.

Answer 1

It was recommended that I put headers in my php file (php_nub_qq recommended a function & SuperJer recommended header('Expires: ' . gmdate('D, d M Y H:i:s', strtotime('+1 hours')) . ' GMT');).

I was fairly certain that putting headers in this file was doing nothing for me & SuperJer's code was breaking my images, though after messing with it the next morning with a fresh mind I finally figured out why.

This is the code I entered:

header("Expires: ".gmdate("%D, %d %M %Y %H:%i:%s", strtotime("+30 days"))."GMT");

However, I forgot in order to call strtotime in my site, I must first set date_default_timezone_set();

So the end result was:

date_default_timezone_set("America/Los_Angeles");
header("Expires: ".gmdate("%D, %d %M %Y %H:%i:%s", strtotime("+30 days"))."GMT");

However, upon further examination of Chrome's Network Developer Tool, I realized that SuperJer's initial suspicion of it being my browser setting was correct. My file had been caching all along, I'd just had "Disable Cache" checked in my developer tools. (Guess I was a bit more exhausted than I thought, because I could have sworn I checked that.)

Summary: If your query string is not dynamic & other things (such as images) cache on your site; close your eyes, take a nice long relaxing breath, & check all of your browser setting & do not forget your Dev Tool settings.

Answer 2

What you want to do, if I understand correctly, is not possible without some awful hacks I can't even think of and would advise against anyway.

The way caching works is, I believe, in a key - value storage system, where the key is the URI + the query string. So the browser will save your image with a certain key, when there is an image requested with the same key the browser will use the cached version if it matches expiration criteria or will send a request to see if the file has been modified.

In your case it seems like the r=checkbox_0 part of the query string is dynamic, meaning it changes it's value every time you refresh the page. You cannot cache this for the reason I mentioned above. If you're getting a different query string each time, the browser will eventually end up caching a separate image every time.

IMO the best you can do is to use a static value for the r parameter, if that is possible.

Additionally, if you could cache images regardless of the query string then how would cache busting work :P

EDIT:

Here's the caching function, it takes in the time you want the cache to be active before expiring in seconds.

function cache($sec) {
    if ($sec > 0) {
        header('Cache-Control: must-revalidate, max-age=' . (int)$sec);
        header('Pragma: cache');
        header('Expires: ' . str_replace('+0000', 'GMT', gmdate('r', time() + $sec)));
    } else {
        header('Cache-Control: no-cache, no-store, must-revalidate'); // HTTP 1.1.
        header('Pragma: no-cache'); // HTTP 1.0.
        header('Expires: 0'); // Proxies.
    }
}