web-applicationscache-manifestmemory-optimization

Cache only the necessary images in webapps


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.


Solution

  • 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