使用WebView實現離線閱讀

1.先看效果

加載動畫

這里寫圖片描述

加載完成，注意當前為飛行模式!

這里寫圖片描述

2.使用

1.讓你的javabean實現OffLineLevelItem接口，因為我的這個離線閱讀支持多級下載，比如Demo中的每個頻道下面的第一頁item都可以緩存。

package com.zgh.offlinereader;

import java.util.List;

/**
 * Created by zhuguohui on 2016/6/7.
 */
public interface OffLineLevelItem  {
    //是否有下一級
    boolean haveNextLevel();
    //內容url
    String getWebUrl();
    //下一級的url
    String getNextLevelListUrl();
    //生成下一級
    List<OffLineLevelItem> getNextLevelList(String jsonStr);
}

public class Channel implements OffLineLevelItem {
    String title;
    String url;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    @Override
    public boolean haveNextLevel() {
        return true;
    }

    @Override
    public String getWebUrl() {
        return null;
    }

    @Override
    public String getNextLevelListUrl() {
        return url;
    }

    @Override
    public List<OffLineLevelItem> getNextLevelList(String jsonStr) {
        List<OffLineLevelItem> items = GsonUtil.jsonToBeanList(jsonStr, NewsItem.class);
        return items;
    }
}

2.初始化

   OfflineReaderServer.init(this, getCacheDir(), new MyFirstLevel(),new WaterWaveProgressUI(this));

3.啟動

 @Override
    public void onClick(View v) {
        Intent intent=new Intent(this, OfflineReaderServer.class);
        startService(intent);
    }

4.記得在你的webview使用前調用

    //設置緩存目錄
    WebViewHelper.setWebViewConfig(webView);

就這么簡單！

實現

首先我們為什么要使用webview實現離線閱讀，因為簡單。webview自帶的緩存機制可以實現圖片，js,css的緩存。不然你自己得實現數據庫，html下載，js下載，css保存，html的拼裝。下面我將講解一些webview設置緩存，實現多級下載，webview遍歷url，webview顯示完成監聽。

1.WebView設置緩存

