Android4.4以下 WebView的兼容性

WebView适配,在很多人眼中就是一场噩梦。 尤其是在低端手机上适配 加载flash 播放视频 加载小游戏等。

 

本人最新公司要求,用WebView接入一款H5的小游戏。

发现很尴尬,在4.4一下的Android不能使用 ,连动画都没有。

不废话了 直接上图看效果

 

 

Android 5.0的效果

Android4.4以下 WebView的兼容性_第1张图片

 

Android4.4的效果

 

Android4.4以下 WebView的兼容性_第2张图片

 

 

 

那为什么会出现这种效果呢?

 

原因:

WebView是android系统提供能显示网页的系统控件,它是一个特殊的View,同时它也是一个ViewGroup可以有很多其他子View。在Android 4.4以下(不包含4.4)系统WebView底层实现是采用WebKit内核,而在Android 4.4及其以上Google 采用了chromium内核作为系统WebView的底层内核支持。在这一变化中Android 提供的WebView相关API并没有发生大变化,在4.4上也兼容低版本的API并且引进了少部分API。这里简单介绍下基于Chromium 的Webview和基于Webkit webview的差异,基于Chromium Webview提供更广的HTML5,CSS3,JavaScript支持,在目前最新Android 系统版本5.0上基于chromium 37,Webview提供绝大多数的html5特性支持。Webkitjavascript引起采用WebCore Javascript 在Android 4.4上换成了V8能直接提升JavaScript性能。另外Chromium 支持远程调试(Chrome DevTools)。

 

WebKit for WebView VS Chromium for WebView性能比对  

                         Webkit          Chromium                备注
HTML5             278                 434               http://html5test.com
远程调试         不支持              支持              Android 4.4及以上支持
内存占用             小                    大                   相差20-30M左右
WebAudio     不支持              支持             Android 5.0及以上支持
WebGL           不支持              支持             Android 5.0及以上支持
WebRTC         不支持              支持             Android 5.0及以上支持

因此问题在于WebView内核上,为了解决适配问题,只能使用第三方内核

 

本人在这里使用的是腾讯的TbsX5(腾讯浏览服务)  点我下载

 

怎么使用?

 

1.jar包

将jar导入到libs目录下

2.so库

在main文件下创建jniLibs

 

3.引入ndk

x5暂时不提供64位so文件,为了保证64位手机能正常加载x5内核,官方给出的64位手机解决方案

打开对应app中的build.gradle文件,在文件的android{}中的defaultConfig{}里添加如下配置:

ndk{abiFilters "armeabi", "armeabi-v7a", "x86", "mips"}

 

Android4.4以下 WebView的兼容性_第3张图片

 

4.添加权限






5.X5WebView引入

使用X5WebView我们还要添加一个X5WebView.java类

public class X5WebView extends WebView {
    private WebViewClient client = new WebViewClient() {
        // 防止加载网页时调起系统浏览器
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    };
 
    public X5WebView(Context arg0) {
        super(arg0);
        setBackgroundColor(85621);
    }
 
    @SuppressLint("SetJavaScriptEnabled")
    public X5WebView(Context arg0, AttributeSet arg1) {
        super(arg0, arg1);
 
        this.setWebViewClient(client);
        // this.setWebChromeClient(chromeClient);
        // WebStorage webStorage = WebStorage.getInstance();
        initWebViewSettings();
        this.getView().setClickable(true);
    }
 
    private void initWebViewSettings() {
        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.setPluginState(WebSettings.PluginState.ON_DEMAND);
        // webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH);
        webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE);
    }
 
}


6.Application中X5的预加载

public class BaseApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        initTBS();
    }
 
    /**
     * 初始化TBS浏览服务X5内核
     */
    private void initTBS() {
        //搜集本地tbs内核信息并上报服务器,服务器返回结果决定使用哪个内核。
        QbSdk.setDownloadWithoutWifi(true);//非wifi条件下允许下载X5内核
        QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {
 
            @Override
            public void onViewInitFinished(boolean arg0) {
                //x5內核初始化完成的回调,为true表示x5内核加载成功,否则表示x5内核加载失败,会自动切换到系统内核。
                Log.d("app", " onViewInitFinished is " + arg0);
            }
 
            @Override
            public void onCoreInitFinished() {}
        };
        //x5内核初始化接口
        QbSdk.initX5Environment(getApplicationContext(), cb);
    }
}

 

最后 在xml中把引用WebView 全部替换为X5WebView即可。

 

 

 

你可能感兴趣的:(Android4.4以下 WebView的兼容性)