My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
OfflineSupport  
Quick tips on making jQTouch offline-capable
Updated Sep 29, 2009 by davidcol...@gmail.com

Offline Support

Using HTML5's Cache Manifest feature, it is possible to make jQTouch sites/apps run offline.

The Basics

First, create a Cache Manifest file and place in the root of your directory. For this example, we'll call it sample.manifest - though you could hypothetically call it whatever you want. Currently, Cache Manifest files must list every resource used on the page to function properly. There are several advanced features to dictate which files must be served online, and fallback files for unavailable resources, though these are outside the scope of this document. A sample Cache Manifest file for the main jQTouch demo:

CACHE MANIFEST

demos/main/ajax.html
demos/main/ajax_post.php
demos/main/index.html
demos/main/jqt_startup.png
demos/main/jqtouch.png
jqtouch/jqtouch.min.css
jqtouch/jqtouch.min.js
jqtouch/jquery.1.3.2.min.js
themes/jqt/img/back_button.png
themes/jqt/img/back_button_clicked.png
themes/jqt/img/button.png
themes/jqt/img/button_clicked.png
themes/jqt/img/chevron.png
themes/jqt/img/chevron_circle.png
themes/jqt/img/grayButton.png
themes/jqt/img/loading.gif
themes/jqt/img/on_off.png
themes/jqt/img/rowhead.png
themes/jqt/img/toggle.png
themes/jqt/img/toggleOn.png
themes/jqt/img/toolbar.png
themes/jqt/img/whiteButton.png
themes/jqt/theme.min.css

Also, the manifest must be served with a MIME type of text/cache-mainfest, which you can accomplish on most servers with a .htaccess directive:

AddType text/cache-manifest .manifest

To implement the Cache Manifest, simply reference it in your HTML like this:

<html manifest="sample.manifest">

jQTouch comes with an offline debugger extension, jqt.offline.js. Simply include file this after you include jQTouch and it will log all manifest events to the console. It is recommended to set fullscreen: false when initializing jQTouch, and enabling the console in Settings > Safari > Developer.

Comment by bernard....@gmail.com, Dec 1, 2009

call another page ex: ajax.html seems not to be working in offline mode <a href="ajax.html">GET Example</a> nb: the ajax.html page is declared in the .manifest file

Comment by nimbus.s...@gmail.com, Dec 7, 2009

To dynamically produce the manifest file with PHP.

<?php
$dir = new RecursiveDirectoryIterator(".");
$hashes = "";

header('Content-Type: text/cache-manifest');
echo "CACHE MANIFEST\n";

foreach(new RecursiveIteratorIterator($dir) as $file) {
	if ($file->IsFile() &&
	$file != "./manifest.php" &&
	substr($file->getFilename(), 0, 1) != "." &&
	substr($file, 0, 9) != "./archive" &&
	strpos($file, "/.svn") === false) {
		echo $file . "\n";
		$hashes .= md5_file($file);
	}
}
echo "# Hash: " . md5($hashes) . "\n";
?>

From Building iPhone Apps with HTML, CSS, and JavaScript - Chapter 6. Going Offline by Jonathan Stark.

Comment by samuelhc...@gmail.com, Jan 20, 2010

Is it possible to force the cache manifest to expire? In other words, can I tell the cache manifest to refresh its contents every 14 days (for example)?

Comment by toby.c...@gmail.com, Feb 6, 2010

The only way to expire the cache manifest is to change it's contents. I'd recommend adding a version number into your static filenames (or the directory your static assets are served from). This way, when you deploy a new version of your assets, their name changes, and thus the contents of your manifest changes too. Toby.

Comment by wascarsantiago, Feb 10, 2010

Is possible publish this application from windows. any reference about this?

Comment by project member davidcol...@gmail.com, Feb 10, 2010

It's possible to develop this on Windows, but harder as you can't use the native iPhone Simulator-

Comment by gghan...@gmail.com, Feb 24, 2010

In tomcat instead of

AddType? text/cache-manifest .manifest

put the following in the web.xml

<mime-mapping><!-- manifest -->

<extension>manifest</extension> <mime-type>text/cache-manifest</mime-type>
</mime-mapping>

To test if is handled correct (either in apache or tomcat), go to the file via the web browser:

www.example.com/sample.manifest

If you get a download file dialog, then the mime mapping was configured correctly. If you see the content of the manifest file like a text document, then you need to check your configuration.

Comment by gghan...@gmail.com, Feb 24, 2010

Regarding the offline debugger message:

" There was an unknown error, check your Cache Manifest."

