Carson帶你學(xué)Android：手把手構(gòu)建WebView緩存機(jī)制及資源預(yù)加載方案

前言

  • 由于H5具備 開發(fā)周期短、靈活性好 的特點(diǎn)，所以現(xiàn)在 Android App大多嵌入了 Android Webview 組件進(jìn)行 Hybrid 開發(fā)
  • 但我知道你一定在煩惱 Android Webview 的性能問題，特別突出的是：加載速度慢 & 消耗流量
  • 今天，我將針對 Android Webview 的性能問題，提出一些有效解決方案。

Carson帶你學(xué)WebView系列文章
Carson帶你學(xué)Android：這是一份全面&詳細(xì)的WebView學(xué)習(xí)攻略
Carson帶你學(xué)Android：最全面、易懂的Webview使用教程
Carson帶你學(xué)Android：全面總結(jié)WebView與 JS 的交互方式
Carson帶你學(xué)Android：手把手構(gòu)建WebView緩存機(jī)制及資源預(yù)加載方案
Carson帶你學(xué)Android：盤點(diǎn)你不知道的WebView漏洞

目錄

示意圖

1. Android WebView 存在什么性能問題？

  • Android WebView 里 H5 頁面加載速度慢
  • 耗費(fèi)流量

下面會詳細(xì)介紹。

1.1 H5 頁面加載速度慢

H5 頁面加載速度慢的原因

下面會詳細(xì)介紹：

1.1.1 渲染速度慢

前端H5頁面渲染的速度取決于 兩個方面：

  • Js 解析效率
    Js 本身的解析過程復(fù)雜、解析速度不快 & 前端頁面涉及較多 JS 代碼文件，所以疊加起來會導(dǎo)致 Js 解析效率非常低
  • 手機(jī)硬件設(shè)備的性能
    由于Android機(jī)型碎片化，這導(dǎo)致手機(jī)硬件設(shè)備的性能不可控，而大多數(shù)的Android手機(jī)硬件設(shè)備無法達(dá)到很好很好的硬件性能

總結(jié)：上述兩個原因 導(dǎo)致 H5頁面的渲染速度慢。

1.1.2 頁面資源加載緩慢

H5 頁面從服務(wù)器獲得，并存儲在 Android手機(jī)內(nèi)存里：

  • H5頁面一般會比較多
  • 每加載一個 H5頁面，都會產(chǎn)生較多網(wǎng)絡(luò)請求：
    1. HTML 主 URL 自身的請求；
    2. HTML外部引用的JS、CSS、字體文件，圖片也是一個獨(dú)立的 HTTP 請求

每一個請求都串行的，這么多請求串起來，這導(dǎo)致 H5頁面資源加載緩慢

總結(jié)：H5頁面加載速度慢的原因：渲染速度慢 & 頁面資源加載緩慢 導(dǎo)致。

1.2 耗費(fèi)流量

  • 每次使用 H5頁面時，用戶都需要重新加載 Android WebView的H5 頁面
  • 每加載一個 H5頁面，都會產(chǎn)生較多網(wǎng)絡(luò)請求（上面提到）
  • 每一個請求都串行的，這么多請求串起來，這導(dǎo)致消耗的流量也會越多

1.3 總結(jié)

  • 綜上所述，產(chǎn)生Android WebView性能問題主要原因是：
示意圖
  • 上述問題導(dǎo)致了Android WebView的H5 頁面體驗 與 原生Native 存在較大差距。

2. 解決方案

針對上述Android WebView的性能問題，我提出了3種解決方案：

  • 前端H5的緩存機(jī)制（WebView 自帶）
  • 資源預(yù)加載
  • 資源攔截

下面我將詳細(xì)介紹。

