简单心理 · 技术团队

github.com/jiandanxinli

WebView·开车指南

2016-08-31BugDev
北京市东城区首席Bug布道师开山之作,一整月交通事故血泪经验,教你如何快速成为‘伪’老司机,开启WebView飙车之旅。

Tips

  1. 由于WebView的用法实在太多,如果您只是想查询某个功能的使用——建议Ctrl+F(Commad+F)在本页面搜索关键字查找。
  2. 文章给前半部分大多是方法的介绍,若嫌琐碎可直接拖到最后看代码演示。

Thanks for reading~!٩(♡ε♡ )۶

前言

喝酒不开车,开车不喝酒。

目录

  1. WebView简介
  2. WebView基本使用
  3. WebView常用方法
  4. WebSettings
  5. WebViewClient
  6. WebChromeClient
  7. JavaScript与WebView交互
  8. WebView加载优化
  9. 驾照考试
  10. 上路

WebView简介

为了方便开发者实现在app内展示网页并与网页交互的需求,Android SDK提供了WebView组件。

它继承自AbsoluteLayout,展示网页的同时,也可以在其中放入其他的子View。

现如今,Hybrid应用似乎占据的APP的主流类型,那么关于WebView的使用就变得越发的重要。

从Android 4.4(KitKat)开始,原本基于WebKit的WebView开始基于Chromium内核,这一改动大大提升了WebView组件的性能以及对HTML5,CSS3,JavaScript的支持。不过它的API却没有很大的改动,在兼容低版本的同时只引进了少部分新的API,并不需要你做很大的改动。

不过有几点改变需要注意,但我尝试着翻译了下,发现还是英文原文说得好,所以我贴链接吧~~~

Migrating to WebView in Android 4.4

在WebView中,有几个地方是我们可以使用来定制我们的WebView各种行为的,分别是:WebSettingsJavaScriptInterfaceWebViewClient以及WebChromeClient。这些我都会在接下来的文章中一一介绍。

WebView基本使用

下面简单介绍下WebView的基本使用:

首先新建一个工程,在layout文件里放入一个WebView控件(当然也可以通过Java代码动态放入,这里不演示了)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

然后在Activity的onCreate方法里写入如下代码:

String url = "https://www.google.com";
WebView webView = (WebView) findViewById(R.id.web_view);
webView.loadUrl(url);

接着在AndroidManifest声明访问网络的权限:

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

就,完事了~

这时运行app,它已经可以访问指定地址的网页了。

上面提到了WebView继承自AbsoluteLayout,可以在其中放入一些子View,那也顺手来一下。

Layout文件改为:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

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

      <Button
          android:id="@+id/button"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_x="170dp"
          android:layout_y="400dp"
          android:background="@color/colorAccent"
          android:text="@string/app_name" />
  </WebView>
</LinearLayout>

Activity的onCreate里加上:

Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Toast.makeText(getApplicationContext(), "系好安全带!", Toast.LENGTH_SHORT).show();
    }
});

这时,运行app,里面就会多出一个Button~ 但如果你真的运行的话,你就会发现,app会自动跳到浏览器并打开指定的网页,而并非在app内展示网页,那这就与我们的初衷背道而驰了,那么要如何实现网页在App内打开呢?这就引出了下面的章节会提到的东西:WebViewClient。我先将代码贴出,具体实现原理留到下节说明。

最终XML布局就如上面那样,Java代码(最终)如下:

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String url = "https://www.google.com";
        WebView webView = (WebView) findViewById(R.id.web_view);
        webView.loadUrl(url);

        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                view.loadUrl(request.toString());
                return true;
            }
        });

        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "系好安全带!", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

效果图:效果视频

WebView简介

接下来再介绍一些WebView的常用方法,具体演示会在后面章节的代码里统一展示。

rootLayout.removeView(webView);
webView.destroy();
if (webView.getContentHeight() * webView.getScale() == (webView.getHeight() + webView.getScrollY())) {
    //已经处于底端
}

if(webView.getScrollY() == 0){
    //处于顶端
}

WebSettings

WebSettings是用来管理WebView配置的类。当WebView第一次创建时,内部会包含一个默认配置的集合。若我们想更改这些配置,便可以通过WebSettings里的方法来进行设置。

