How to make a sencha touch app offline usable with the html5 cache manifest!

i made my test sencha touch app “remember the card” a memory like browser game offline usable and want to share the steps how to do this in this little “How to”.

If you need general information about the cache manifest take a look on the html5 working draft.

Do the following steps to make your app offline working.

1. create your cache manifest file
create a file yourappname.manifest in your application root. In the file enter all files you have to cache to make your app working offline.

in my case my rememberthecard.manifest file looks like this:

CACHE MANIFEST
#rev5
index.html
sencha-touch-beta-0.90/resources/css/ext-touch.css
css/memory.css
sencha-touch-beta-0.90/ext-touch-debug.js
js/memory.all.js
images/card-01.jpg
images/card-02.jpg
images/card-03.jpg
images/card-04.jpg
images/card-05.jpg
images/card-06.jpg
images/card-07.jpg
images/card-08.jpg
images/cover-leaf.jpg
tablet_startup.png
phone_startup.png

see all options you can use in the .manifest file here.

2. Add your manifest to your application .html file header

<!doctype html>
<html manifest="yourappname.manifest">

3. Add type manifest to your apache config
Add following entry to your apache config (for example apache.conf or vhost.conf )

AddType text/cache-manifest .manifest

4. Add .htaccess with expire configuration for your *.manifest file to your app root

ExpiresActive On
ExpiresDefault "access"

5. Thats it
Now try if everything work, open you app on your mobile device.
Save the link to you homescreen.
Now turn off all your networkconnections and open your app from your homescreen.