I'm creating an app with a number of videos/large images that will use appcache to handle the preloading of them.
Is there a way for me to control what order those assets get loaded? For example, I would like to load the big image/video on the homepage before the ones on the sub pages. I have tried listing the files in the order I want them to load in the appcache manifest but that didn't seem to make a difference.
It doesn't matter what order they're downloaded in. Appcache operations are atomic. Nothing is available from the appcache for a particular manifest file until everything is available from the appcache for that manifest.
If you want to break up the download then, as #PaulGrime suggests, have multiple manifest files. You will need to have the user visit the host page for each manifest but you should be able to manage that with a hidden iframe or something.
Related
My question is rather simple. Is there a way in the cache manifest file (or In the html) to tell iPhone, iPad or other never to cache specific files?
I have a made a small webpage that also works as a web app and there is some of the page that never should be cached.
Yes, you can list the files in the Network section to tell the browser to never save the files.Lines from the book diveintohtml5
The line marked NETWORK: is the beginning of the “online whitelist” section. Resources in this section are never cached and are not available offline.
For device or browser specific manifest, you can not do anything from JavaScript side. You have to do additional server side detection for that.
The files listed in the .mf file are the same files i am trying to load when the page first runs. Does having a manifest attribute defer processing of the rest of the document until the appcache loads?
No. On the very first load the cache gets built in the background, using the same files that where just downloaded, provided they have proper cache settings. E.g. If you have foo.css with long cache headers in your HTML page and the manifest, the browser will:
Load and render the page.
Look at the manifest.
Load foo.css from browser cache to appcache.
BUT: Appcache will however result in a FOUC (brief white page on reload), even if online and the page/app was made well enough so far to show smooth reloads.
With AppCache, the browser loads the document and its associated resources directly from the cache, without accessing the network, so this should load just as fast if not faster.
I want to cache only a few files like JavaScript and CSS, font files and image sprites.
Is it better to add a manifest file for the files or should I let the browser do the cache?
If it's better with manifest, can I still leave the pages inaccessible if a user has no network connection? How?
I don't want this website to work offline, I just want a faster page load on secondary pages.
No, the page you use to reference the manifest file will itself always be cached. See:
HTML5 cache downloads root everytime
HTML5 cache manifest no cache for html file itself
So you will always have at least one page which is available offline. However this can be a page which is otherwise not normally accessed, and you can reference it in an iframe from your online pages.
I need to show an HTML page in an UIWebView under Retina and non-retina displays.
Moreover I'd like to use the cache manifest functionality from HTML5. But I want to have two different cache manifest files with links to Retina and non-retina images.
Can I use any logical statements for a cache manifest? Or can I change manifests files dynamically?
You could have an index.html that uses some simple javascript to check the user-agent, and then do a redirect to a index-nonretina.html and index-retina.html. Each of those files could contain a unique cache manifest file.
You could also create a dynamic cache manifest file on the server side using PHP, Node or whatever. Check the user agent string in the request object and change what you send back accordingly. Just make sure you set the MIME type to "text/cache-manifest".
Greg
I have got a HTML manifest with the lines:
CACHE MANIFEST
images/foo.png
Also, the page includes e.g. jQuery and many other ressources. All of them are not loaded, except the ones named in the manifest (here: images/foo.png). How can i tell the browser to load all files but the ones explicitly defined in the manifest?
Thanks
HTML5 Cache Manifest: Fallback section & Network *
see the NETWORK piece, which prevents caching (also helpful in managing dynamic pages like PHP, etc)