2.1 前端H5的緩存機(jī)制

  • 定義
    緩存，即離線存儲
  1. 這意味著 H5網(wǎng)頁 加載后會存儲在緩存區(qū)域，在無網(wǎng)絡(luò)連接時也可訪問
  2. WebView的本質(zhì) = 在 Android中嵌入 H5頁面，所以，Android WebView自帶的緩存機(jī)制其實就是 H5頁面的緩存機(jī)制
  3. Android WebView除了新的File System緩存機(jī)制還不支持，其他都支持。

  • 作用

    1. 離線瀏覽：用戶可在沒有網(wǎng)絡(luò)連接時進(jìn)行H5頁面訪問
    2. 提高頁面加載速度 & 減少流量消耗：直接使用已緩存的資源，不需要重新加載

  • 具體應(yīng)用
    此處講解主要講解 前端H5的緩存機(jī)制 的緩存機(jī)制 & 緩存模式 ：
    a. 緩存機(jī)制：如何將加載過的網(wǎng)頁數(shù)據(jù)保存到本地
    b. 緩存模式：加載網(wǎng)頁時如何讀取之前保存到本地的網(wǎng)頁緩存

前者是保存，后者是讀取，請注意區(qū)別

2.1.1 緩存機(jī)制

  • Android WebView自帶的緩存機(jī)制有5種：
    1. 瀏覽器 緩存機(jī)制
    2. Application Cache 緩存機(jī)制
    3. Dom Storage 緩存機(jī)制
    4. Web SQL Database 緩存機(jī)制
    5. Indexed Database 緩存機(jī)制
    6. File System 緩存機(jī)制（H5頁面新加入的緩存機(jī)制，雖然Android WebView暫時不支持，但會進(jìn)行簡單介紹）

下面將詳細(xì)介紹每種緩存機(jī)制。

1. 瀏覽器緩存機(jī)制

a. 原理
  • 根據(jù) HTTP 協(xié)議頭里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段來控制文件緩存的機(jī)制
  • 下面詳細(xì)介紹Cache-Control、Expires、Last-Modified & Etag四個字段
  1. Cache-Control：用于控制文件在本地緩存有效時長

如服務(wù)器回包：Cache-Control:max-age=600，則表示文件在本地應(yīng)該緩存，且有效時長是600秒（從發(fā)出請求算起）。在接下來600秒內(nèi)，如果有請求這個資源，瀏覽器不會發(fā)出 HTTP 請求，而是直接使用本地緩存的文件。

  1. Expires：與Cache-Control功能相同，即控制緩存的有效時間
  1. Expires是 HTTP1.0 標(biāo)準(zhǔn)中的字段，Cache-Control 是 HTTP1.1 標(biāo)準(zhǔn)中新加的字段
  2. 當(dāng)這兩個字段同時出現(xiàn)時，Cache-Control 優(yōu)先級較高
  1. Last-Modified：標(biāo)識文件在服務(wù)器上的最新更新時間

下次請求時，如果文件緩存過期，瀏覽器通過 If-Modified-Since 字段帶上這個時間，發(fā)送給服務(wù)器，由服務(wù)器比較時間戳來判斷文件是否有修改。如果沒有修改，服務(wù)器返回304告訴瀏覽器繼續(xù)使用緩存；如果有修改，則返回200，同時返回最新的文件。

  1. Etag：功能同Last-Modified ，即標(biāo)識文件在服務(wù)器上的最新更新時間。
  1. 不同的是，Etag 的取值是一個對文件進(jìn)行標(biāo)識的特征字串。
  2. 在向服務(wù)器查詢文件是否有更新時，瀏覽器通過If-None-Match 字段把特征字串發(fā)送給服務(wù)器，由服務(wù)器和文件最新特征字串進(jìn)行匹配，來判斷文件是否有更新：沒有更新回包304，有更新回包200
  3. Etag 和 Last-Modified 可根據(jù)需求使用一個或兩個同時使用。兩個同時使用時，只要滿足基中一個條件，就認(rèn)為文件沒有更新。

常見用法是：

  • Cache-Control與 Last-Modified 一起使用；
  • Expires與 Etag一起使用；

即一個用于控制緩存有效時間，一個用于在緩存失效后，向服務(wù)查詢是否有更新

特別注意：瀏覽器緩存機(jī)制 是 瀏覽器內(nèi)核的機(jī)制，一般都是標(biāo)準(zhǔn)的實現(xiàn)

即Cache-Control、 Last-Modified 、 Expires、 Etag都是標(biāo)準(zhǔn)實現(xiàn)，你不需要操心

b. 特點(diǎn)
  • 優(yōu)點(diǎn)：支持 Http協(xié)議層
  • 不足：緩存文件需要首次加載后才會產(chǎn)生；瀏覽器緩存的存儲空間有限，緩存有被清除的可能；緩存的文件沒有校驗。

