TBS 腾讯浏览服务(X5WebView) 集成指南

TBS 腾讯浏览服务之X5WebView集成指南

极客星云

6965人浏览 · 2019-06-15 18:38:14

极客星云 · 2019-06-15 18:38:14 发布

TBS 腾讯浏览服务之X5WebView集成指南

1. 什么是腾讯浏览服务?
2.如何集成TBS 腾讯浏览服务?

1. 什么是腾讯浏览服务?

1.1 腾讯浏览服务

移动互联网时代，Web成为各超级App的通用基础技术。Web浏览不再局限于传统浏览器，相反已经进入绝大部分App的各类应用场景。越来越多的App基于Hybrid模式开发和部署业务。
腾讯浏览服务（TBS，Tencent Browsing Service）整合腾讯底层浏览技术和腾讯平台资源及能力，提供整体浏览服务解决方案。腾讯浏览服务面向应用开发商和广大开发者，提供浏览增强，内容框架，广告体系，H5游戏分发，大数据等服务，能够帮助应用开发商大幅改善应用体验，有效提升开发，运营，商业化的效率。
腾讯浏览服务目前已接入超过1000款App，涵盖20个多个行业和领域；目前平台日活跃用户超5亿；日均处理访问需求超 110亿次，累计处理移动页面需求已接近57000亿次。腾讯浏览服务的发布同时也意味着腾讯首次对外开放万亿级数据能力为行业伙伴提供服务。

1.2 浏览增强

传统系统内核(Webview)存在适配成本高、不安全、不稳定、耗流量、速度慢、视频播放差、文件能力差等问题，这是移动应用开发商在进行Hybrid App开发时普遍面临的难题。腾讯浏览服务基于腾讯X5内核解决方案（包括内核和云服务），能够有效解决传统移动web技术面临的普遍问题，同时能极大扩展应用(Hybrid App)内浏览场景的服务能力。

1.2.1 安全

腾讯浏览服务为应用浏览场景提供完善的安全保障体系，包括：云安全方案：保障数据安全，防恶意劫持（DNS劫持,HTTP劫持等），防恶意网址，防恶意文件下载等；端安全方案：及时解决系统内核无法解决的各类风险和漏洞，支持热修复，24小时安全问题解决机制。

1.2.2 极速,省流

腾讯浏览服务在云端对网页及资源流进行压缩，在终端优化网页加载全流程。基于腾讯浏览服务，流量消耗普遍可减少20%~40%，网页加载速度平均可提升35%。

1.2.3 可靠

经过亿级用户的使用考验，腾讯浏览服务crash率低于0.06%。

1.2.4 兼容

Android应用及前端开发都面临严重碎片化问题，不同尺寸手机，不同操作系统，不同浏览器内核的浏览效果可能大相径庭，开发者须付出极大适配成本。
X5内核基于统一Blink内核，无缝隐藏系统差异，在所有Android手机平台表现一致；同时，X5也是微信、手机QQ、手机QQ空间、手机QQ浏览器等超级App的内核。腾讯浏览服务可以帮助开发者实现一次开发，同时适配App、手机浏览器、社交媒体，有效提升应用开发效率。

1.2.5 HTML5能力

腾讯浏览服务提供完善的HTML5能力支持。特别是，腾讯浏览服务针对canvas, webGL的渲染能力和性能大大优于传统内核，能够有效支持复杂的HTML5手游（包括基于HTML5的3D,VR类游戏）实现不逊色于Native的性能体验。基于腾讯浏览服务的HTML5游戏可以流畅运行于国内市场占有率领先的HTML5手机游戏渠道，包括手机QQ浏览器页游平台、手机QQ空间玩吧等。

1.2.6 内核共享

基于腾讯浏览服务，应用可以与超级应用（如微信、手机QQ、手机QQ空间、手机QQ浏览器）宿主共享X5内核，因而应用只需集成约200K
size的SDK即可使用腾讯浏览服务。

1.2.7 增强浏览能力

1.2.7.1 文件打开能力

目前支持42种文件格式，包括20种文档、12种音乐、6种图片和4种压缩包。帮助应用实现应用内文档浏览，无需跳转调用其他应用。

1.2.7.2 视频支持能力

目前支持26种视频格式。

