HTML5 OFFLINE SOLUTION

Although PhoneGap is an offline solution where the HTML, CSS and JS files etc are held in the assets/www folder within the app, there are some cases where you might want the app to point to a remote server where the HTML5 file and its CSS/JS are located. They can be downloaded onto your device and ran as offline files when the device has no Internet connection.

The requirements to trigger the HTML5 offline cache are detailed below and each requirement must be implemented with care, otherwise it will not work:

1) The MIME Type for a Manifest file.
This is very important. Previously I have followed a solution to add a mime type by using a .htaccess file and place it together with index.html of my HTML5 app, but it didn’t work.

In my case, I was using the Tomcat server and the surefire way that the .manifest file will be correctly used by the server, is to modify “/conf/web.xml” and add in the mime mapping as below:

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

 


2) Specify the Manifest File
This is a standard configuration. For every HTML file that wants to use the cache manifest, they have to update their tag to

3) Configure the Manifest File
The manifest file is a text file that you have configure to tell the HTML5 app what is to be cached for offline use. A sample file is below:
CACHE MANIFEST

# Version 0.1

# Explicitly cached entries
index.html
jqtouch/jqtouch.css
jqtouch/jqtouch.js
jqtouch/jquery-1.4.2.min.js
js/common.js
images/1.png
images/2.png

# All other resources (e.g. sites) require the user to be online.
NETWORK:
*

* note that the manifest file only caches static resources such as .html, .js and images, so files like JSP pages will not be applicable here.

***VERY IMPT: Each entry to be cached must be correctly named and if the entry is there, the physical file must be there, otherwise the whole caching will fail!

4) For iOS, steps 1-3 are sufficient for HTML5 offline caching to work. However, in the case of Android, we need to fix the Android Shell Native App to enable HTML5 caching:

In your App.java class, there are these lines of codes to be added as part of the solution to enable HTML5 caching:

public class App extends DroidGap {
...
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
...
super.appView.getSettings().setDomStorageEnabled(true);
super.appView.getSettings().setAppCacheMaxSize(1024*1024*8);
super.appView.getSettings().setAppCachePath("/data/data/com.yourdomain/cache");
super.appView.getSettings().setAllowFileAccess(true);
super.appView.getSettings().setAppCacheEnabled(true);
super.appView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);
...
}
...
}

 =======================================

对于UIWebView不支持html5 cache的问题，可以参考：

http://stackoverflow.com/questions/1540240/html5-cache-manifest-in-a-uiwebview