HTML5 Cache -- Is it possible to have several distinct caches for a single URL?

Asked 20/10, 2011 at 23:39 Answered 31/8, 2014 at 2:59

Every URL can be linked to a single cache manifest. But I want several cache manifests linked to a same URL. Here is the reason:

Some files I want to be cached are rarely updated and large. So everytime the cache gets updated these large files get re-downloaded even though they may not have been changed. So I want to split up the cache. One cache for theses rarely updated large files and another cache for the often updated light files.

Do you guys have any idea how to split up an HTML5 cache?

Antitrust answered 20/10, 2011 at 23:39 Comment(0)

The most efficient way is:

a) Use far-future expiration date (max-age) on all resources mentioned in manifest's CACHE section and add timestamp suffix to each file in the CACHE section, e.g.:

CACHE:
menu_1355817388000.js
toolbar_1355817389100.js

b) When any of the above files change on the server, regen/update manifest to change the timestamp. Only the file with the modified timestamp will get downloaded next time. Mission accomplished.

Note: Reload the page twice in the browser, as on the first refresh browser downloads just the manifest and uses old cached resources to paint the page. This is done to speed up displaying the page (there are tricks to handle this issue of double refresh, but they are outside the scope of your question)

See more info in this long but best article I ever seen on appcache.

Christie answered 20/12, 2012 at 3:10 Comment(3)

Awesome reference article. Gave me a lot of deeper insight. +1 for that, I recommend it to everybody who reads this. – Subsocial 28/2, 2013 at 20:3

Is there a way to regen/update manifest to change the timestamp programmatically? – Theocritus 18/2, 2015 at 4:1

@KimHonoridez not sure what you mean. The standard procedure is to modify a version in the comment in the manifest. – Christie 19/2, 2015 at 6:43

Use an iframe

Your page's cache manifest would include the light files and the cache manifest of an iframe loaded by this page would include the large files

On chrome the iframe's application cache will also be used for the page. I didn't tested this method on other browsers yet.

see a live example at http://www.timer-tab.com and if you are using chrome see its split up cache at chrome://appcache-internals/

Antitrust answered 15/11, 2011 at 16:29 Comment(0)

When the manifest file is changed and the files of the application cache are downloaded again, the normal HTTP caching rules still apply. This means that if you set the correct HTTP caching headers for these large files, you'll get a 304 so these files are not downloaded again. So it's not necessary to split the application cache.

Batsheva answered 22/7, 2012 at 12:29 Comment(0)

Maybe an answer but I'd more like to shed some light on my findings as a I troubleshoot my own webapp.

I've discovered that I can use 2 iframes (manifest_framework) and (manifest_media) to load the manifests, but i'm still not exactly clear how they are targetted, but I had limited success.

manifest_framework:

CACHE MANIFEST

CACHE:
appdata.ini
dialog.png
jquery.min.js
login.htm
login.js
manifest.appcache.js

NETWORK:
*

FALLBACK:

manifest_media:

CACHE MANIFEST

CACHE:
manifest_fwk.php
od/audio_track_1_1.m4a
od/audio_track_1_2.m4a
od/audio_track_1_3.m4a
od/audio_track_1_4.m4a
od/video_1.mp4
od/video_2.mp4
od/video_3.mp4

NETWORK:
*

FALLBACK:
./ webapp.php

./index.php is the page the 'landing page' which itself isn't cached but falls back to webapp.php when offline.

What I don't understand is how these link to the webapp.php page. I am finding I can only get access to one or the other manifests cache. The above works in mobile safari, the media would be cached, and image but not necessarily the JS or images in the framework manifest.

Anyone have more examples where multiple manifests are referenced from the one URL/page?

Turkish answered 14/7, 2014 at 12:28 Comment(0)

The W3C working group has abandoned the file system api, so it SHOULD NOT BE USED anymore.

We'll likely see it fall off the next version of Chrome.

http://www.w3.org/TR/file-system-api/

Turkish answered 31/8, 2014 at 2:59 Comment(0)

-1

CACHE MANIFEST

# This is a comment.
# Cache manifest version 0.0.1
# If you change the version number in this comment,
# the cache manifest is no longer byte-for-byte
# identical.

demoimages/mypic.jpg
demoimages/yourpic.jpg
demoimages/ourpic.jpg
sr/scroll.js

NETWORK:
# All URLs that start with the following lines
# are whitelisted.
# whitelisted items are needed to help the site function, you could put regularly
# changing items here
http://example.com/examplepath/
http://www.example.org/otherexamplepath/

CACHE:
# Additional items to cache.
demoimages/allpics.jpg

FALLBACK:
demoimages/currentImg.jpg images/stockImage.jpg`

Prepossession answered 21/10, 2011 at 0:5 Comment(1)

for offline capabilities I also want to cache the regularly changing items which wouldn't be cached with your solution. thanks though – Antitrust 21/10, 2011 at 0:10

-1

If the Iframe trick does not work, use the HTML5 FileSystem API

See http://updates.html5rocks.com/2012/04/Taking-an-Entire-Page-Offline-using-the-HTML5-FileSystem-API

Antitrust answered 29/4, 2012 at 16:29 Comment(1)

This is currently only supported by Google Chrome (to save you reading the whole article only to realise this afterwards - like I did). – Bahner 29/11, 2012 at 23:10

Recommended topics

Hot tags