WebSettings对象可以通过WebView.getSettings()获得,它的生命周期是与它的WebView本身息息相关的,如果WebView被销毁了,那么任何由WebSettings调用的方法也同样不能使用。

获取WebSettings对象

  WebSettings webSettings = webView.getSettings();

WebSettings常用方法

(几乎所有的set方法都有相应的get方法,这里就只介绍set了。另,所有未写方法返回值类型的皆为空类型

缓存模式有四种:

  1. LOAD_DEFAULT:默认的缓存使用模式。在进行页面前进或后退的操作时,如果缓存可用并未过期就优先加载缓存,否则从网络上加载数据。这样可以减少页面的网络请求次数。
  2. LOAD_CACHE_ELSE_NETWORK:只要缓存可用就加载缓存,哪怕它们已经过期失效。如果缓存不可用就从网络上加载数据。
  3. LOAD_NO_CACHE:不加载缓存,只从网络加载数据。
  4. LOAD_CACHE_ONLY:不从网络加载数据,只从缓存加载数据。

通常我们可以根据网络情况将这几种模式结合使用,比如有网的时候使用LOAD_DEFAULT,离线时使用LOAD_CACHE_ONLY、LOAD_CACHE_ELSE_NETWORK,让用户不至于在离线时啥都看不到。

以上就是一些WebSettings的常用方法,具体的使用以及一些缓存的问题会在接下来的代码以及文章中有更加直观的说明。

WebViewClient

从名字上不难理解,这个类就像WebView的委托人一样,是帮助WebView处理各种通知和请求事件的,我们可以称他为WebView的“内政大臣”。

1.这个方法只在与服务器无法正常连接时调用,类似于服务器返回错误码的那种错误(即HTTP ERROR),该方法是不会回调的,因为你已经和服务器正常连接上了(全怪官方文档(︶^︶));
2.这个方法是新版本的onReceivedError()方法,从API23开始引进,与旧方法onReceivedError(WebView view,int errorCode,String description,String failingUrl)不同的是,新方法在页面局部加载发生错误时也会被调用(比如页面里两个子Tab或者一张图片)。这就意味着该方法的调用频率可能会更加频繁,所以我们应该在该方法里执行尽量少的操作。

比如你对web的某个js做了本地缓存,希望在加载该js时不再去请求服务器而是可以直接读取本地缓存的js,这个方法就可以帮助你完成这个需求。你可以写一些逻辑检测这个request,并返回相应的数据,你返回的数据就会被WebView使用,如果你返回null,WebView会继续向服务器请求。

WebChromeClient

如果说WebViewClient是帮助WebView处理各种通知、请求事件的“内政大臣”的话,那么WebChromeClient就是辅助WebView处理Javascript的对话框,网站图标,网站title,加载进度等偏外部事件的“外交大臣”。

以下两个方法是为了支持web页面进入全屏模式而存在的(比如播放视频),如果不实现这两个方法,该web上的内容便不能进入全屏模式。

这时我们就需要重写该方法,在我们尚未获取web页面上的video预览图时,给予它一个本地的图片,避免空指针的发生。

Js与WebView交互

既然嗨鸟应用大行其道,那么毫无疑问Android与JavaScript的交互我们也必须了解清楚,下面来介绍一下JavaScript与Android是如何互相调用的。

利用WebView调用网页上的JavaScript代码

在WebView中调用Js的基本格式为webView.loadUrl("javascript:methodName(parameterValues)");

现有以下这段JavaScript代码

  function readyToGo() {
      alert("Hello")
  }

  function alertMessage(message) {
      alert(message)
  }

  function getYourCar(){
      return "Car";
  }

1. WebView调用JavaScript无参无返回值函数

String call = "javascript:readyToGo()";
webView.loadUrl(call);

2. WebView调用JavScript有参无返回值函数

String call = "javascript:alertMessage(\"" + "content" + "\")";
webView.loadUrl(call);

3. WebView调用JavaScript有参数有返回值的函数

@TargetApi(Build.VERSION_CODES.KITKAT)
private void evaluateJavaScript(WebView webView){
    webView.evaluateJavascript("getYourCar()", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String s) {
            Log.d("findCar",s);
        }
    });
}

JavaScript通过WebView调用Java代码

