Offline Support

David Kaneda edited this page Dec 18, 2011 · 1 revision

Quick tips for making jQTouch offline-capable.

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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.