PDA

View Full Version : [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! (http://www.sencha.com/forum/showthread.php?102054-How-make-a-sencha-touch-app-offline-usable-with-html5-cache-manifest&p=478955#post478955)

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



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


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/current-work/multipage/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:


<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" (http://nils-dehl.de/m) 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 (http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html).

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 (http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html).

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


<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.


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