PDA

View Full Version : Making Sencha work in offline



tomalex0
20 Jul 2010, 5:26 AM
Hi,

I have tried to make a HTML file work in offline mode and it worked fine. Same method i have opted for sencha touch also but it doesn't work for me . Could anyone provide me a simple example off webapp working in offline more using sencha.

I'm trying on my side also, if i get break through i will let everyone know

Thanks

nosarious
20 Jul 2010, 9:02 AM
Searching for Cache Manifest should help get you started: http://www.sencha.com/forum/search.php?searchid=448534

The memory game is also a great example of this kind of work, and the author has a link to a walk through. http://www.sencha.com/forum/showthread.php?102054-SOLVED-How-make-a-sencha-touch-app-offline-usable-with-html5-cache-manifest&highlight=cache+manifest

I'm still working on it for myself, but that should get you started.

tomalex0
21 Jul 2010, 9:34 AM
Hi,

I have managed to make a small working demo of manifest with sencha. I have referred

http://www.sencha.com/forum/showthread.php?102054-SOLVED-How-make-a-sencha-touch-app-offline-usable-with-html5-cache-manifest&highlight=cache+manifest.

But still some problem exists in this regarding image loading.

I have not mentioned an image in manifest file , so at first image is shown properly and on next refresh the image is not seen. Seems the page is loaded from cache thereafter.

Do we have to update cache or anything else ?

Thanks for your reply

nosarious
21 Jul 2010, 2:06 PM
your htaccess file is named wrong. It should be .htaccess

Even after making the change and adding in the phone_startup.png I could not get it to work.

I ran the audit from the developer menu and found that your htaccess script was not providing proper caching for manifest and loading. I changed the script to:

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

which removed those errors.

The program still does not work properly when offline using my ipod touch. However, that may be because of the two ext-touch files (javascript and css) The memory game links directly to those two.


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

His cache manifest also links directly to those:

CACHE MANIFEST
#rev5

sencha-touch-beta-0.90/resources/css/ext-touch.css
sencha-touch-beta-0.90/ext-touch-debug.js


Your .htaccess file does not cover anything outside of the folder it is in. You may want to include those files in the folder for your test at this point, to ensure everything is running properly as a test.

nosarious
21 Jul 2010, 10:46 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, although several other sites say it has to be in a PHP file for Apache. This is my file now, and it finally works... try it on yours.


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.

tomalex0
21 Jul 2010, 11:02 PM
Hi, im aware about htaccess file, but just kept as text file.

Actually caching was working for me , but as i said i have not mentioned an image in manifest files, so at first time it will show and when i reload its not. It seems the files are loaded from cache only even if we are in online mode?.

Do we have to clear cache to get latest files mentioned in manifest file.

Also im not aware about how to check if caching is working properly or not. I meant the things are mentioned in Audit in Web developer .

Could you also provide to demo of manifest to check what all i have missed.

nosarious
22 Jul 2010, 12:00 AM
CACHE MANIFEST
#rev12
index.html
icon.png
tablet_startup.png
phone_startup.png
loadings.png
ext-touch-debug.js
ext-touch-debug.css


I added the extra file. I wasn't sure about what you meant about 'if I reload" because it would never work properly for myself if an image is missing. It will just fail in a nice glorious fashion. Maybe 'reload' isn't the right word? If you are using ios4, did you mean you had it running in the background and brought it back out to the foreground as the active app?

BTW I found out yesterday that if you have files in the manifest and do not use them, they are ignored. This is important if you have different sizes of images, make the javascript so it sniffs the most appropriate size to load and only loads the proper size. With all files mentioned in the manifest it will only retain the ones that are active at the time the webapp is saved as a bookmark. That's all sorts of cool.

tomalex0
22 Jul 2010, 1:04 AM
I meant after refreshing the page, the image that is not mentioned in manifest is not loaded.

So we have to mention all images inside manifest file if we want to show those in offline and online mode.

I thought in online mode it would have fetched images from server side or someway it sync.

Most time i tested in chrome, manifest is working properly and it acts somewhat weird in ipad and iphone.

Thanks for your help.

nosarious
22 Jul 2010, 2:14 AM
Okay. this solved the problem with a misbehaving css file that wasn't refreshing properly on the laptop.

Manifest files with incomplete image lists means broken links if the page is refreshed with no internet access. I have confirmed this is occurring on the ipod touch, now that the manifest file is being seen as the proper mime type.

but why would one not include an image filename? Unless you mean changes to the files that get cached?

tomalex0
22 Jul 2010, 11:16 AM
hi thanks for your reply and information.