Mobile web app and offline access to audio files

Question

Is it possible to cache audio files for an offline access in a mobile web app using an HTML5 cache manifest ? I also don't understand how size limitations works. (I read 5MB limit for iOS) I don't find resources for that or best practices.

Thanks for your help

Answer 1

Yep - all files that are listed in the AppCache are cached by the browser, no matter if they're HTML files, JavaScript, or audio files. As long as they're explictly mentioned in the CACHE section, they'll be available offline.

For a good AppCache tutorial, check out http://www.html5rocks.com/en/tutorials/appcache/beginner/, which walks you through everything you should need.

The size limit prevents you from storing too much content on a users computer. In most cases, this isn't a problem if you're just storing HTML, CSS, JavaScript and some images, but in your case, if you're storing music, you potentially will hit that limit quickly. Most browsers limit you to storing a maximum of 5 megs (for all content), so you'll need to be mindful of that.

Chrome has a great set of tools for debugging appcache, as you're developing your site, open the Developer Tools and watch the console to see what happens.

Answer 2

Caching of audio files via a cache manifest file still does not work on Android phones up to version 5.1. I cannot speak for Android 6 or iPhones, iPads, since I don't have such devices. But I tried it on Android 5.1 and Android 3 with mp3 files with a size of only 2 Kb and they were not cached on these phones whereas 200 Kb js files were cached.

The current solution seems to be to encode the mp3 files with base 64 and to put it into js files which can be cached. A nice description of that can be found on http://grinninggecko.com/2011/04/09/html5-offline-audio/.