从API19开始,Android提供了@JavascriptInterface对象注解的方式来建立起Javascript对象和Android原生对象的绑定,提供给JavScript调用的函数必须带有@JavascriptInterface。

演示一 JavaScript调用Android Toast方法

1. 编写Java原生方法并用使用@JavascriptInterface注解

@JavascriptInterface
public void show(String s){
    Toast.makeText(getApplication(), s, Toast.LENGTH_SHORT).show();
}

2.注册JavaScriptInterface

webView.addJavascriptInterface(this, "android");

addJavascriptInterface的作用是把this所代表的类映射为JavaScript中的android对象。

3.编写JavaScript代码

function toastClick(){
    window.android.show("JavaScript called~!");
}

演示二 JavaScript调用有返回值的Java方法

1.定义一个带返回值的Java方法,并使用@JavaInterface:

@JavaInterface
public String getMessage(){
    return "Hello,boy~";
}

2.添加JavaScript的映射

webView.addJavaScriptInterface(this,"Android");

3.通过JavaScript调用Java方法

function showHello(){
    var str=window.Android.getMessage();
    console.log(str);
}

以上就是Js与WebView交互的一些介绍,希望能对你有帮助。

WebView加载优化

当WebView的使用频率变得频繁的时候,对于其各方面的优化就变得逐渐重要了起来。可以知道的是,我们每加载一个 H5页面,都会有很多的请求。除了HTML主URL自身的请求外,HTML外部引用的 JS、CSS、字体文件、图片都是一个个独立的HTTP 请求,虽然请求是并发的,但当网页整体数量达到一定程度的时候,再加上浏览器解析、渲染的时间,Web整体的加载时间变得很长。同时请求文件越多,消耗的流量也会越多。那么对于加载的优化就变得非常重要,这方面的经验我也没有什么别的,大概三个方面:

一个,就是资源本地化的问题

首先可以明确的是,以目前的网络条件,通过网络去服务器获取资源的速度是远远比不上从本地读取的。谈论各种优化策略其实恰恰忽略了“需要加载”才是阻挡速度提升的最大绊脚石。所以我们的思路一,就是将一些较重的资源比如js、css、图片甚至HTML本身进行本地化处理,在每次加载到这些资源的时候,从本地读取进行加载,可以简单记忆为“存·取·更”

具体实现思路为:

  1. “存”——将上述重量级资源打包进apk文件,每次加载相应文件时时从本地取即可。也可不打包,在第一次加载时以及接下来的若干间隔时间里动态下载存储,将所有的资源文件都存在Android的asset目录下;
  2. “取”——重写WebViewClient的WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request)方法,通过一定的判别方法(例如正则表达式)拦截相应的请求,从本地读取相应资源并返回;
  3. “更”——建立起Cache Control机制,定期或使用API通知的形式控制本地资源的更新,保证本地资源是最新和可用的。

这里附上一篇博客链接,非常棒可供参考:caching-web-resources-in-the-android-device

第二个,就是缓存的问题

倘若你不采用或不完全采用第一条资源本地化的思路,那么你的WebView缓存是必须要开启的(虽然这一思路和第一条有重合的地方)。

WebSettings settings = webView.getSettings();
settings.setAppCacheEnabled(true);
settings.setDatabaseEnabled(true);
settings.setDomStorageEnabled(true);//开启DOM缓存
settings.setCacheMode(WebSettings.LOAD_DEFAULT);

在网络正常时,采用默认缓存策略,在缓存可获取并且没有过期的情况下加载缓存,否则通过网络获取资源以减少页面的网络请求次数。

这里值得提起的是,我们经常在app里用WebView展示页面时,并不想让用户觉得他是在访问一个网页。因为倘若我们的app里网页非常多,而我们给用户的感觉又都像在访问网页的话,我们的app便失去了意义。(我的意思是为什么用户不直接使用浏览器呢?)

所以这时,离线缓存的问题就值得我们注意。我们需要让用户在没有网的时候,依然能够操作我们的app,而不是面对一个和浏览器里的网络错误一样的页面,哪怕他能进行的操作十分有限。

这里我的思路是,在开启缓存的前提下,WebView在加载页面时检测网络变化,倘若在加载页面时用户的网络突然断掉,我们应当更改WebView的缓存策略。

