理解WebView

springfe0101
574 阅读6分钟

WebvView用来在原生APP中展示web。下面来认识一下WebView。 我们通常使用像Chrome，Firefox，Safari，IE等浏览器去访问网络内容。然而，WebView和浏览器有更强的竞争力。这篇文章解释什么是WebView和WebView为什么这么受欢迎。

WebView

定义：一个WebView是一个APP平台上的内嵌浏览器，原生APP使用它展示Web内容。

在这里强调一下原生应用和可嵌入浏览器这两个关键词语。

  1. 原生应用 原生APP是一个基于特定平台的对应的语言开发的应用，如Android APP、IOS APP。原生APP不是跨平台的。如Objective-C、C++、C是和执行这些语言的底层系统紧密相关的。在移动设备上大多数应用是原生应用。
  2. 可嵌入浏览器 我们都知道浏览器是一个独立的应用程序，我们可以使用它上网。我们可以把浏览器分为两部分，一部分是UI（地址栏，导航按钮等），另一部分是引擎，把html、javascipt等代码转为像素。

webview1

WebView只是浏览器引擎的一部分你可以像插入iframe一样插入到你的原生应用中并通过编程告诉它要加载什么网页内容。WebView仅仅是一个原生APP的一个可视化组件/部件。WebView和其他UI组件一起组成原生APP整个视觉效果。

webview2 你的WebView几乎就像一个原生海洋中的网络友好岛屿。这个岛的内容不一定是应用的本地内容。 你的WebView通常会从远程的http:// 或https:// 加载web内容。这意味着你可以把你的web应用的一部分(或全部)放在在你的服务器上，并在原生应用中依赖于WebView来显示:

webview3

不像传统的浏览器受安全沙箱的限制，运行在WebView的JavaScript能够调用本地系统的API。下面图解释了架构的差异：

webview4

通过bridge使web代码和本地应用程序代码相互通信。在前面的图中可以看到bridge有Native Bridge和Javascript Bridge。总结，你为web编写的JavaScript不仅可以在你的WebView中工作，它还可以调用本地api，帮助你的应用程序与很酷的系统级功能更深入地集成，如传感器、存储、日历/联系人等。

WebView使用

现在我们已经大致了解了webview是什么，以及它们的一些强大的技巧，现在看看我们将在本地应用中使用webview的一些常见情况。

在APP中的浏览器

WebView最常见的用途之一是显示链接的内容。如果用户想看链接的内容，那么就要从一个应用切换到另一个应用，这样不方便。WebViews通过在APP内部访问链接完美解决了这个问题。如Twitter和Facebook这两个APP在访问链接内容时，没有使用默认的浏览器，而是使用APP内嵌的WebView在APP内部访问。

广告

广告是原生应用最受欢迎的盈利方式之一。广告是大多是通过WebView展示的Web内容。

webview1

虽然有的广告是通过原生应用实现的，但是大多数APP中的广告是通过WebView展示的，并且从集中的广告服务器上提供的广告内容。

Hybrid Apps

前面我们看到WebView展示的内容只是APP中的一小部分。除此之外，有些APP的所有内容都是WebView加载的内容，这些app就是我们所说的hybrid apps。

webview2

从技术的角度，hybrid apps仍然是原生应用，只是仅仅使用了WebView这个功能提供了服务。hybrid app能够减少开发者的开发成本。开发一套响应式的web应用，能够部署在各种设备上。

180384590-0a25301d-7a71-408e-a207-4be10bdf77c3.png

当你更新你的网页应用时，所有使用它的设备都可以立即获得更改，因为内容来自一个服务器:

webview4

如果你要处理的是一款纯粹的原生应用，你不仅需要针对每个平台更新项目，还需要经历耗时的应用认证过程，以便让所有应用商店都能看到你的更新。 从部署和更新的角度来看，混合应用非常方便。

本地应用扩展

许多本机应用程序，尤其是桌面应用程序，提供了一种通过安装外接程序或扩展程序来扩展其功能的方法。由于web技术的简单和强大，这些插件和扩展通常是用HTML、CSS和JavaScript构建的，而不是用c++、c#或其他语言。一个典型的例子是Microsoft Office。例如Microsoft Office的一个扩展程序Wikipedia app：

webview5

基于web的扩展程序Wikipedia看起来是在Office app内，实际上是通过WebView渲染的。

webview6

WebView展示的内容实际上来自于URL。当在浏览器访问这个URL的时候，并不能正常访问URL的内容。是因为在WebView中看到的内容是原生app和web code一起集成的。

WebViews渲染引擎

WebBViews是浏览器渲染引擎的部分，没有浏览器的一些地址栏UI界面。大多数情况下，除非你调用原生APIs，你不需要在WebView中测试你的web app。渲染引擎匹配的时候，在WebView中看到的内容和在浏览器中看到的内容是一样的。

  1. IOS的web渲染引擎总是WebKit，和Safari和Chrome一样。IOS上的Chrome实际上是基于WebKit的。
  2. Android的渲染引擎通常是基于Blink，也就是Chrome的引擎。
  3. 在Windows、Linux和macOS上，由于这些都是更加开放的桌面平台，在选择WebView风格和底层使用的渲染引擎方面有很大的灵活性。你看到的最流行的渲染引擎是Blink (Chrome)和Trident (Internet Explorer)，但没有一个引擎是你可以依赖的。这完全取决于应用程序使用哪种WebView渲染引擎。

Android WebView例子

File: 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="example.javatpoint.com.webview.MainActivity">  
  
    <WebView  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:id="@+id/webView"  
        app:layout_constraintBottom_toBottomOf="parent"  
        app:layout_constraintLeft_toLeftOf="parent"  
        app:layout_constraintRight_toRightOf="parent"  
        app:layout_constraintTop_toTopOf="parent" />  
  
</android.support.constraint.ConstraintLayout>

File:MainActivity.java

package example.javatpoint.com.webview;  
  
import android.support.v7.app.AppCompatActivity;  
import android.os.Bundle;  
import android.webkit.WebView;  
  
public class MainActivity extends AppCompatActivity {  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        WebView mywebview = (WebView) findViewById(R.id.webView);  
      
  
        String data = "<html><body><h1>Hello, Javatpoint!</h1></body></html>"; 
        mywebview.loadData(data, "text/html", "UTF-8"); 
  
        mywebview.loadUrl("https://www.javatpoint.com/");  
    }  
}

加载html page显示如下：

webview1

加载url javatpoint.com显示如下：

webview2

参考文献

  1. understanding webciews
  2. Android WebView Example
avatar
文章
阅读
粉丝