Android之 -WebView实现离线缓存阅读

最新推荐文章于 2024-04-03 02:47:14 发布
最新推荐文章于 2024-04-03 02:47:14 发布
阅读量143 收藏
点赞数
文章标签： 移动开发 数据库 javascript ViewUI

前言

本篇博客要实现的是一个离线下载和离线阅读的功能，这是很多阅读类app都常见的一个功能，典型的应用就是网易新闻。什么是离线下载？其实这个概念是比较模糊，是离线之后下载呢，还是下载之后离线，但稍微有点脑子的人都知道没有网络之后怎么下载呢？所以离线下载这个功能是”在有网络的情况下，把资源下载到本地“，离线阅读就是”在没有网络或者网络不好的时候，阅读本地好缓存的文章资源“。这样就很清楚我们要的这两个具体的功能需求了。

实现思路

小巫这里提供两个实现思路，一个就是自己写逻辑，一个是通过WebView本身自带的缓存功能来实现。 先来说第一个思路：

  1. 定义一个离线下载的服务Service
  2. 启动后台服务Service来执行异步下载
  3. 存储到本地数据库中
  4. 每一次加载url之前，先判断数据库是否存在缓存内容 5.如果存在缓存，优先加载本地缓存，如果不存在，才执行联网请求

第二个思路就是本篇 博客要讲的通过WebView自带的缓存功能来实现离线阅读 这里小巫接着上一篇博客的例子来添加代码。

参考1：http://www.open-open.com/lib/view/open1392188052301.html 参考2：http://87426628.blog.163.com/blog/static/6069361820139183417725/

Android WebView缓存可以分为页面缓存和数据缓存 页面缓存是指加载一个网页时html、JS、CSS等页面或者资源数据。 数据缓存分别为两种：AppCache和DOM Storage(Web Storage)。 AppCache也是我们的H5缓存，我们可以设置缓存的目录 Dom Storage具有Session Storage和Local Storage两种，前者是会话级别的存储，页面关闭之后就消失了，后者是本地化存储。 这里写图片描述 如果我们手机有root的权限的话，就可以看到/data/data/package_name/下的文件目录，我们就会发现webview为我们创建 app_webview，这个应该就是webview的缓存目录的位置。

public void initWebView() {
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.getSettings().setRenderPriority(RenderPriority.HIGH);
    // 建议缓存策略为，判断是否有网络，有的话，使用LOAD_DEFAULT,无网络时，使用LOAD_CACHE_ELSE_NETWORK

    mWebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); // 设置缓存模式
    // 开启DOM storage API 功能
    mWebView.getSettings().setDomStorageEnabled(true);
    // 开启database storage API功能
    mWebView.getSettings().setDatabaseEnabled(true);
    String cacheDirPath = getFilesDir().getAbsolutePath()
            + APP_CACHE_DIRNAME;
    Log.i("cachePath", cacheDirPath);
    // 设置数据库缓存路径
    mWebView.getSettings().setDatabasePath(cacheDirPath); // API 19 deprecated
    // 设置Application caches缓存目录
    mWebView.getSettings().setAppCachePath(cacheDirPath);
    // 开启Application Cache功能
    mWebView.getSettings().setAppCacheEnabled(true);

    Log.i("databasepath", mWebView.getSettings().getDatabasePath());

}

这里加载我博客里的一篇文章： 这里写图片描述

public void findView() {
    initWebView();

    mWebView.setWebViewClient(new WebViewClient() {
        @Override
        public void onLoadResource(WebView view, String url) {
            Log.i(TAG, "onLoadResource url=" + url);

            super.onLoadResource(view, url);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            Log.i(TAG, "intercept url=" + url);
            view.loadUrl(url);
            return true;
        }

        // 页面开始时调用
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            Log.e(TAG, "onPageStarted");
            super.onPageStarted(view, url, favicon);
        }

        // 页面加载完成调用
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
        }

        @Override
        public void onReceivedError(WebView view, int errorCode,
                String description, String failingUrl) {
            super.onReceivedError(view, errorCode, description, failingUrl);
            Toast.makeText(getApplicationContext(), "", Toast.LENGTH_LONG)
                    .show();
        }
    });

    mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsAlert(WebView view, String url, String message,
                JsResult result) {
            Log.e(TAG, "onJsAlert " + message);

            Toast.makeText(getApplicationContext(), message,
                    Toast.LENGTH_SHORT).show();
            result.confirm();
            return super.onJsAlert(view, url, message, result);
        }

        @Override
        public boolean onJsConfirm(WebView view, String url,
                String message, JsResult result) {
            Log.e(TAG, "onJsConfirm " + message);
            return super.onJsConfirm(view, url, message, result);
        }

        @Override
        public boolean onJsPrompt(WebView view, String url, String message,
                String defaultValue, JsPromptResult result) {
            Log.e(TAG, "onJsPrompt " + url);
            return super.onJsPrompt(view, url, message, defaultValue,
                    result);
        }
    });

    mWebView.loadUrl(url);
}