1.2.7.3 下载能力

腾讯浏览服务内嵌下载能力。基于腾讯浏览服务，应用无需调用其他下载资源，有效减少劫持换包风险。

1.2.7.4 浏览体验扩展

腾讯浏览服务提供丰富的浏览功能扩展，提升浏览体验

1.3 整合能力开放

腾讯浏览服务不仅是移动互联网的Web技术解决方案，同时，基于腾讯庞大的内容和运营体系，整合内容框架和商业能力，腾讯浏览服务还向合作伙伴开放：内容，商业，数据能力，帮助合作伙伴有效运营内容，提升用户粘性，实现商业变现。同时，腾讯浏览服务宣布不参与广告分成，将收益100%给合作伙伴。

1.3.1 内容能力

腾讯浏览服务内容模块包含资讯、视频、小说、游戏以及独有的微信热文等，合作伙伴可以根据自身产品形态和用户群体选择自定义的内容模块接入，对自身产品服务进行补充。
例如针对HTML5游戏，腾讯浏览服务提供从技术到运营和变现，包括技术平台，游戏选型，运营，框架集成，登录，支付等的端到端服务，帮助合作伙伴一键接入HTML5游戏运营平台，基于自身业务属性低成本运营HTML5游戏。

1.3.2 大数据服务能力

腾讯浏览服务的大数据能力基于腾讯庞大的产品体系，包括微信、手机QQ、手机QQ浏览器等超级应用以及各类垂直应用。腾讯浏览服务为合作伙伴所提供的内容、广告能力均基于腾讯立体化的的数据系统。合作伙伴可以通过腾讯浏览服务提升数据分析能力，更有效率地运营内容。

1.3.3 商业能力

基于腾讯浏览服务广告框架的腾讯广告联盟
合作伙伴可通过腾讯浏览服务广告框架接入腾讯广告联盟，在不影响用户体验的情况下于内容模块以及其他产品页面中嵌入广告位。广告主资源由腾讯广告联盟提供，同时腾讯宣布不参与广告分成，目前阶段将该部分收益100%分给合作伙伴。腾讯浏览服务和腾讯广告联盟基于腾讯的大数据能力，能够为合作伙伴的用户赋予更多标签，提升广告效果，兼顾用户体验，从而为合作伙伴提供更好的收益。
商业Portal
合作伙伴可便捷接入腾讯浏览服务提供的定制化商业Portal，基于应用自身属性运营内容并直接获得其中的商业收益。

浏览是移动互联网最基础的功能之一，腾讯希望通过资源和能力的聚合将浏览的价值进行更好的挖掘，并通过服务的形式提供给合作伙伴。腾讯希望将整合了全新能力和资源的浏览价值通过服务的形式共享给合作伙伴，让数据和技术在更大范围内创造出不一样的精彩。

1.4 TBS (腾讯浏览服务)的优势

速度快：相比系统webview的网页打开速度有30+%的提升；
省流量：使用云端优化技术使流量节省20+%；
更安全：安全问题可以在24小时内修复；
更稳定：经过亿级用户的使用考验，CRASH率低于0.15%；
兼容好：无系统内核的碎片化问题，更少的兼容性问题；
体验优：支持夜间模式、适屏排版、字体设置等浏览增强功能；
功能全：在Html5、ES6上有更完整支持；
更强大：集成强大的视频播放器，支持视频格式远多于系统webview；
视频和文件格式的支持x5内核多于系统内核
防劫持是x5内核的一大亮点

2.如何集成TBS 腾讯浏览服务?

官网: https://x5.tencent.com
反馈：https://x5.tencent.com/tbs/feedback.html

2.1 下载SDK

SDK 下载地址: https://x5.tencent.com/tbs/sdk.html

2.2 将SDK中的Lib 添加到项目中

切换到Project 视图我们才能看到Libs 文件夹
下载SDK压缩包Libs 文件夹下的Jar 复制到libs 文件夹下
选中项目右键,Open Module Settings
为项目添加刚才引入的依赖
然后选择刚才的jar
选好后如下所示:

2.3 添加*.so 库

值得注意的是,我们还是切换到project视图,在src/main 目录下创建
jniLibs 文件夹