這一部分比較簡單，主要是緩存目錄的設置，然后設置緩存模式為WebSettings.LOAD_CACHE_ELSE_NETWORK，這種模式下webview會優先加載本地緩存，如果沒有緩存的話再加載網絡。

        mWebView.getSettings().setRenderPriority(WebSettings.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;
        String cacheDirPath = ConfigUtil.getCacheDir()
                + APP_CACHE_DIRNAME;
        Log.i(TAG, "cachePath=" + cacheDirPath);
        // 設置數據庫緩存路徑
        mWebView.getSettings().setDatabasePath(cacheDirPath); // API 19 deprecated
        // 設置Application caches緩存目錄
        mWebView.getSettings().setAppCachePath(cacheDirPath);
        // 開啟Application Cache功能
        mWebView.getSettings().setAppCacheEnabled(true);
        mWebView.getSettings().setAppCacheMaxSize(MAX_SIZE);

2.多級緩存

我的項目中需要將每個頻道的首頁中的每個item都緩存下來，所以涉及到多級緩存于是我設計了一個接口在離線閱讀的時候最重要的是拿到葉子節點也就是每個item的url地址，如果是每葉子節點也就是haveNextLevel（）返回true的時候就調用getNextLevelListUrl獲取下一級的url，一般都是Jason字符串，再把json字符串傳入getNextLevelList（）方法獲取下一級，如果到達葉子節點，則調用getWebUrl()獲取url地址保存在一個集合中，當所有的url都獲取以后，就開始用webview遍歷url實現緩存。

public interface OffLineLevelItem  {
    //是否有下一級
    boolean haveNextLevel();
    //內容url
    String getWebUrl();
    //下一級的url
    String getNextLevelListUrl();
    //生成下一級
    List<OffLineLevelItem> getNextLevelList(String jsonStr);
}

頻道的javabean

public class Channel implements OffLineLevelItem {
    String title;
    String url;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    @Override
    public boolean haveNextLevel() {
        return true;
    }

    @Override
    public String getWebUrl() {
        return null;
    }

    @Override
    public String getNextLevelListUrl() {
        return url;
    }

    @Override
    public List<OffLineLevelItem> getNextLevelList(String jsonStr) {
        List<OffLineLevelItem> items = GsonUtil.jsonToBeanList(jsonStr, NewsItem.class);
        return items;
    }
}

item的javabean

public class NewsItem implements OffLineLevelItem{
    String title;
    String url;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    @Override
    public String toString() {
        return title;
    }

    @Override
    public boolean haveNextLevel() {
        return false;
    }

    @Override
    public String getWebUrl() {
        return url;
    }

    @Override
    public String getNextLevelListUrl() {
        return null;
    }

    @Override
    public List<OffLineLevelItem> getNextLevelList(String jsonStr) {
        return null;
    }
}

當然為了獲取到頻道列表需要一個第一級的目錄，而這個目錄在初始化的時候就設置進去了。

public class MyFirstLevel implements OffLineLevelItem {
    @Override
    public boolean haveNextLevel() {
        return true;
    }

    @Override
    public String getWebUrl() {
        return null;
    }

    @Override
    public String getNextLevelListUrl() {
        return "raw://news_list";
    }

    @Override
    public List<OffLineLevelItem> getNextLevelList(String jsonStr) {
        List<OffLineLevelItem> items = GsonUtil.jsonToBeanList(jsonStr, Channel.class);
        return items;
    }
}

3.使用WebView遍歷URL，我原來的思路是給webview設置WebViewClient然后重寫onPageFinished方法，在這個方法中獲取下一個需要換成的url，然后再調用webview.loadurl()結果是很多頁面加載出來是空的。而且在Android4.4以上onPageFinished會調用兩次

這里寫圖片描述

于是乎，我重寫了WebView的OnDraw()方法，在OnDraw()方法里設置了一個監聽回調，但是由于我的WebView是在Service中創建的所以ondraw方法根本不會調用，但是這難得的我嗎？，呵呵，于是我在service的onCreat方法中使用WindowManger將webview添加到屏幕，長寬都是一個像素

   @Override
    public void onCreate() {
        super.onCreate();
        if (!haveInit) {
            throw new RuntimeException("請先調用init()方法，初始化OfflineReaderServer");
        }
        windowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
        params=new WindowManager.LayoutParams();
        params.type = WindowManager.LayoutParams.TYPE_TOAST;
        params.flags = WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL
                | WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE;
        params.gravity = Gravity.LEFT | Gravity.TOP;
        params.width = 1;
        params.height = 1;
        initWebView();
        windowManager.addView(mWebView,params);
    }

結果還是很明顯的大部分的頁面都能緩存下來，但是任然有部分頁面是空白的，后來發現webview的OnDraw()方法會多次持續，webview的頁面加載時間隙的，于是參考這篇文章如何監聽WebView顯示事件，我通過getContentHeight()判斷內容高度來實現顯示完成的監聽，結果任然不理想。于是我最終版是這樣的

/**
 *  可以監聽顯示完成的webview
 * Created by zhuguohui on 2016/6/24.
 */
public class LoadWebView extends WebView {
    private boolean isRendered = false;
    private static final int MSG_FINISH=1;
    private static final int MIN_CONTENT_HEIGHT=1000;
    public LoadWebView(Context context) {
        this(context, null);
    }
    public LoadWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    private int contentHeight=MIN_CONTENT_HEIGHT;
    Handler handler=new Handler(Looper.getMainLooper()){
        @Override
        public void handleMessage(Message msg) {
            if(msg.what==MSG_FINISH) {
                if (finishListenter != null) {
                    finishListenter.onFinish();
                    contentHeight=MIN_CONTENT_HEIGHT;
                }
            }
        }
    };
    @Override
    protected void onDraw(Canvas canvas) {
        //與上一次的contentHeight比較，如果比上一次大，說明還在加載
        if(getContentHeight()>=contentHeight){
            //更新contentHeight
            contentHeight=getContentHeight();
            //取消消息
            handler.removeMessages(MSG_FINISH);
            //延遲200ms發送，如果在200ms內webview又加載了則這條消息會被取消，知道webview加載完成，
            //這條消息會被發送，所以每離線一個頁面有200ms的延遲，但是與功能相比這點是可以接受的。
            handler.sendEmptyMessageDelayed(MSG_FINISH,200);
        }
    }

    public interface OnLoadFinishListenter{
        void onFinish();
    }
    
    private OnLoadFinishListenter finishListenter;
    public void setFinishListenter(OnLoadFinishListenter listenter){
        finishListenter=listenter;
    }
}

3.進度提示

為了讓用戶知道離線的進度我抽取出了一個接口

/**
 * Created by zhuguohui on 2016/6/8.
 */
public interface OffLineProgressUI {
    void showProgress();

    void closeProgress();

    void updateProgress(int progress);

}

并默認實現了一個水波紋的進度球

這里寫圖片描述

設置進度提示有兩種方式，一種是在初始化的時候設置

        OfflineReaderServer.init(this, getCacheDir(), new MyFirstLevel(),new WaterWaveProgressUI(this));

還有一種是調用OfflineReaderServer的setProgressUI方法

   public static void setProgressUI(@NonNull OffLineProgressUI progressUI) {
        sProgressUI = progressUI;
    }

更多內容請看我的Demo。

Demo

https://github.com/zhuguohui/OffLineReaderDemo

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,076評論 25贊 708
  • WebView·開車指南 目錄 WebView簡介 WebView基本使用 WebView常用方法 WebSett...
    小莊bb閱讀 3,536評論 3贊 25
  • Tips 由于WebView的用法實在太多，如果您只是想查詢某個功能的使用——建議Ctrl+F（Commad+F）...
    BugDev閱讀 7,776評論 11贊 109
  • WebView·開車指南 目錄 WebView簡介 WebView基本使用 WebView常用方法 WebSett...
    南城的人閱讀 4,775評論 0贊 19
  • 最近總想寫點什么卻怎么也寫不出來，之前每天日更的時候，一句話，一個靈感都可以讓我長篇大論的寫一通，至少是能寫出來，...
    高藝菲Sophia閱讀 909評論 0贊 6