完整代码

package com.infzm.webview;

import java.io.File;

import android.app.Activity; import android.content.Intent; import android.graphics.Bitmap; import android.net.Uri; import android.os.Bundle; import android.util.Log; import android.view.KeyEvent; import android.view.View; import android.view.View.OnClickListener; import android.webkit.JsPromptResult; import android.webkit.JsResult; import android.webkit.WebChromeClient; import android.webkit.WebSettings; import android.webkit.WebSettings.RenderPriority; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.Button; import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener {

private WebView mWebView;
private Button nightModeBtn;
private Button lightModeBtn;

// -----
private static final String TAG = MainActivity.class.getSimpleName();
private static final String APP_CACHE_DIRNAME = "/webcache"; // web缓存目录
private String url; // 网页url

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mWebView = (WebView) this.findViewById(R.id.webview);
    nightModeBtn = (Button) this.findViewById(R.id.btn_nightmode);
    lightModeBtn = (Button) this.findViewById(R.id.btn_lightmode);

    nightModeBtn.setOnClickListener(this);
    lightModeBtn.setOnClickListener(this);

    // webView.loadUrl("http://www.baidu.com");

    WebSettings settings = mWebView.getSettings();
    // 设置javaScript可用
    settings.setJavaScriptEnabled(true);
    // 绑定javaScript接口，可以实现在javaScript中调用我们的Android代码
    // webView.addJavascriptInterface(new WebAppInterface(this), "Android");
    // webView.setWebViewClient(new MyWebViewClient());

    // 加载assets目录下的html页面
    // mWebView.loadUrl("file:///android_asset/01.html");
    url = "http://blog.csdn.net/wwj_748/article/details/44810283";

    findView();
}

public void findView() {
    initWebView();

    mWebView.setWebViewClient(new WebViewClient() {
        @Override
        public void onLoadResource(WebView view, String url) {
            Log.i(TAG, "onLoadResource url=" + url);

            super.onLoadResource(view, url);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            Log.i(TAG, "intercept url=" + url);
            view.loadUrl(url);
            return true;
        }

        // 页面开始时调用
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            Log.e(TAG, "onPageStarted");
            super.onPageStarted(view, url, favicon);
        }

        // 页面加载完成调用
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
        }

        @Override
        public void onReceivedError(WebView view, int errorCode,
                String description, String failingUrl) {
            super.onReceivedError(view, errorCode, description, failingUrl);
            Toast.makeText(getApplicationContext(), "", Toast.LENGTH_LONG)
                    .show();
        }
    });

    mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsAlert(WebView view, String url, String message,
                JsResult result) {
            Log.e(TAG, "onJsAlert " + message);

            Toast.makeText(getApplicationContext(), message,
                    Toast.LENGTH_SHORT).show();
            result.confirm();
            return super.onJsAlert(view, url, message, result);
        }

        @Override
        public boolean onJsConfirm(WebView view, String url,
                String message, JsResult result) {
            Log.e(TAG, "onJsConfirm " + message);
            return super.onJsConfirm(view, url, message, result);
        }

        @Override
        public boolean onJsPrompt(WebView view, String url, String message,
                String defaultValue, JsPromptResult result) {
            Log.e(TAG, "onJsPrompt " + url);
            return super.onJsPrompt(view, url, message, defaultValue,
                    result);
        }
    });

    mWebView.loadUrl(url);
}

public void initWebView() {
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.getSettings().setRenderPriority(RenderPriority.HIGH);
    // 建议缓存策略为，判断是否有网络，有的话，使用LOAD_DEFAULT,无网络时，使用LOAD_CACHE_ELSE_NETWORK

    mWebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); // 设置缓存模式
    // 开启DOM storage API 功能
    mWebView.getSettings().setDomStorageEnabled(true);
    // 开启database storage API功能
    mWebView.getSettings().setDatabaseEnabled(true);
    String cacheDirPath = getFilesDir().getAbsolutePath()
            + APP_CACHE_DIRNAME;
    Log.i("cachePath", cacheDirPath);
    // 设置数据库缓存路径
    mWebView.getSettings().setDatabasePath(cacheDirPath); // API 19 deprecated
    // 设置Application caches缓存目录
    mWebView.getSettings().setAppCachePath(cacheDirPath);
    // 开启Application Cache功能
    mWebView.getSettings().setAppCacheEnabled(true);

    Log.i("databasepath", mWebView.getSettings().getDatabasePath());

}

