1

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.

Alexandre Khoury
  • 3,896
  • 5
  • 37
  • 58

2 Answers2

2

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
Michael
  • 577
  • 6
  • 13
  • The `.htaccess` file would be used to route requests for `cache.manifest` to a script that generates a manifest based on the user-agent. You could also use the `.htaccess` to route to different `cache.manifest` files based on the user agent. – Michael Jul 25 '12 at 20:23
0

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.

Greg Wilson
  • 2,380
  • 2
  • 15
  • 14
  • Yes. Because each time you quit the app and open it, the startup image will appear for 1 or 2 seconds. (After a lot of tests, I discovered that if anything that could be used is not in the manifest, the app will display `No internet connection` then quit the app). – Alexandre Khoury Aug 13 '12 at 05:08
  • The splash image is saved as part of the web app when you save it to the desktop. In my app, I don't have the images in the cache manifest, but they display when the device is offline just fine. The splash images and icon images are part of the 'save to home screen' process and aren't needed in the manifest (at least based on my testing) ;) – Greg Wilson Aug 13 '12 at 15:01