背景

由於網路或者其他原因，使用者在訪問我們的網頁的時候出現載入白屏空屏問題，希望移動端去檢測到這個白屏之後給到一些優化操作。這裡重點說下Android的兩種白屏檢測方式。

檢測方式

1.通過在網頁載入結束之後，對Webview截圖分析截圖頁面的畫素，如果白色或者同色的畫素點較多，則認為是白屏。下面是實現方式

    private fun checkIsEmptyPage(
        bitmap: Bitmap?,
        succeed: () -> Unit,
        error: () -> Unit,
        completed: () 
 
-> Unit
    ) {
        if (bitmap == null) {
            error.invoke()
            completed.invoke()
            return@checkIsEmptyPage
        }


        GlobalScope.launch(Dispatchers.IO) {
            val width = bitmap.width
            val height = bitmap.height

            for (x in 0 until width) {
                
 
for (y in 0 until height) {
                    if (bitmap.getPixel(x, y) == -1) {
                        whitePixelCount++
                    }
                }
            }

            if (whitePixelCount > 0) {
                rate = whitePixelCount * 100f / width / height

            }

            
 
//檢測發現不是白屏，開始二次檢測
            if (rate <= threshold){

                val colorMap =  mutableMapOf<Int,Int>()
                for (x in 0 until width) {
                    for (y in 0 until height) {
                        val times = colorMap[bitmap.getPixel(x, y)]?:0
                        val timesAdd = times+1
                        colorMap[bitmap.getPixel(x,y)] = timesAdd
                    }
                }

                var maxTimes = -1

                colorMap.forEach {
                    if (maxTimes<it.value){
                        maxTimes = it.value
                    }
                }

                if (maxTimes>0){
                    rate = maxTimes * 100f / width / height
                }

            }

            bitmap.recycle()

            GlobalScope.launch(Dispatchers.Main) {
                if (rate > threshold) {
                    //page empty
                    error?.invoke()
                } else {
                    succeed?.invoke()
                }
                completed.invoke()
            }

        }.bindLifeCycle(lifecycle)


    }

獲取到Webview截圖的bitmap然後對其進行一個畫素點掃描，程式碼比較簡單這裡貼出主要程式碼。說一下這種方式的利弊，這種方式適合正常頁面的元素較多，內容比較豐富的情況，如果這個頁面只有幾個文字的話也容易被誤檢測為白屏，檢測效果並不是特別好。容易出現誤判。並不推薦。

2.通過對網頁內容的分析比對

這裡對網頁內容進行分析又兩種方式一個是JS注入的方式，打印出網頁的內容。這個方式對頁面又侵入性，不太推薦。這裡不多介紹，那麼還有一種方式，書籤的形式，安卓的瀏覽器其實自帶又書籤的功能，他能將網頁離線暫存到本地。我們可以通過這個方式獲取到網頁的內容。順道提一下，這個書籤在iOS平臺是沒有的，不得不說android的webview是比iOS的功能強大一些。

  webview?.saveWebArchive(view.context.filesDir.path+"/tempCollection.mht",false
                    ) {
                        val file = File(it)
                        if ( file.exists()){
                            val text = file.readText()
                            Log.e("WebViewHelper",text.toString()
                        }
                        file.delete()

                    }

saveWebArcchive方法是非同步的，在儲存網頁之後回掉介面會返回你傳入的路徑如果這個路徑不為空那麼說明當前webview載入的內容被存了下來。或者內容之後你可以通過的html做判斷或者對這個file內容做對比，從而確定你的網頁當前是否是白屏沒加載出東西了。