复制 \TBSSDK_43646_1557142332012\TBSSDK_43646\SDK接入示例-Android Studio\SDK接入示例-AndroidStudio\X5WebDemo\src\main\jniLibs\armeabi\liblbs.so
到这四个文件夹下.

修改module/build.gradle 配置文件如下:

android {
    compileSdkVersion 28
    buildToolsVersion "29.0.0"
    defaultConfig {
        applicationId "com.xingyun.smartx5webviewsample"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        // Specifies the ABI configurations of your native
        // libraries Gradle should build and package with your APK.
        ndk {
            abiFilters "armeabi", "x86",'x64','x86_64'
        }
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

值得注意的是:
abiFilters “armeabi”, “x86”,‘x64’,‘x86_64’
对应的是四个文件夹如下:
在这里插入图片描述

除非我们在build.gradle 中添加了: jniLibs.srcDir:customerDir
否则 Android Studio 默认加载so 目录为：src/main/jniLibs
如果没有这四个文件夹,则会报错崩溃,启动不了,安装不上apk.
so加载目录请只保留armeabi或者armeabi-v7a

这四个东西是什么呢?
创建模拟器的时候我们可以看到
在这里插入图片描述

2.4 AndroidManifest.xml里加入权限声明

<!-- 请求网络权限 -->
    <uses-permission android:name="android.permission.INTERNET" />
    <!-- 读存储权限 -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <!-- 写存储权限 -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!-- 网络状态权限 -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <!-- WIFI 状态权限 -->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <!-- 手机状态权限 -->
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <!-- 读取设置权限 -->
    <uses-permission android:name="android.permission.READ_SETTINGS" />

2.5 初始化X5 浏览器内核

2.5.1 AndroidManifest.xml里添加自定义的Application类

     <application
        android:name=".MyApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:windowSoftInputMode="stateHidden|adjustResize"
        android:usesCleartextTraffic="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

注意:
这里要添加的是name 属性,值为我们自定义的应用程序类
android:name=".MyApplication"
避免输入法界面弹出后遮挡输入光标的问题
android:windowSoftInputMode="stateHidden|adjustResize"
Android 新版本默认不支持Http 请求,需要支持Http请求需要添加:
android:usesCleartextTraffic="true"

2.5.2 自定义应用程序类中初始化X5 内核

import android.app.Application;
import android.util.Log;

import com.tencent.smtt.sdk.QbSdk;

public class MyApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();

        //初始化X5 浏览器内核
        initX5WebViewCore();
    }

    private void initX5WebViewCore() {
        //搜集本地tbs内核信息并上报服务器，服务器返回结果决定使用哪个内核。
        QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {

            @Override
            public void onViewInitFinished(boolean arg0) {
                // TODO Auto-generated method stub
                //x5內核初始化完成的回调，为true表示x5内核加载成功，否则表示x5内核加载失败，会自动切换到系统内核。
                Log.d("swallow", " onViewInitFinished is " + arg0);
            }

            @Override
            public void onCoreInitFinished() {
                // TODO Auto-generated method stub
                Log.d("swallow", " onCoreInitFinished");
            }
        };
        //x5内核初始化接口
        QbSdk.initX5Environment(getApplicationContext(),  cb);
    }
}

2.6 重写自定义X5WebView

我们实际开发中一般不直接使用X5WebView 而是继承它自定义一个.

值得注意的是,我们继承的WebView 并不是Android 自带的WebView,
而是com.tencent.smtt.sdk.WebView 包下的WebView.

package com.xingyun.smartx5webviewsample.custom;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.View;
import android.widget.TextView;

import com.tencent.smtt.sdk.WebSettings;
import com.tencent.smtt.sdk.WebSettings.LayoutAlgorithm;
import com.tencent.smtt.sdk.WebView;

public class X5WebView extends WebView {
	TextView title;

	@SuppressLint("SetJavaScriptEnabled")
	public X5WebView(Context arg0, AttributeSet arg1) {
		super(arg0, arg1);
//		 this.setWebChromeClient(chromeClient);
//		 WebStorage webStorage = WebStorage.getInstance();
		initWebViewSettings();
		this.getView().setClickable(true);
	}