public void clearWebViewCache() {
    // 清理WebView缓存数据库
    try {
        deleteDatabase("webview.db");
        deleteDatabase("webviewCache.db");
    } catch (Exception e) {
        e.printStackTrace();
    }

    // WebView缓存文件
    File appCacheDir = new File(getFilesDir().getAbsolutePath()
            + APP_CACHE_DIRNAME);
    Log.e(TAG, "appCacheDir path=" + appCacheDir.getAbsolutePath());

    File webviewCacheDir = new File(getCacheDir().getAbsolutePath()
            + "/webviewCache");
    Log.e(TAG, "appCacheDir path=" + webviewCacheDir.getAbsolutePath());

    // 删除webView缓存目录
    if (webviewCacheDir.exists()) {
        deleteFile(webviewCacheDir);
    }
    // 删除webView缓存，缓存目录
    if (appCacheDir.exists()) {
        deleteFile(appCacheDir);
    }
}

public void deleteFile(File file) {
    Log.i(TAG, "delete file path=" + file.getAbsolutePath());
    if (file.exists()) {
        if (file.isFile()) {
            file.delete();
        } else if (file.isDirectory()) {
            File files[] = file.listFiles();
            for (int i = 0; i < files.length; i++) {
                deleteFile(files[i]);
            }
        }
        file.delete();
    } else {
        Log.e(TAG, "delete file no exists " + file.getAbsolutePath());
    }
}

/**
 * 用于控制页面导航
 * 
 * @author wwj_748
 * 
 */
private class MyWebViewClient extends WebViewClient {
    /**
     * 当用于点击链接，系统调用这个方法
     */
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (Uri.parse(url).getHost().equals("www.baidu.com")) {
            // 这个是我的网页，所以不要覆盖，让我的WebView来加载页面
            return false;
        }
        // 否则，这个链接不是我的网站页面，因此启用浏览器来处理urls
        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        startActivity(intent);
        return true;
    }
}

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // 检查是否为返回事件，如果有网页历史记录
    if (keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
        mWebView.goBack();
        return true;
    }
    // 如果不是返回键或没有网页浏览历史，保持默认
    // 系统行为（可能会退出该活动）
    return super.onKeyDown(keyCode, event);
}

@Override
public void onClick(View v) {
    switch (v.getId()) {
    case R.id.btn_nightmode:
        mWebView.loadUrl("javascript:load_night()");
        break;
    case R.id.btn_lightmode:
        mWebView.loadUrl("javascript:load_day()");
        break;
    default:
        break;
    }
}

}

 

 

 

转：http://blog.csdn.net/wwj_748/article/details/44835865