This most likely means that there is a syntax error on your manifest file. Check the the first line is CACHE MANIFEST, no spaces or comments above it. Also try to avoid empty lines.

Another reminder that might save time, is regarding the paths of the files. It is assumed thatis relative. In other words if you have the following file structure:

/images

image.png
/js
app.js
/web
index.html bye.html cache.manifest
/css
style.css

Then in the manifest you should have the following:

--------------Start----- CACHE MANIFEST ../images/image.png ../js/app.js ../css/style.css index.html bye.html

--------------end-----

Since the manifest is in web folder, you have to go up one directory to find the other resources.

Comment by rayd...@gmail.com, Feb 25, 2010

This works for .html and image files. What about .pdf and other files?

Comment by fifiqueq...@gmail.com, Mar 15, 2010

is possible to force offline mode and prompt if the user want to go online ?

Comment by pyronh...@gmail.com, May 2, 2010

Another having problems with ajax get and offline mode. Maybe need to have all in the same HTML, but that sux if there's too much dataz.

Comment by adam%sin...@gtempaccount.com, Jun 13, 2010

Is it possible to reload the page after the cache is updated?

Comment by benedikt...@gmx.de, Jun 16, 2010

Is it possible to have an offline app that runs in fullscreen mode? I noticed that my webapp does not work offline as soon as i set fullscreen to true.

Comment by koliris, Jun 28, 2010

Same as the ajax.html in my application i cannot cache other html but the 1st level "index.html" for example.

Comment by sshish...@gmail.com, Jul 1, 2010

I found to get Ajax and cache to work, add a dynamic javascript timestamp to the link that will be pulled in using Ajax.

e.g.

{{{ var date = new Date(); var time = date.getTime(); $("#divID").html("<a href='ajax.html?"+ time +"'>Ajax Link</a>");

Comment by sim.rom...@gmail.com, Jul 3, 2010

I found that the ajax will work setting up correctly the manifest file, i.e. putting the ajax loaded elements path in the "NETWORK" section of the manifest file (see, e.g., http://www.webreference.com/authoring/languages/html/HTML5-Application-Caching/)

Comment by todd.ri...@gmail.com, Aug 7, 2010

Hi:

I'm hoping some generous person out there will take a look at my jqtouch mobile app and maybe see what I just cannot seem to see -- which is why this thing won't work offline.

http://www.rimescorp.com/bbhffmobile/app.html

I wrote a script to check that each line in my manifest was valid and returned usable/cacheable files -- and they are. But as far I can tell from the Safari error console on my desktop, my browser is ignoring the manifest file.

If you can, please HELP! I have been working on getting this offline for two days and i just don't see any (more) reason why it shouldn't work!

I tried J. Stark's debug script from his book -- it doesn't reveal much except maybe the lack of verbose response as to caching activity indicates there is none?

I also tried to get to the application cache database of the iphone simulator on my desktop (as J. Stark suggests also in the book), but I never could find any file named ApplicationCache?.db.

Thank you SO much in advance for any tips.

Comment by todd.ri...@gmail.com, Aug 7, 2010

One more thing re: my post above. That html and manifest are actually saved versions of dynamic php files for the same. I saved the respective outputs to non-dynamic files just to check the dynamic-ness was not in some way responsible. The "real" URL then is http://rimescorp.com/bbhffmobile/app.php. Thank you again, ~Todd

Comment by todd.ri...@gmail.com, Aug 8, 2010

I was reading over this page http://www.bennadel.com/blog/1945-Using-The-Cache-Manifest-With-iPhone-s-App-Mode-For-Native-Web-Applications.htm and he mentions making sure there is no extraneous whitespace at the start or end of the cache manifest. In my editor, I couldn't see any whitespace, but I threw a trim() around the output before I, um, output it, and VIOLA, it works! HOORAY!

I hope this helps someone who, like me, has started thinking this could never work :~)

~Todd

Comment by rangakou...@gmail.com, Sep 21, 2010

I have created application using jquery which accepts dynamic inputs , but when it goes online it updates and clears dynamically added inputs , can anybody helps me in preventing going online ?

Comment by ceddy...@gmail.com, Feb 5, 2011

hi i tryed to create an app wich is working online and offline, but it don't work the Debugger says: online: yes, event: checking, status: uncached and online: yes, event: error, status: uncached There was an unknown error, check you chache manifest

here are the files: http://cedrics-soft.de/apps/pw2/PWmanager.zip i hope somebody can help me.


Sign in to add a comment
Powered by Google Project Hosting