[SOLVED] How make a sencha touch app offline usable with html5 cache manifest?

**mrsunshine** · 19 Jun 2010 6:11 AM

How make a sencha touch app offline usable with html5 cache manifest?

This questions is SOLVED! See following How To for a complete answer!
How to make a sencha touch app offline usable with the html5 cache manifest!

i looked at the solitaire example and extended my "remember the card" (http://nils-dehl.de/m) app to use a cache manifest.

i added a manifest, but if i save a shortcut to my iPad homescreen and switch the iPad to fly mode and open my app, it still tryes to access the server.

Thats my index.html

HTML Code:

<!doctype html>
<html manifest="rememberthecard.manifest">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Remember the card</title>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <link rel="stylesheet" href="sencha-touch-beta-0.90/resources/css/ext-touch.css" type="text/css">
        <link rel="stylesheet" href="css/memory.css" type="text/css">
        <script type="text/javascript" src="sencha-touch-beta-0.90/ext-touch-debug.js"></script>
        <script type="text/javascript" src="js/memory.all.js"></script>
    </head>
<body>
</body>
</html>

and my rememberthecard.manifest file:

PHP Code:


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

I read the: http://www.whatwg.org/specs/web-apps...e/offline.html
But i did not get it work.

Did i miss something? Every hint is welcome.

Nils

**Jamie Avins** · 19 Jun 2010 8:01 AM

You also need to make sure your webserver is passing the proper mime information and never expired the cache manifest.

In apache.config: AddType text/cache-manifest .manifest

In our site for solitaire we put solitaire in the /app directory so in the root we have a .htaccess file:

Code:

<Files app/solitaire.manifest>
	ExpiresActive On
	ExpiresDefault "access"
</Files>

**mrsunshine** · 19 Jun 2010 8:18 AM

Thxs, i think that ll fix my issue, I'll try it later

**mrsunshine** · 20 Jun 2010 4:24 AM

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:

PHP Code:


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

PHP Code:


<!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 )

PHP Code:


AddType text/cache-manifest .manifest

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

PHP Code:


<Files yourappname.manifest>

    ExpiresActive On

    ExpiresDefault "access"

</Files>

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.

It should now work offline.

Hope this helps

**mkroll** · 21 Jul 2010 3:58 AM

Hi,
I tried all the steps and after adding the missing "expires" module to my apache2 configuration I was able to get rid of the App Error 500 caused by yhe .htaccess file.

Bu the caching does not work.

I added the manifest attribute to the html tag, added a cache.manifest file, added the type to the apache config and added the .htaccess file to my app dir.

Any ideas how to debug this issue?

Regards,
Michael.

**nosarious** · 21 Jul 2010 10:44 PM

After a lot of experimentation I determined that the mime type for manifest wasn't set up on my server. After some more research I found that it's something you can add to the .htaccess file. This is my file now, and it finally works.

Code:

AddType text/cache-manifest .manifest  

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|html|manifest)$">
Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2015 20:00:00 GMT"
</FilesMatch>

<Files sharamag.manifest>
	ExpiresActive On
	ExpiresDefault "access"
</Files>

this may be what is missing on your server as well.

**jochem kuun** · 28 Mar 2011 2:40 AM

Thanks for this great article!

**dash74** · 21 Jun 2012 7:45 AM

Hi all,

and what if the app is standalone and lives into the device?
I need to cache libraries from Internet...

David

[SOLVED] How make a sencha touch app offline usable with html5 cache manifest?

Thread Tools

Search Thread

Display

[SOLVED] How make a sencha touch app offline usable with html5 cache manifest?

[SOLVED] How make a sencha touch app offline usable with html5 cache manifest?

Similar Threads

Does Sencha Touch will also be ported to GXT?

Sencha Touch - DZone Article

Gears, Direct, easy offline cache

Help: make app to expand as needed in BorderLayout

Is Treeview nearly usable?