對于解決以上問題，可以參考手 Q 的離線包

c. 應(yīng)用場景

靜態(tài)資源文件的存儲，如JS、CSS、字體、圖片等。

  1. Android Webview會將緩存的文件記錄及文件內(nèi)容會存在當(dāng)前 app 的 data 目錄中。
d. 具體實現(xiàn)

Android WebView內(nèi)置自動實現(xiàn)，即不需要設(shè)置即實現(xiàn)

  1. Android 4.4后的 WebView 瀏覽器版本內(nèi)核：Chrome
  2. 瀏覽器緩存機(jī)制 是 瀏覽器內(nèi)核的機(jī)制，一般都是標(biāo)準(zhǔn)的實現(xiàn)

2. Application Cache 緩存機(jī)制

a. 原理
  • 以文件為單位進(jìn)行緩存，且文件有一定更新機(jī)制（類似于瀏覽器緩存機(jī)制）
  • AppCache 原理有兩個關(guān)鍵點(diǎn)：manifest 屬性和 manifest 文件。
<!DOCTYPE html>
<html manifest="demo_html.appcache">
// HTML 在頭中通過 manifest 屬性引用 manifest 文件
// manifest 文件：就是上面以 appcache 結(jié)尾的文件，是一個普通文件文件，列出了需要緩存的文件
// 瀏覽器在首次加載 HTML 文件時，會解析 manifest 屬性，并讀取 manifest 文件，獲取 Section：CACHE MANIFEST 下要緩存的文件列表，再對文件緩存
<body>
...
</body>
</html>

// 原理說明如下：
// AppCache 在首次加載生成后，也有更新機(jī)制。被緩存的文件如果要更新，需要更新 manifest 文件
// 因為瀏覽器在下次加載時，除了會默認(rèn)使用緩存外，還會在后臺檢查 manifest 文件有沒有修改（byte by byte)
發(fā)現(xiàn)有修改，就會重新獲取 manifest 文件，對 Section：CACHE MANIFEST 下文件列表檢查更新
// manifest 文件與緩存文件的檢查更新也遵守瀏覽器緩存機(jī)制
// 如用戶手動清了 AppCache 緩存，下次加載時，瀏覽器會重新生成緩存，也可算是一種緩存的更新
// AppCache 的緩存文件，與瀏覽器的緩存文件分開存儲的，因為 AppCache 在本地有 5MB（分 HOST）的空間限制
b. 特點(diǎn)

方便構(gòu)建Web App的緩存

專門為 Web App離線使用而開發(fā)的緩存機(jī)制

c. 應(yīng)用場景

存儲靜態(tài)文件（如JS、CSS、字體文件）

  1. 應(yīng)用場景 同 瀏覽器緩存機(jī)制
  2. 但AppCache 是對 瀏覽器緩存機(jī)制 的補(bǔ)充，不是替代。
d. 具體實現(xiàn)
        // 通過設(shè)置WebView的settings來實現(xiàn)
        WebSettings settings = getSettings();

        String cacheDirPath = context.getFilesDir().getAbsolutePath()+"cache/";
        settings.setAppCachePath(cacheDirPath);
        // 1. 設(shè)置緩存路徑

         settings.setAppCacheMaxSize(20*1024*1024);
        // 2. 設(shè)置緩存大小

        settings.setAppCacheEnabled(true);
        // 3. 開啟Application Cache存儲機(jī)制
    
// 特別注意
// 每個 Application 只調(diào)用一次 WebSettings.setAppCachePath() 和
 WebSettings.setAppCacheMaxSize()

3. Dom Storage 緩存機(jī)制

a. 原理
  • 通過存儲字符串的 Key - Value 對來提供

DOM Storage 分為 sessionStorage & localStorage； 二者使用方法基本相同，區(qū)別在于作用范圍不同：
a. sessionStorage：具備臨時性，即存儲與頁面相關(guān)的數(shù)據(jù)，它在頁面關(guān)閉后無法使用
b. localStorage：具備持久性，即保存的數(shù)據(jù)在頁面關(guān)閉后也可以使用。