ConnectivityManager connectivityManager = (ConnectivityManager)getSystemService(Context.CONNECTIVITY_SERVICE);
NetworkInfo networkInfo = connectivityManager.getActiveNetworkInfo();
if(networkInfo.isAvailable()) {
    settings.setCacheMode(WebSettings.LOAD_DEFAULT);//网络正常时使用默认缓存策略
} else {
    settings.setCacheMode(WebSettings.LOAD_CACHE_ONLY);//网络不可用时只使用缓存
}

既然有缓存,就要有缓存控制,与一相似的是我们也要建立缓存控制机制,定期或接受服务器通知来进行缓存的清空或更新。

第三个,就是延迟加载和执行js

在WebView中,onPageFinished()的回调意味着页面加载的完成。但该方法会在JavScript脚本执行完成后才会触发,倘若我们要加载的页面使用了JQuery,会在处理完DOM对象,执行完$(document).ready(function() {})后才会渲染并显示页面。这是不可接受的,所以我们需要对Js进行延迟加载,当然这部分是Web前端的工作。

如果说还有什么

那就是JsBridge一律不得滥用,这个对页面加载的完成速度是有很大影响的,倘若一个页面很多操作都通过JSbridge来控制,再怎么优化也无济于事(因为毕竟有那么多操作要实际执行)。同时要注意的是,不管你是否对资源进行缓存,都请将资源在服务器端进行压缩。因为无论是资源的获取和更新,都是要从服务器获取的,所以对于资源文件的压缩其实是最直接也最应该做的事情之一,但是一般服务器端都会做好,所以主要就是上面这三件事。

驾照考试

介绍了这么多,希望能对你有点帮助。接下来时纯实战时间,我会将上面所介绍的很多知识点在接下来的代码里实际应用一遍,希望能够带给你更加直观的使用感受。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:theme="@style/ThemeOverlay.AppCompat.Light" />

    </android.support.design.widget.AppBarLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

        <ProgressBar
            android:id="@+id/progress_bar"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:visibility="gone" />
    </FrameLayout>
</LinearLayout>

Java部分

public class MainActivity extends AppCompatActivity {

  private WebView mWebView;

  private ProgressBar mProgressbar;
  private Toolbar mToolbar;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      initAppBar();//初始化Toolbar

