HTML5 OFFLINE SOLUTION

最新推荐文章于 2021-06-20 11:43:44 发布

原创最新推荐文章于 2021-06-20 11:43:44 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动开发 #web.xml #java

T_网络同时被 3 个专栏收录

106 篇文章

订阅专栏

T_Database

53 篇文章

订阅专栏

T_移动开发

53 篇文章

订阅专栏

本文详细介绍了如何配置HTML5应用以实现离线缓存功能。包括设置正确的MIME类型、指定缓存清单文件、配置缓存内容及特殊平台（如iOS和Android）上的额外设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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