html5离线应用,html离线文档

android中怎么使用html5离线功能

HTML5的离线应用功能可以使得WebApp即使在网络断开的情况下仍能正常使用这是个非常有用的功能,但如何使Webivew支持HTML5离线应用功能呢,需要的朋友可以参考下

创新互联公司是一家专业提供奎屯企业网站建设,专注与成都网站建设、网站制作、成都h5网站建设、小程序制作等业务。10年已为奎屯众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

HTML5的离线应用功能可以使得WebApp即使在网络断开的情况下仍能正常使用，这是个非常有用的功能。近来工作中也要用到HTML5离线应用功能，由于是在Android平台上做，所以自然而然的选择Webview来解析网页。但如何使Webivew支持HTML5离线应用功能呢，经过反复摸索和上网查找资料，反复做试验终于成功了。

首先需配置webview的的一些属性，假设activity中已经有了一个Webview的实例对象，名为m_webview，然后增加以下代码：

复制代码 代码如下:

WebSettings webseting = m_webview.getSettings();

webseting.setDomStorageEnabled(true);

webseting.setAppCacheMaxSize(1024*1024*8);//设置缓冲大小，我设的是8M

String appCacheDir = this.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();

webseting.setAppCachePath(appCacheDir);

webseting.setAllowFileAccess(true);

webseting.setAppCacheEnabled(true);

webseting.setCacheMode(WebSettings.LOAD_DEFAULT);

webview可以设置一个WebChromeClient对象，在其onReachedMaxAppCacheSize函数对扩充缓冲做出响应。代码如下

复制代码 代码如下:

m_webview.setWebChromeClient(m_chromeClient);

private WebChromeClient m_chromeClient = new WebChromeClient(){

//扩充缓存的容量

@Override

public void onReachedMaxAppCacheSize(long spaceNeeded,

long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {

quotaUpdater.updateQuota(spaceNeeded * 2);

}

};

其次要修改http服务器中的配置，使其支持text/cache-manifest，我使用的是apache服务器，是windows版本的，在apache的conf文件夹中找到mime.types文件，打开后在文件的最后加上

“text/cache-manifest mf manifest”，重启服务器即可。这一步很重要，我就是因为服务器端没有配置这个，所以失败了好多次，最后是在附录链接1的回复中找到的线索。

经过以上设置Webview就可以支持HTML5的离线应用了。

附录链接1中说缓冲目录应该是getApplicationContext().getCacheDir().getAbsolutePath();但我经过试验后发现设置那个目录不起作用，可能是Android版本不同吧，我的是Android4.0.3，而他的可能是以前的Android版本吧。

缓冲目录使用getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath()是从附录链接2中找到的线索。

html5的离线web应用的浏览器和服务器交互的过程要是没有缓存怎么办

html5的离线web应用的浏览器和服务器交互的过程要是没有缓存就需要每次交互都要实时接口调用，增加网络开销。

一、离线存储的作用

1、用户可离线访问应用，这对于无法随时保持联网状态的移动终端用户来说尤其重要

2、用户访问本地的缓存文件，通常意味着更快的访问速度

3、仅仅加载被修改过的资源，避免同一资源对服务器多次的请求，大大降低了对服务器的访问压力

二、实现离线存储

1、在html标签里通过manifest属性引用一个cache.manifest文件，该文件里声明了浏览器需缓存的所有资源文件，如下所示：

!DOCTYPE html

html lang='cn' manifest='cache.manifest'

head

meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

title离线缓存示例页面/title

!-- CSS文件引用 --

/head

body

!-- 各种标签 --

/body

!-- 各种脚本文件 --

/html

2、关于cache.manifest的定义

CACHE MANIFEST

# 注释：需要缓存的文件，无论在线与否，均从缓存里读取

chched.js

cached.css

# 注释：不缓存的文件，无论缓存中存在与否，均从新获取

NETWORK:

uncached.js

uncached.css

# 注释：获取不到资源时的备选路径，如index.html访问失败，则返回404页面

FALLBACK:

index.html 404.html

html5本地存储和离线应用有什么区别？

本地存储-谈到存储，一般说的是数据data，不管这个应用是在线还是离线。

离线应用-这个对应的是在线，也就是，没有网的情况下，也可以使用。

后者需要把代码、程序以及资源都放到本地，如果想要使用数据，则利用本地存储。