	@SuppressLint("SetJavaScriptEnabled")
	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);

		// this.getSettingsExtension().setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);//extension
		// settings 的设计
	}

	@Override
	protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
		boolean ret = super.drawChild(canvas, child, drawingTime);
		return ret;
	}

	public X5WebView(Context arg0) {
		super(arg0);
		setBackgroundColor(85621);
	}
}

2.7 修改界面

activity_main.xml 如下:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.xingyun.smartx5webviewsample.custom.X5WebView
        android:id="@+id/myX5WebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

注意: 这里的X5WebView 就是我们刚自定义的WebView

2.8 添加视图绑定框架依赖

app/build.gradle

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta1'
    testImplementation 'junit:junit:4.13-beta-3'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    /** X5 WebView */
    implementation files('libs\\tbs_sdk_thirdapp_v3.6.0.1310_43612.jar')

    /** UI View 绑定框架**/
    implementation 'com.jakewharton:butterknife:8.8.1'
    annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'
}

2.9 主活动中调用

import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;

import com.tencent.smtt.export.external.interfaces.SslError;
import com.tencent.smtt.export.external.interfaces.SslErrorHandler;
import com.tencent.smtt.sdk.WebView;
import com.tencent.smtt.sdk.WebViewClient;
import com.xingyun.smartx5webviewsample.custom.X5WebView;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.myX5WebView)
    X5WebView myX5WebView;

    private static final String BASE_URL="http://www.baidu.com";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        myX5WebView.clearCache(true);
        myX5WebView.clearHistory();
        myX5WebView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView webView, String url) {
                Log.d("swallow","shouldOverrideUrlLoading------>"+url);
                if(url.startsWith("http://")||url.startsWith("https://")){
                    webView.loadUrl(url);
                    return true;
                }else{
                    return false;
                }
            }

            @Override
            public void onPageStarted(WebView webView, String s, Bitmap bitmap) {
                Log.d("swallow","onPageStarted------->"+s);
                super.onPageStarted(webView, s, bitmap);
            }


            @Override
            public void onPageFinished(WebView webView, String s) {
                super.onPageFinished(webView, s);
                Log.d("swallow","onPageFinished------->"+s);
                webView.setLayerType(View.LAYER_TYPE_HARDWARE,null);
            }

            @Override
            public void onReceivedSslError(WebView webView, SslErrorHandler sslErrorHandler, SslError sslError) {
                sslErrorHandler.proceed();
            }
        });
        myX5WebView.loadUrl(BASE_URL);
    }
}

2.10 启动程序

启动程序如下所示:
在这里插入图片描述

本文源码下载
本文主要TBS 浏览服务的浏览功能
更多其他能力,请参考官方文档
TBS 接入文档 https://x5.tencent.com/tbs/guide/sdkInit.html

腾讯安全开发者社区

更多推荐

CCSK云安全认证-M3-管理云计算的安全性和风险

CCSK-M3-管理云计算的安全性和风险一.云计算安全治理与风险管理1.1 治理1.2 云治理工具二. 企业风险管理2.1 企业风险管理2.2 服务模式和部署方式的影响2.3 云风险管理的工具三.法律问题，合同和电子举证四.合规和审计五.CSA 工具一.云计算安全治理与风险管理1.1 治理管理云计算时要记住的首要问题是，一个组织永远不能外包治理的责任，即使是使用外部供应商的情况下。无论...

腾讯安全开发者社区

抗疫先锋 | 青藤云安全，守护安全最后一公里防线

2020年，受到新型冠状病毒的影响，无数云计算企业扮演了关键的抗击疫情技术角色，以「云+产业」的模式，在疫情监控、远程医疗、协同办公、在线教育等领域，帮助企业上云、在线提供服务。青藤云安...

腾讯安全开发者社区

大数据时代：云安全策略有哪些？

云计算与大数据的结合可以说是天作之合。大数据需要灵活的计算环境，而后者可以快速、自动地进行扩展以支持海量数据。基础设施云可以精准地提供这些需求。但是无论什么时候对云计算展开讨论，我们都无法回避以下问题：当在大数据使用案例中提及云安全策略时，我们希望任何安全解决方案都能够在不影响部署安全性的情况下提供与云一样的灵活性。在将大数据转移至云上时，以下四个小贴士可以让用户既能享受到云计算的灵活性又能获得严