b. 特點(diǎn)
  • 存儲空間大（ 5MB）：存儲空間對于不同瀏覽器不同，如Cookies 才 4KB
  • 存儲安全、便捷： Dom Storage 存儲的數(shù)據(jù)在本地，不需要經(jīng)常和服務(wù)器進(jìn)行交互

不像 Cookies每次請求一次頁面，都會向服務(wù)器發(fā)送網(wǎng)絡(luò)請求

c. 應(yīng)用場景

存儲臨時、簡單的數(shù)據(jù)

  1. 代替 **將 不需要讓服務(wù)器知道的信息 存儲到 cookies **的這種傳統(tǒng)方法
  2. Dom Storage 機(jī)制類似于 Android 的 SharedPreference機(jī)制
d. 具體實現(xiàn)
        // 通過設(shè)置 `WebView`的`Settings`類實現(xiàn)
        WebSettings settings = getSettings();

        settings.setDomStorageEnabled(true);
        // 開啟DOM storage

4. Web SQL Database 緩存機(jī)制

a. 原理

基于 SQL 的數(shù)據(jù)庫存儲機(jī)制

b. 特點(diǎn)

充分利用數(shù)據(jù)庫的優(yōu)勢，可方便對數(shù)據(jù)進(jìn)行增加、刪除、修改、查詢

c. 應(yīng)用場景

存儲適合數(shù)據(jù)庫的結(jié)構(gòu)化數(shù)據(jù)

d. 具體實現(xiàn)
        // 通過設(shè)置WebView的settings實現(xiàn)
        WebSettings settings = getSettings();

        String cacheDirPath = context.getFilesDir().getAbsolutePath()+"cache/";
        settings.setDatabasePath(cacheDirPath);
        // 設(shè)置緩存路徑

        settings.setDatabaseEnabled(true);
        // 開啟 數(shù)據(jù)庫存儲機(jī)制

特別說明

  • 根據(jù)官方說明，Web SQL Database存儲機(jī)制不再推薦使用（不再維護(hù)）
  • 取而代之的是 IndexedDB緩存機(jī)制，下面會詳細(xì)介紹

5. IndexedDB 緩存機(jī)制

a. 原理

屬于 NoSQL 數(shù)據(jù)庫，通過存儲字符串的 Key - Value 對來提供

類似于 Dom Storage 存儲機(jī)制 的key-value存儲方式

b. 特點(diǎn)
優(yōu)點(diǎn)
c. 應(yīng)用場景

存儲 復(fù)雜、數(shù)據(jù)量大的結(jié)構(gòu)化數(shù)據(jù)

d. 具體實現(xiàn)：
// 通過設(shè)置WebView的settings實現(xiàn)
        WebSettings settings = getSettings();

        settings.setJavaScriptEnabled(true);
        // 只需設(shè)置支持JS就自動打開IndexedDB存儲機(jī)制
        // Android 在4.4開始加入對 IndexedDB 的支持，只需打開允許 JS 執(zhí)行的開關(guān)就好了。

6 . File System

a. 原理
  • 為 H5頁面的數(shù)據(jù) 提供一個虛擬的文件系統(tǒng)
  1. 可進(jìn)行文件（夾）的創(chuàng)建、讀、寫、刪除、遍歷等操作，就像 Native App 訪問本地文件系統(tǒng)一樣
  2. 虛擬的文件系統(tǒng)是運(yùn)行在沙盒中
  3. 不同 WebApp 的虛擬文件系統(tǒng)是互相隔離的，虛擬文件系統(tǒng)與本地文件系統(tǒng)也是互相隔離的。
  • 虛擬文件系統(tǒng)提供了兩種類型的存儲空間：臨時 & 持久性：
    1. 臨時的存儲空間：由瀏覽器自動分配，但可能被瀏覽器回收
    2. 持久性的存儲空間：需要顯式申請；自己管理（瀏覽器不會回收，也不會清除內(nèi)容）；存儲空間大小通過配額管理，首次申請時會一個初始的配額，配額用完需要再次申請。
b. 特點(diǎn)
  • 可存儲數(shù)據(jù)體積較大的二進(jìn)制數(shù)據(jù)
  • 可預(yù)加載資源文件
  • 可直接編輯文件
c. 應(yīng)用場景

通過文件系統(tǒng) 管理數(shù)據(jù)

