Cache only the necessary images in webapps

Question

I have this in the head section of index.php:

<link rel="apple-touch-startup-image" href="images/screenLD.png" media="(device-width:320px)" /><!--iPod/iPhone Portrait LD 320x460-->
<link rel="apple-touch-startup-image" href="images/screenHD.png" media="(device-width:320px)and(-webkit-device-pixel-ratio:2)" /><!--iPod/iPhone Portrait HD 640x920-->
<link rel="apple-touch-startup-image" href="images/screenPortraitLD.png" media="(device-width:768px)and(orientation:portrait)" /><!--iPad Portrait LD 768x1004-->
<link rel="apple-touch-startup-image" href="images/screenLandscapeLD.png" media="(device-width:768px)and(orientation:landscape)" /><!--iPad Landscape LD 748x1024-->
<link rel="apple-touch-startup-image" href="images/screenPortraitHD.png" media="(device-width:1536px)and(orientation:portrait)and(-webkit-device-pixel-ratio:2)" /><!--iPad Portrait HD 1536x2008-->
<link rel="apple-touch-startup-image" href="images/screenLandscapeHD.png" media="(device-width:1536px)and(orientation:landscape)and(-webkit-device-pixel-ratio:2)" /><!--iPad Landscape HD 1496x2048-->

And this in cache.manifest:

CACHE MANIFEST

index.php

images/screenLD.png
images/screenHD.png
images/screenPortraitLD.png
images/screenLandscapeLD.png
images/screenPortraitHD.png
images/screenLandscapeHD.png

But we can easily understand that an iPhone user will need to cache 5 other useless big images.

How can I do so that he only caches the images he will need?

---

^{BTW, for those who want splash screen code that work on every apple device, mine is perfect.}

Answer 1

Using a python/php script, check the User-Agent string of the device. Then serve different versions of cache.manifest with the cache listings necessary for a specific device. If the User-Agent string is malformed or unknown, then serve the one above that has everything.

Example:

1. Create a script, for example: cache_manifest.php
2. Sanitize the $_SERVER['HTTP_USER_AGENT']
3. Look for the device's name from the user agent string.
4. Output (via 'echo') the LD/HD files for the given device. A user agent string will not allow you to accurately determine whether the device has a retina display.
5. Redirect traffic via RewriteRule from /cache.manifest to cache_manifest.php

Htaccess file would look like:

RewriteEngine On
RewriteRule ^cache\.manifest$ /cache_manifest.php [L]

An iPhone user agent string will look like this:

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5

An iPad user agent string will look like this:

Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5

Answer 2

You actually don't need to cache the images used in apple-touch-startup-image tags. The device will download the needed image the first time it runs (before it caches anything). By the time they are cached, they aren't needed anymore.