|
OfflineSupport
Quick tips on making jQTouch offline-capable
Offline SupportUsing HTML5's Cache Manifest feature, it is possible to make jQTouch sites/apps run offline. The BasicsFirst, 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. |
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
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.
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)?
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.
Is possible publish this application from windows. any reference about this?
It's possible to develop this on Windows, but harder as you can't use the native iPhone Simulator-
In tomcat instead of
AddType? text/cache-manifest .manifest
put the following in the web.xml
<mime-mapping><!-- manifest -->
</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.
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
/js /web /cssThen 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.
This works for .html and image files. What about .pdf and other files?
is possible to force offline mode and prompt if the user want to go online ?
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.
Is it possible to reload the page after the cache is updated?
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.
Same as the ajax.html in my application i cannot cache other html but the 1st level "index.html" for example.
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>");
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/)
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.
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
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
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 ?
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.