d. 具體使用

由于 File System是 H5 新加入的緩存機(jī)制，所以Android WebView暫時不支持

緩存機(jī)制匯總

緩存機(jī)制匯總

使用建議

  • 綜合上述緩存機(jī)制的分析，我們可以根據(jù) 需求場景的不同（緩存不同類型的數(shù)據(jù)場景） 從而選擇不同的緩存機(jī)制（組合使用）
  • 以下是緩存機(jī)制的使用建議：
使用建議

2.1.2 緩存模式

  • 定義
    緩存模式是一種 當(dāng)加載 H5網(wǎng)頁時 該如何讀取之前保存到本地緩存
    從而進(jìn)行使用 的方式

即告訴Android WebView 什么時候去讀緩存，以哪種方式去讀緩存

  • Android WebView 自帶的緩存模式有4種：
// 緩存模式說明: 
      // LOAD_CACHE_ONLY: 不使用網(wǎng)絡(luò)，只讀取本地緩存數(shù)據(jù)
      // LOAD_NO_CACHE: 不使用緩存，只從網(wǎng)絡(luò)獲取數(shù)據(jù).
      // LOAD_DEFAULT: （默認(rèn)）根據(jù)cache-control決定是否從網(wǎng)絡(luò)上取數(shù)據(jù)。
      // LOAD_CACHE_ELSE_NETWORK，只要本地有，無論是否過期，或者no-cache，都使用緩存中的數(shù)據(jù)。
  • 具體使用
WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
// 設(shè)置參數(shù)即可

2.2 資源預(yù)加載

  • 定義
    提早加載將需使用的H5頁面，即 提前構(gòu)建緩存

使用時直接取過來用而不用在需要時才去加載

  • 具體實現(xiàn)
    預(yù)加載WebView對象 & 預(yù)加載H5資源

2.2.1 預(yù)加載WebView對象

  • 此處主要分為2方面：首次使用的WebView對象 & 后續(xù)使用的WebView對象
  • 具體如下圖
示意圖

2.2.2 預(yù)加載H5資源

  • 原理
  1. 在應(yīng)用啟動、初始化第一個WebView對象時，直接開始網(wǎng)絡(luò)請求加載H5頁面
  2. 后續(xù)需打開這些H5頁面時就直接從該本地對象中獲取

a. 從而 事先加載常用的H5頁面資源（加載后就有緩存了）
b. 此方法雖然不能減小WebView初始化時間，但數(shù)據(jù)請求和WebView初始化可以并行進(jìn)行，總體的頁面加載時間就縮短了；縮短總體的頁面加載時間：

  • 具體實現(xiàn)
    在Android 的BaseApplication里初始化一個WebView對象（用于加載常用的H5頁面資源）；當(dāng)需使用這些頁面時再從BaseApplication里取過來直接使用

2.2.3 應(yīng)用場景

對于Android WebView的首頁建議使用這種方案，能有效提高首頁加載的效率

2.3 自身構(gòu)建緩存

為了有效解決 Android WebView 的性能問題，除了使用 Android WebView 自身的緩存機(jī)制，還可以自己針對某一需求場景構(gòu)建緩存機(jī)制。

2.3.1 需求場景

示意圖

2.3.2 實現(xiàn)步驟

  1. 事先將更新頻率較低、常用 & 固定的H5靜態(tài)資源 文件（如JS、CSS文件、圖片等） 放到本地
  2. 攔截H5頁面的資源網(wǎng)絡(luò)請求 并進(jìn)行檢測
  3. 如果檢測到本地具有相同的靜態(tài)資源 就 直接從本地讀取進(jìn)行替換 而 不發(fā)送該資源的網(wǎng)絡(luò)請求 到 服務(wù)器獲取
原理

2.3.3 具體實現(xiàn)

重寫WebViewClient 的 shouldInterceptRequest 方法，當(dāng)向服務(wù)器訪問這些靜態(tài)資源時進(jìn)行攔截，檢測到是相同的資源則用本地資源代替

