Html5利用AppCache和LocalStorage实现缓存h5页面数据

最近在开发的过程中遇到了一个问题，就是在Android上通过WebView加载Html5页面时发现页面加载速度慢，再加上网络速度慢，每次请求需要5s左右的时间，严重影响用户体验，所以查询资料，最终找到一个可以解决加载缓慢的方法，现在介绍给大家：

1、使用AppCache机制实现缓存html，css，js文件和一些本地图片，这种缓存方法使用manifest文件进行缓存数据，一般manifest文件默认后缀名为 .appcache，在设置缓存以后，第一次加载页面时会根据manifest文件中列出的缓存文件路径，将文件进行缓存到浏览器，在再次打开的时候，不会再次从服务器请求，而是加载缓存数据。但是如果manifest文件没有发生改变，那么服务器上的相关页面发生改动，加载时也是只会加载缓存的数据，不会进行更新；如果需要更新，必须改动manifest文件，哪怕只是一个空格或者换行。开启缓存机制需要两步:

 (1). 需要在服务器端做AppCache缓存处理：
     在每个需要缓存的html页面增加manifest属性，设置AppCache文件，进行缓存。
   创建manifest文件
   **manifest文件（manifest.appcache）**

 CACHE MANIFEST  
#VERSION 2016-09-28 14:44

# 直接缓存的文件  
CACHE:
../index.html
../css/index.css  

../js/jquery-2.2.4.min.js
../js/index.js

../images/loading.gif
../images/index_one.jpg
../images/index_one_icon.png
../images/index_two.jpg
../images/index_two_icon.png
../images/index_three.jpg
../images/index_three_icon.png
../images/index_four.jpg
../images/index_four_icon.png


#需要在线请求的文件路径，*代表除CACHE以外的文件都进行在线请求
NETWORK:
*
# 替代方案 ，当请求失败时需要跳转的页面 
FALLBACK: 
../error.html

manifest文件分为三个部分：CACHE，NETWORK 和 FALLBACK，
CACHE：是所需要缓存文件的路径可以是绝对路径或者相对路径，一般相对路径比较好。
NETWORK ：是需要即时从服务器请求的文件，一般默认*号，表示除CACHE所列所见以外的文件都是需要即时请求更新的。
FALLBACK：这个页面时当缓存请求失败时所需展示的页面，一般默认一个错误页面。

VERSION：版本号，这是一个附加属性，可有可无，加这个是为了在页面改动时，可以进行改动此版本号，使得manifest文件发生改动，从而浏览器再次请求html页面时，发现页面manifest文件进行改动，浏览器会从服务器重新拉取更新的内容。

manifest文件有了，现在所需做的就是把manifest文件和Html文件进行关联，这个非常简单：
在Html标签中标签有一个属性manifest，就是用来关联manifest文件的，所以只需要在缓存的html文件中的html标签上声明manifest属性，就可以进行AppCache缓存。

<html manifest="manifest/manifest.appcache">
    <head>
        <title>AppCache缓存测试</title>
    </head>

    <body>
        这是一个Html的AppCache缓存测试页面！！！
    </body>
</html>

（2）这样服务器端的缓存就处理好了，可以在浏览器上进行测试，是完全可以缓存的，但是用在Android上使用WebView加载H5页面时，则需要在Android端进行设置：

    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);//可以在加载前对网络进行判断，如果有网络，则设置缓存模式为   WebSettings.LOAD_DEFAULT，从服务器请求数据， 如果没有网络测设置缓存模式为WebSettings.LOAD_CACHE_ELSE_NETWORK

缓存模式(5种)
LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
LOAD_DEFAULT: 根据cache-control决定是否从网络上取数据。
LOAD_CACHE_NORMAL: API level 17中已经废弃, 从API level 11开始作用同LOAD_DEFAULT模式
LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
LOAD_CACHE_ELSE_NETWORK: 只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。
如：www.taobao.com的cache-control为no-cache，在模式LOAD_DEFAULT下，无论如何都会从网络上取数据，如果没有网络，就会出现错误页面；在LOAD_CACHE_ELSE_NETWORK模式下，无论是否有网络，只要本地有缓存，都使用缓存。本地没有缓存时才从网络上获取。
www.360.com.cn的cache-control为max-age=60，在两种模式下都使用本地缓存数据。

a、缓存构成
根据setAppCachePath(String appCachePath)提供的路径，在H5使用缓存过程中生成的缓存文件。

b、缓存模式
无模式选择，通过setAppCacheEnabled(boolean flag)设置是否打开。默认关闭，即，H5的缓存无法使用。

c、清除缓存
找到调用setAppCachePath(String appCachePath)设置缓存的路径，把它下面的文件全部删除就OK了。
clearCache(boolean)
CacheManager.clear高版本中需要调用隐藏API。

d、控制大小
通过setAppCacheMaxSize(long appCacheMaxSize)设置缓存最大容量，默认为Max Integer。
同时，可能通过覆盖WebChromeClient.onReachedMaxAppCacheSize(long requiredStorage, long quota, WebStorage.QuotaUpdater quotaUpdater)来设置缓存超过先前设置的最大容量时的策略。

这样一来，通过设置服务器端的缓存，与Android前端的缓存，就可以有效解决Html5的加载缓慢问题，该方法虽然解决了缓存问题，但是会发现只是在第二次打开是速度会明显提升，但是在首次进行加载时，页面加载还是非常缓慢的，目前还没想到方案进行解决，后面如果找到方法，则会继续更新！

发表博客是为了做个笔记，并且和各位读者进行交流，互相学习，如果哪位读者有更好地解决方案，请麻烦留言告知，万分谢谢！

Html5利用AppCache和LocalStorage实现缓存h5页面数据

猜你喜欢