webview加载html的离线缓存

首先知道webview自带离线缓存功能：

         mWebView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);   //设置 缓存模式

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，都使用缓存中的数据。

// 开启 DOM storage API 功能 

         mWebView.getSettings().setDomStorageEnabled( true ); 

         //开启 database storage API 功能 

         mWebView.getSettings().setDatabaseEnabled( true );  

         String cacheDirPath = getFilesDir().getAbsolutePath()+APP_CACAHE_DIRNAME; 

         //设置数据库缓存路径 

         mWebView.getSettings().setDatabasePath(cacheDirPath); 

         //设置  Application Caches 缓存目录 

         mWebView.getSettings().setAppCachePath(cacheDirPath); 

         //开启 Application Caches 功能 

         mWebView.getSettings().setAppCacheEnabled( true ); 

但是这都是通过直接加载一个URL来缓存的，而我的要求是加载本地的html，在html中有图片需要网络加载，html可以通过加网络请求后缓存到本地，但是其中的图片加载需要下载才能实现缓存的要求：

具体思路是通过得到HTML中的图片地址，然后下载，然后对webview更新，网上找到的资料是用js代码更新，但是测试的时候没有效果，所以我的思路是：

1.第一次加载时直接加载原html数据，其中的图片从网络加载；

2.将html代码中img标签替换为本地地址，并且将html代码缓存到本地，并且开始下载图片；

3.再次读取该网页时首先判断本地是否有该网页的html代码，有的话读取本地已经替换过img标签的html代码；

4.由于图片已经下载在本地，加载该html代码时图片就从本地加载的，从而达到缓存的效果；

代码：

第一步：第一次加载时直接加载原html数据，其中的图片从网络加载，并且开始下载图片；

这是存储及读取html代码的部分，key为文件名，用URL，但是有//符号，最好用MD5进行编码，否则会报错

public static void saveHtml(String key, String value, Context ctx) {
    key = MD5Utils.encode(key);
    FileOutputStream fileOutputStream = null;
    BufferedWriter writer = null;
    try {
        fileOutputStream = ctx.openFileOutput(key, Context.MODE_APPEND);
        writer = new BufferedWriter(new OutputStreamWriter(fileOutputStream));
        writer.write(value);
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    } finally {
        if (writer != null) {
            try {
                writer.flush();
                writer.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

public static String getHtml(String key, Context ctx) {
    key = MD5Utils.encode(key);
    FileInputStream fileInputStream = null;
    BufferedReader reader = null;
    StringBuilder builder = null;
    try {
        fileInputStream = ctx.openFileInput(key);
        reader = new BufferedReader(new InputStreamReader(fileInputStream));
        builder = new StringBuilder();
        String line = "";
        while ((line = reader.readLine()) != null) {
            builder.append(line);
        }
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    } finally {
        if (reader != null) {
            try {
                reader.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
    if (builder != null) {
        return builder.toString();
    }
    return null;
}

然后加载时先读取本地，如果没有该文件就读取网络数据：

final String url = GlobalContants.TEXT_URL;
responseHtml = CacheUtils.getHtml(url, getActivity());
httpUtils = new HttpUtils();
if (TextUtils.isEmpty(responseHtml)) {
    httpHandler = httpUtils.send(HttpRequest.HttpMethod.GET, url,
            new RequestCallBack<String>() {
                @Override
                public void onSuccess(ResponseInfo<String> responseInfo) {
                    responseHtml = responseInfo.result;
                }
                @Override
                public void onFailure(HttpException error, String msg) {
                }
            });
}

然后webview.loadDataWtihBaseURL对这段html加载就可以了。

第二步：将html代码中img标签替换为本地地址，并且将html代码缓存到本地，并且开始下载图片；

将从网络加载的html代码的img标签进行替换，然后保存到本地：

public void changeHtml(String htmlString) {
    imgUrls.clear();
    doc = Jsoup.parse(htmlString);//将html字符串解析为Document
    if (doc == null) {
        return;
    }
    Elements es1 = doc.select("script");
    if (es1 != null) {
        es1.remove();
    }
    Elements es = doc.getElementsByTag("img");
    for (Element e : es) {
        String imgUrl = e.attr("src");
        imgUrls.add(imgUrl);//将图片的网络地址保存到list
        String imgName;
        int index = imgUrl.lastIndexOf("/");
        imgName = imgUrl.substring(index + 1, imgUrl.length());//通过URL截取到图片名
       	String filePath = "file:///" + Environment.getExternalStorageDirectory() + "/test/" + imgName;
        e.attr("src", filePath);//替换img标签的src属性内容
        
    }
    CacheUtils.saveHtml(key, doc.html(), context);//将替换img标签的html保存到本地
    downloadImg(imgUrls);//开始下载图片到本地
}

这里需要使用jsoup这个包，将html解析为Document，然后遍历img标签，将其中的URL保存到list中，然后替换为本地地址，注意地址前需要加

"file:///"

这样就可以在html代码中加载本地图片，在这里需要将这段更改后的html代码保存到本地，并开始下载：

这里我使用的是Xutils来进行下载，注意下载路径是上面标签替换的路径：

private void downloadImg(final List<String> imgUrls) {
    //若传入参数为空，则直接返回
    if (imgUrls.size() == 0)
        return;
    File dir = new File(Environment.getExternalStorageState() + "/anytime/");
    if (!dir.exists()) {
        dir.mkdir();
    }
    for (final String urlStr : imgUrls) {
        if (urlStr == null) {
            continue;
        }
        int index = urlStr.lastIndexOf("/");
        String fileName = urlStr.substring(index + 1, urlStr.length());
        File file = new File(Environment.getExternalStorageDirectory() + "/anytime/" + fileName);
        if (file.exists()) {
            continue;
        }
        try {
            file.createNewFile();
        } catch (IOException e) {
            e.printStackTrace();
        }
        HttpUtils http = new HttpUtils();
            /*1.下在文件的地址。2.保存至本地的文件路径。*/
        HttpHandler handler = http.download(urlStr, file.getPath(), false, false,
                new RequestCallBack<File>() {

                    @Override
                    public void onStart() {
                    }
                    @Override
                    public void onLoading(long total, long current,                                                            boolean isUploading) {
                    }
                    @Override
                    public void onSuccess(ResponseInfo<File> responseInfo) {
                    }
                    @Override
                    public void onFailure(HttpException error, String msg) {
                    }
                });
    }
}

需要将上面报错图片网络地址的list传入就可以，注意http.download的参数，第四个必须为false，如果为true的话可能会将图片的名字更改，我在做的过程中就遇到了这个问题。

第三步，第四部：再次读取时所有资源都来自本地；

测试过程中还可以，但是想到一种情况，就是图片没有下载完毕，但是下次读取时因为是本地的html代码，其中的img标签已经被替换，所以本地没有，网络地址也没有，就会读取图片失败，所以我的思路就是讲图片网络地址保存在img标签的属性下，读取本地html时检验一下是否所有img标签下的图片都下载了，如果没有下载就将该标签下的src属性替换回网络地址，这样webview加载时本地有的图片就加载本地，本地没有则加载网络图片。