      initWebView();//初始化WebView
      initWebSettings();//初始化WebSettings
      initWebViewClient();//初始化WebViewClient
      initWebChromeClient();//初始化WebChromeClient
  }

  private void initAppBar() {
      mToolbar = (Toolbar) findViewById(R.id.toolbar);
      mToolbar.setTitle("载入中..");
      mToolbar.setTitleTextColor(getResources().getColor(R.color.colorWhite));
      setSupportActionBar(mToolbar);
      getSupportActionBar().setDisplayHomeAsUpEnabled(false);
  }

  private void initWebView() {
      mWebView = (WebView) findViewById(R.id.web_view);
      mProgressbar = (ProgressBar) findViewById(R.id.progress_bar);
      String url = "https://www.google.com";
      mWebView.loadUrl(url);
  }

  private void initWebSettings() {
      WebSettings settings = mWebView.getSettings();
      //支持获取手势焦点
      mWebView.requestFocusFromTouch();
      //支持JS
      settings.setJavaScriptEnabled(true);
      //支持插件
      settings.setPluginState(WebSettings.PluginState.ON);
      //设置适应屏幕
      settings.setUseWideViewPort(true);
      settings.setLoadWithOverviewMode(true);
      //支持缩放
      settings.setSupportZoom(false);
      //隐藏原生的缩放控件
      settings.setDisplayZoomControls(false);
      //支持内容重新布局
      settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
      settings.supportMultipleWindows();
      settings.setSupportMultipleWindows(true);
      //设置缓存模式
      settings.setDomStorageEnabled(true);
      settings.setDatabaseEnabled(true);
      settings.setCacheMode(WebSettings.LOAD_DEFAULT);
      settings.setAppCacheEnabled(true);
      settings.setAppCachePath(mWebView.getContext().getCacheDir().getAbsolutePath());

      //设置可访问文件
      settings.setAllowFileAccess(true);
      //当webview调用requestFocus时为webview设置节点
      settings.setNeedInitialFocus(true);
      //支持自动加载图片
      if (Build.VERSION.SDK_INT >= 19) {
          settings.setLoadsImagesAutomatically(true);
      } else {
          settings.setLoadsImagesAutomatically(false);
      }
      settings.setNeedInitialFocus(true);
      //设置编码格式
      settings.setDefaultTextEncodingName("UTF-8");
  }

  private void initWebViewClient() {
      mWebView.setWebViewClient(new WebViewClient() {

          //页面开始加载时
          @Override
          public void onPageStarted(WebView view, String url, Bitmap favicon) {
              super.onPageStarted(view, url, favicon);
              mProgressbar.setVisibility(View.VISIBLE);
          }


          //页面完成加载时
          @Override
          public void onPageFinished(WebView view, String url) {
              super.onPageFinished(view, url);
              mProgressbar.setVisibility(View.GONE);
          }

          //是否在WebView内加载新页面
          @Override
          public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
              view.loadUrl(request.toString());
              return true;
          }

          //网络错误时回调的方法
          @Override
          public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
              super.onReceivedError(view, request, error);
              /**
               * 在这里写网络错误时的逻辑,比如显示一个错误页面
               *
               * 这里我偷个懒不写了
               * */
          }

          @TargetApi(Build.VERSION_CODES.M)
          @Override
          public void onReceivedHttpError(WebView view, WebResourceRequest request, WebResourceResponse errorResponse) {
              super.onReceivedHttpError(view, request, errorResponse);
          }
      });
  }

  private void initWebChromeClient() {

      mWebView.setWebChromeClient(new WebChromeClient() {

          private Bitmap mDefaultVideoPoster;//默认的视频展示图

          @Override
          public void onReceivedTitle(WebView view, String title) {
              super.onReceivedTitle(view, title);
              setToolbarTitle(title);
          }

          @Override
          public Bitmap getDefaultVideoPoster() {
              if (mDefaultVideoPoster == null) {
                  mDefaultVideoPoster = BitmapFactory.decodeResource(
                          getResources(), R.drawable.video_default
                  );
                  return mDefaultVideoPoster;
              }
              return super.getDefaultVideoPoster();
          }
      });
  }

  /**
   * 设置Toolbar标题
   *
   * @param title
   */
  private void setToolbarTitle(final String title) {
      Log.d("setToolbarTitle", " WebDetailActivity " + title);
      if (mToolbar != null) {
          mToolbar.post(new Runnable() {
              @Override
              public void run() {
                  mToolbar.setTitle(TextUtils.isEmpty(title) ? getString(R.string.loading) : title);
              }
          });
      }
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
      getMenuInflater().inflate(R.menu.menu_main, menu);
      return super.onCreateOptionsMenu(menu);
  }

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
      switch (item.getItemId()) {
          case R.id.page_up:
              Toast.makeText(getApplicationContext(), "页面向上", Toast.LENGTH_SHORT).show();
              mWebView.pageUp(true);
              break;
          case R.id.page_down:
              Toast.makeText(getApplicationContext(), "页面向下", Toast.LENGTH_SHORT).show();
              mWebView.pageDown(true);
              break;
          case R.id.refresh:
              Toast.makeText(getApplicationContext(), "刷新~", Toast.LENGTH_SHORT).show();
              mWebView.reload();
          default:
              return super.onOptionsItemSelected(item);
      }
      return super.onOptionsItemSelected(item);
  }

  @Override
  public boolean onKeyDown(int keyCode, KeyEvent event) {

      //如果按下的是回退键且历史记录里确实还有页面
      if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
          mWebView.goBack();
          return true;
      } else {
          Toast.makeText(getApplicationContext(), "考试结束,恭喜您考试合格!", Toast.LENGTH_LONG).show();
      }
      return super.onKeyDown(keyCode, event);
  }
}

效果图:

fuck,效果图太大压缩无望~~~ 效果图看外链视频吧

上路

好了,到此为止你已阅读完所有的指南,送你一辆车,上路吧。

车

参考文章

Android官方文档

Android Web Apps Using Android WebView

史上最全webview详解

H5 缓存机制浅析 移动端 Web 加载性能优化

WebView加载速度优化

Back to Top