-
Notifications
You must be signed in to change notification settings - Fork 588
Offline Support
Quick tips for making jQTouch offline-capable.
Using HTML5's Cache Manifest feature, it is possible to make jQTouch sites/apps run offline.
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
themes/css/jqtouch.min.css
src/lib/zepto.js
src/jqtouch.min.js
Also, the manifest must be served with a MIME type of text/cache-manifest, which you can accomplish on most servers with a .htaccess directive:
AddType text/cache-manifest .manifest
jQTouch ships with a sample .htaccess with this and other helpful rules.
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.