應用中許多網頁由於優化的不夠理想,出現加載慢,加載時間長等,而且因為碎片化導致兼容性問題,有一些網頁有視頻內容,產品還提出各種小窗需求,搞得心力憔悴。找到公開的有crosswalk和x5webview,經過分析和研究決定上x5weview,他的好處有哪些呢?
1. TBS(騰訊瀏覽服務)的優勢
1) 速度快:相比系統webview的網頁打開速度有30+%的提升;
2) 省流量:使用雲端優化技術使流量節省20+%;
3) 更安全:安全問題可以在24小時內修復;
4) 更穩定:經過億級用戶的使用考驗,CRASH率低於0.15%;
5) 兼容好:無系統內核的碎片化問題,更少的兼容性問題;
6) 體驗優:支持夜間模式、適屏排版、字體設置等瀏覽增強功能;
7) 功能全:在Html5、ES6上有更完整支持;
8) 更強大:集成強大的視頻播放器,支持視頻格式遠多於系統webview;
9) 視頻和文件格式的支持x5內核多於系統內核
10) 防劫持是x5內核的一大亮點
2. 運行環境
1)手機ROM版本高於或等於2.2版本
2)手機RAM大於500M,該RAM值通過手機 /proc/meminfo 文件的MemTotal動態獲取
注:如果不滿足上述條件,SDK會自動切換到系統WebView,SDK使用者不用關心該切換過程。
3. SDK尺寸指標
1)SDK提供的JAR包約250K
經過實際測試對一些頁面的支持確實比原生的好,尤其是對視頻的支持上面,解碼和加載效果明顯。而且對一些非常重的頁面支持比較好,經常發現有一些在PC端的頁面直接就甩過來丟到app上面,一看幾十M,加載半天加載不出來,而且白屏,特別煩。關鍵webview還是有點問題的,有時候加載錯誤也不回調,進度直接卡死。
集成步驟:
1.導入jar包.
2.導入so庫。這里需要注意的是,只提供了ameabli的,如果要求其他的直接考一個到讀應的目錄就行。
3.權限聲明增加下面配置:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" />
4.替換到app中原先所有的webview,包括布局和動態創建的webview--x5webview。
5.初始化,上報錯誤可以不加。
QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() { @Override public void onViewInitFinished(boolean finished) { //x5內核初始化完成的回調,為true表示x5內核加載成功,否則表示x5內核加載失敗,會自動切換到系統內核。 LogUtil.e("my", " onViewInitFinished is " + finished); } @Override public void onCoreInitFinished() { LogUtil.e("my", " onCoreInitFinished " ); } }; //x5內核初始化接口 try { QbSdk.initX5Environment(getApplicationContext(), cb); } catch (Exception e) { } CrashReport.UserStrategy strategy = new CrashReport.UserStrategy(getApplicationContext()); strategy.setCrashHandleCallback(new CrashReport.CrashHandleCallback() { public Map<String, String> onCrashHandleStart(int crashType, String errorType, String errorMessage, String errorStack) { LinkedHashMap<String, String> map = new LinkedHashMap<String, String>(); String x5CrashInfo = com.tencent.smtt.sdk.WebView.getCrashExtraMessage(getApplicationContext()); map.put("x5crashInfo", x5CrashInfo); return map; } @Override public byte[] onCrashHandleStart2GetExtraDatas(int crashType, String errorType, String errorMessage, String errorStack) { try { return "Extra data.".getBytes("UTF-8"); } catch (Exception e) { return null; } } });
7.注意事項
如果需要使用播放器功能,需要播放的頁面在清單文件中加入,不加的話,呵呵呵,比如小窗模式 在某些手機上就用不了
頁面的Activity需要聲明android:configChanges="orientation|screenSize|keyboardHidden"
為了避免閃爍的問題,在activity中要加入:
getWindow().setFormat(PixelFormat.TRANSLUCENT);(這個對宿主沒什么影響,建議聲明)
不要去嘗試調用
webview.setLayerType() webview.setDrawingCacheEnabled(true);
重要的點,關於websettings的設置,一定按照demo中的來,我的配置如下
WebSettings webSetting = this.getSettings(); webSetting.setJavaScriptEnabled(true); webSetting.setJavaScriptCanOpenWindowsAutomatically(true); webSetting.setAllowFileAccess(true); webSetting.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS); webSetting.setSupportZoom(true); webSetting.setBuiltInZoomControls(true); webSetting.setUseWideViewPort(true); webSetting.setSupportMultipleWindows(true); webSetting.setLoadWithOverviewMode(true); webSetting.setAppCacheEnabled(true); // webSetting.setDatabaseEnabled(true); webSetting.setDomStorageEnabled(true); webSetting.setGeolocationEnabled(true); webSetting.setAppCacheMaxSize(Long.MAX_VALUE); // webSetting.setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY); webSetting.setAppCachePath(getContext().getDir("appcache", 0).getPath()); webSetting.setDatabasePath(getContext().getDir("databases", 0).getPath()); webSetting.setGeolocationDatabasePath(getContext().getDir("geolocation", 0).getPath()); webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND); // webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH); webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE); //增加 // webSetting.setTextSize(WebSettings.TextSize.NORMAL); //支持混合模式 // if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { // webSetting.setMixedContentMode(android.webkit.WebSettings.MIXED_CONTENT_ALWAYS_ALLOW); // } //接口禁止(直接或反射)調用,避免視頻畫面無法顯示: // setLayerType(View.LAYER_TYPE_SOFTWARE,null); // setDrawingCacheEnabled(true); // this.getSettingsExtension().setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);//extension // settings 的設計 CookieSyncManager.createInstance(getContext()); CookieSyncManager.getInstance().sync();
接入以后遇到一些詭異的問題:
1.小窗有些手機上無法使用,發現是清單文件聲明少了導致的
2.發現攔截無網絡的errordes和webview的不同
3.發現極簡的app,在首次加載網頁會出現加載不出來的問題,經過調試發現原來是x5webview還沒有初始化完成,就在activity中調用了x5webview導致的,所以一定要注意預加載的回調。
4.關於線上問題的查漏補缺,記得帶上x5webview的版本號