// 假設(shè)現(xiàn)在需要攔截一個圖片的資源并用本地資源進(jìn)行替代

        mWebview.setWebViewClient(new WebViewClient() {
            // 重寫 WebViewClient  的  shouldInterceptRequest （）
            // API 21 以下用shouldInterceptRequest(WebView view, String url)
            // API 21 以上用shouldInterceptRequest(WebView view, WebResourceRequest request)
            // 下面會詳細(xì)說明

             // API 21 以下用shouldInterceptRequest(WebView view, String url)
            @Override
            public WebResourceResponse shouldInterceptRequest(WebView view, String url) {

                // 步驟1:判斷攔截資源的條件，即判斷url里的圖片資源的文件名
                if (url.contains("logo.gif")) {
                // 假設(shè)網(wǎng)頁里該圖片資源的地址為：http://abc.com/imgage/logo.gif
                // 圖片的資源文件名為:logo.gif

                    InputStream is = null;
                    // 步驟2:創(chuàng)建一個輸入流

                    try {
                        is =getApplicationContext().getAssets().open("images/abc.png");
                        // 步驟3:獲得需要替換的資源(存放在assets文件夾里)
                        // a. 先在app/src/main下創(chuàng)建一個assets文件夾
                        // b. 在assets文件夾里再創(chuàng)建一個images文件夾
                        // c. 在images文件夾放上需要替換的資源（此處替換的是abc.png圖片）

                    } catch (IOException e) {
                        e.printStackTrace();
                    }

                    // 步驟4:替換資源
                    WebResourceResponse response = new WebResourceResponse("image/png",
                            "utf-8", is);
                    // 參數(shù)1：http請求里該圖片的Content-Type,此處圖片為image/png
                    // 參數(shù)2：編碼類型
                    // 參數(shù)3：存放著替換資源的輸入流（上面創(chuàng)建的那個）
                    return response;
                }

                return super.shouldInterceptRequest(view, url);
            }

            
           // API 21 以上用shouldInterceptRequest(WebView view, WebResourceRequest request)
            @TargetApi(Build.VERSION_CODES.LOLLIPOP)
            @Override
            public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {

               // 步驟1:判斷攔截資源的條件，即判斷url里的圖片資源的文件名
                if (request.getUrl().toString().contains("logo.gif")) {
                // 假設(shè)網(wǎng)頁里該圖片資源的地址為：http://abc.com/imgage/logo.gif
                // 圖片的資源文件名為:logo.gif

                    InputStream is = null;
                    // 步驟2:創(chuàng)建一個輸入流

                    try {
                        is = getApplicationContext().getAssets().open("images/abc.png");
                         // 步驟3:獲得需要替換的資源(存放在assets文件夾里)
                        // a. 先在app/src/main下創(chuàng)建一個assets文件夾
                        // b. 在assets文件夾里再創(chuàng)建一個images文件夾
                        // c. 在images文件夾放上需要替換的資源（此處替換的是abc.png圖片

                    } catch (IOException e) {
                        e.printStackTrace();
                    }

                    // 步驟4:替換資源
                    WebResourceResponse response = new WebResourceResponse("image/png",
                            "utf-8", is);
                    // 參數(shù)1：http請求里該圖片的Content-Type,此處圖片為image/png
                    // 參數(shù)2：編碼類型
                    // 參數(shù)3：存放著替換資源的輸入流（上面創(chuàng)建的那個）
                    return response;
                }
                return super.shouldInterceptRequest(view, request);
            }

    });

}

2.3.5 具體實例

下面我將通過 替換主頁面（http:// ip.cn/）中的一個圖片（http:// s.ip-cdn.com/img/logo.gif） 來對靜態(tài)資源攔截 進(jìn)行說明。

為了更好的表現(xiàn)效果，我將替換的圖片換成別的圖片

實例說明1
實例說明2

具體步驟 & 代碼如下

步驟1：定義WebView布局
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="scut.carson_ho.webview_interceptrequest.MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

步驟2：進(jìn)行資源的攔截、檢測 & 替換（詳細(xì)請看注釋）
MainActivity.java

public class MainActivity extends AppCompatActivity {
    
    WebView mWebview;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        mWebview = (WebView) findViewById(R.id.webview);
        // 創(chuàng)建WebView對象

        mWebview.getSettings().setJavaScriptEnabled(true);
        // 支持與JS交互

        mWebview.loadUrl("http://ip.cn/");
        // 加載需要顯示的網(wǎng)頁