weixin_33928137
关注
Android WebView离线缓存 WebViewAssetLoader 的使用
xq610928的博客
04-26 1805
前言 ： 各位同学大家好，最近很长时间没有更新文章了。因为搬到新家去了 所以留给自己的时间非常的少，今天因为在项目开发上面遇到一些问题 所以就想记录分享出来。 问题原因 是这样的，项目组这边做了一个安卓WebView 嵌套H5链接的游戏壳包 。相信很多同学做过类似的需求 很多同学会说这个很简单 初始化webview控件 然后 设置webviewsetting 即可 最后调用 xWalkView.loadUrl(url); 方法即可 因为我们加载的一个H5游戏 在初始化加载进度条的时候有一个下载动作 非
安卓网页离线保存_Android之 -WebView实现离线缓存阅读
weixin_30986079的博客
02-12 1107
前言本篇博客要实现的是一个离线下载和离线阅读的功能，这是很多阅读类app都常见的一个功能，典型的应用就是网易新闻。什么是离线下载？其实这个概念是比较模糊，是离线之后下载呢，还是下载之后离线，但稍微有点脑子的人都知道没有网络之后怎么下载呢？所以离线下载这个功能是”在有网络的情况下，把资源下载到本地“，离线阅读就是”在没有网络或者网络不好的时候，阅读本地好缓存的文章资源“。这样就很清楚我们要的这两个具...
Android记录25-WebView实现离线缓存阅读，Flutter中网络图片加载和缓存源码分析
m0_64319496的博客
11-17 752
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) { Log.e(TAG, "onJsConfirm " + message); return super.onJsConfirm(view, url, message, result); } @Override public boolean onJsPrompt(WebView view, String url, String messa
【so easy~】 Webview离线功能（优先cache缓存+cache缓存管理）！
libo19881179的专栏
11-28 308
在做Webview显示服务器的html功能时 需要加入离线功能。 http://androiddada.iteye.com/ 开始思路很狭隘，以为一定应该是从服务器得到的html文件，下载到本地后加载~ 但是这样不能离线查看图片，因为图片数据并不再html中，只是连接地址。 后来，经过上网各种搜寻学习，发现原来Webview有自己的缓存，如图：    在手机本地 data/data...
Android记录25-WebView实现离线缓存阅读
modabobo
04-02 984
Android记录25-WebView实现离线缓存阅读 前言 本篇博客要实现的是一个离线下载和离线阅读的功能，这是很多阅读类app都常见的一个功能，典型的应用就是网易新闻。什么是离线下载？其实这个概念是比较模糊，是离线之后下载呢，还是下载之后离线，但稍微有点脑子的人都知道没有网络之后怎么下载呢？所以离线下载这个功能是”在有网络的情况下，把资源下载到本地“，离线阅读就是”在没有网络或者网络...
Android记录25-WebView实现离线缓存阅读，剖析Android开发未来的出路在哪里
m0_66264324的博客
01-19 119
return super.onJsAlert(view, url, message, result); } @Override public boolean onJsConfirm(WebView view, String url, String message, JsResult result) { Log.e(TAG, "onJsConfirm " + message); return super.onJsConfirm(view, url, message, result); } @Override
Android记录25-WebView实现离线缓存阅读，看看这篇文章吧
最新发布
2401_84091993的博客
04-03 398
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可免费领取！既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-U84R05G6-1712083591880)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
UIwebView实现html的离线缓存
weixin_33671935的博客
03-26 105
1、html的缓存主要採取ASIHTTPRequest的缓存策略 （1）、设置缓存策略 //设置缓存 ASIDownloadCache *cache=[[ASIDownloadCache alloc] init]; self.myCache=cache; //设置缓存路径 NSArray *paths =NSSea...
ios-WebView离线缓存.zip
07-11
基于YYCache和系统的NSURLProtocol实现WebView离线缓存功能
Html离线缓存webview配置详细
05-12
自己项目遇到的问题，把他总结下来，遇到同样问题可以下载
moudle_webviewplus:WebView 离线缓存策略SDK
04-22
WebView 离线缓存策略SDK
Android离线webview调试工具,开发H5混合应用必备
05-14
调试webview(类似Chrome://inspect的功能)国内404,大家都懂的,经过我各种折腾制作完成,不会出现空白页面,无需科学那啥,不限机型,Hybrid App等H5混合应用开发必备,
webView谷歌离线调试包
08-17
调试基于WebView的App最舒服的工具Chrome自带的开发者工具，其中有我们熟悉的Dom树调试，JS调试，Network监视等等功能。 Google提供的调试Android上WebView的步骤： 1.开启手机上的USB调试功能并且连接计算机手机端打开需要调试的app 2.打开Chrome浏览器，地址栏输入：Chrome://inspect，回车 3.Chrome会自动检测手机上打开的App，并列出可调试的WebView页面 4.点击Inspect，弹出开发者工具进行调试（Android4.4开始支持，老版本Android检测不到webview）
Android的webview支持HTML5的离线应用功能
编程猫的专栏
09-03 7721
HTML5的离线应用功能可以使得WebApp即使在网络断开的情况下仍能正常使用，这是个非常有用的功能。近来工作中也要用到HTML5离线应用功能，由于是在Android平台上做，所以自然而然的选择Webview来解析网页。但如何使Webivew支持HTML5离线应用功能呢，经过反复摸索和上网查找资料，反复做试验终于成功了。 首先需配置webview的的一些属性，假设activity中已经有
WKWebView离线缓存
ZTLVV的专栏
07-15 606
WKWebView离线缓存
Android WebView 实现离线缓存阅读
09-22 352
关注微信号：javalearns   随时随地学Java 或扫一扫 随时随地学Java 前言 本篇博客要实现的是一个离线下载和离线阅读的功能，这是很多阅读类app都常见的一个功能，典型的应用就是网易新闻。什么是离线下载？其实这个概念是比较模糊，是离线之后下载呢，还是下载之后离线，但稍微有点脑子的人都知道没有网络之后怎么下载呢？所以离线下载
android webview 图片缓存,WebView 图片离线缓存（含图片）
weixin_35767900的博客
05-27 1130
自打去年十一来到掘金，就想着有一点一定会做 WebView 离线缓存，作为一个阅读类 app,不敢想象在没有离线缓存的情况下是怎么撑了这么久的????。在下个版本中就有大家喜闻乐见的文章离线缓存了。本文只授权掘金。。。我还给掘金想了个 slogan : 用掘金的人，技术一定不会太差。System.out.println("Hello World !");1WebView 内容的缓存实际上是把网页的 ht...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值