        mWebview.setWebViewClient(new WebViewClient() {

             // 復(fù)寫shouldInterceptRequest
             //API21以下用shouldInterceptRequest(WebView view, String url)
            @Override
            public WebResourceResponse shouldInterceptRequest(WebView view, String url) {

                // 步驟1:判斷攔截資源的條件，即判斷url里的圖片資源的文件名
                // 此處網(wǎng)頁里圖片的url為:http://s.ip-cdn.com/img/logo.gif
                // 圖片的資源文件名為:logo.gif

                if (url.contains("logo.gif")) {

                    InputStream is = null;
                    // 步驟2:創(chuàng)建一個輸入流


                    try {
                        is =getApplicationContext().getAssets().open("images/error.png");
                        // 步驟3:打開需要替換的資源(存放在assets文件夾里)
                        // 在app/src/main下創(chuàng)建一個assets文件夾
                        // assets文件夾里再創(chuàng)建一個images文件夾,放一個error.png的圖片

                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                    // 步驟4:替換資源

                    WebResourceResponse response = new WebResourceResponse("image/png",
                            "utf-8", is);
                    // 參數(shù)1:http請求里該圖片的Content-Type,此處圖片為image/png
                    // 參數(shù)2:編碼類型
                    // 參數(shù)3:替換資源的輸入流

                    System.out.println("舊API");
                    return response;
                }

                return super.shouldInterceptRequest(view, url);
            }


            // API21以上用shouldInterceptRequest(WebView view, WebResourceRequest request)
            @TargetApi(Build.VERSION_CODES.LOLLIPOP)
            @Override
            public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {

                // 步驟1:判斷攔截資源的條件，即判斷url里的圖片資源的文件名
                // 此處圖片的url為:http://s.ip-cdn.com/img/logo.gif
                // 圖片的資源文件名為:logo.gif
                if (request.getUrl().toString().contains("logo.gif")) {

                    InputStream is = null;
                    // 步驟2:創(chuàng)建一個輸入流

                    try {
                        is = getApplicationContext().getAssets().open("images/error.png");
                        // 步驟3:打開需要替換的資源(存放在assets文件夾里)
                        // 在app/src/main下創(chuàng)建一個assets文件夾
                        // assets文件夾里再創(chuàng)建一個images文件夾,放一個error.png的圖片

                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                    //步驟4:替換資源
                   
                    WebResourceResponse response = new WebResourceResponse("image/png",
                            "utf-8", is);
                    // 參數(shù)1：http請求里該圖片的Content-Type,此處圖片為image/png
                    // 參數(shù)2：編碼類型
                    // 參數(shù)3：存放著替換資源的輸入流（上面創(chuàng)建的那個）
                    
                    return response;
                }
                return super.shouldInterceptRequest(view, request);
            }

    });

}
}

步驟3：加入網(wǎng)絡(luò)權(quán)限
Manifest.xml

 <uses-permission android:name="android.permission.INTERNET"/>

Demo地址

Carson_Ho的Github地址

特別注意

關(guān)于上述放到本地的靜態(tài)資源也是可以更新的：

  1. 發(fā)布新版本安裝更新
  2. 增量更新：在用戶處于WIFI環(huán)境時讓服務(wù)器推送到本地

很多著名的App（如微信）就是采用小范圍更新本地資源的

這種緩存機(jī)制的好處

  • 有效解決 H5頁面靜態(tài)資源 加載速度慢 & 流量消耗多的問題

  • 開發(fā)成本低

    1. 沒有改變前端H5的任何代碼，不需要為 APP 做定制化的東西
    2. 該方法只是更好地加快H5加載速度，哪怕失效，也不會對H5頁面產(chǎn)生其他負(fù)面影響

  • 同樣能獲得相應(yīng)的cookie
    發(fā)送的網(wǎng)絡(luò)請求會直接帶上先前用戶操作所留下的 cookie 而都能夠留下來，因為我們沒有更改資源的 URL 地址

3. 總結(jié)

歡迎關(guān)注Carson_Ho的簡書

不定期分享關(guān)于安卓開發(fā)的干貨，追求短、平、快，但卻不缺深度。

請點(diǎn)贊！因為你的鼓勵是我寫作的最大動力！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容