前言

  1. 在前面已经介绍了什么是 WebApp，简单来讲就是移动端的网站或 H5 应用。那么既然是一个 Web 网站，必然就是使用浏览器来打开；微信、支付宝、抖音这些应用为什么也能打开此页面；

  2. 这就不得不提我们这篇文章的主角 WebView 了

    • WebView 介绍
    • WebView 常见使用场景

WebView 介绍

  1. WebView 是一种嵌入式浏览器，原生应用可以用它来展示网络内容；都知道浏览器是什么，它让我们可以浏览网页的独立应用：

  2. 把浏览器想象成两部分，那么一部分是 UI（地址栏，导航栏按钮等），其它部分是把标记跟代码转换成我们可见和可交互视图的浏览器引擎；

  3. WebView 就是浏览器引擎部分，你可以像插入 iframe 一样将 Webview 插入到原生应用中，并且编程化的告诉它将会加载什么网页内容；这样我们可以用它来作为我们原生 app 的视觉部分；当使用原生应用时，WebView 可能只是被隐藏在普通的原生 UI 元素中，甚至用不到注意到它；

  4. 运行在 WebView 中的 JavaScript 有能力调用原生的系统 API；这意味着不必受到 Web 代码通常必须遵守的传统浏览器安全沙箱的限制；下图解释了使这样成为可能的架构差异：

  5. Web 代码和原生应用代码相互通信，这种沟通通常称为 bridge；通过上图可以看到 bridge 可视化为 Native Bridge 和 JavaScript Bridge 的一部分；正因为 bridge 的存在，编写的 JavaScript 不仅可以在 WebView 中运行，还可以调用原生 API 帮助我们的应用更深入地集成酷炫的系统级功能，如传感器，存储，日历/联系人等；

WebView 常见使用场景

App 内置浏览器

  1. WebView 最常见的用途之一是显示链接的内容；

  2. 在移动设备上启动浏览器，将用户从一个应用切换到另一个应用，操作完成后再返回原本的应用，这样的操作体验相当的糟糕；WebView 通过在应用本身内完全加载链接的内容来很好地解决这个问题；

  3. 这也解释了为什么上面提到的抖音、微信、支付宝都可以打开那个页面；

广告

  1. 广告仍然是原生应用最流行的赚钱方式之一；这些广告大部分是如何投放的？答案是通过 WebView 提供的 Web 内容：

混合开发（Hybrid App）

  1. 到目前为止，我们一直在将 WebView 视为舞台上的次要支持角色，并由原生应用和其他原生 UI 元素完全支配，但是近年来出现了一种新的开发模式，叫做混合开发（Hybrid App）；这种开发模式介于 WebApp 和 NativeApp 这两者之间的 App 开发技术，兼具 “Native App 良好交互体验的优势” 和 “WebApp 跨平台开发的优势”，其原理就是原生客户端的壳 WebView，里面是 HTML5 的网页；

  2. 混合应用很受欢迎有如下的原因：

    1. 开发成本较低，可以跨平台，调试方便
      • Hybrid 模式下，由原生提供统一的 API 给 JS 调用，实际的主要逻辑由 HTML 和 JS 来完成，而由于最终是放在 WebView 中显示的，所以只需要写一套代码即可，达到跨平台效果，另外也可以直接在浏览器中调试，很为方便；
      • 最重要的是只需要一个前端人员稍微学习下 JS API 的调用即可，无需两个独立的原生人员；
      • 一般 Hybrid 中的跨平台最少可以跨三个平台：Android、iOS 和普通 Webkit 浏览器；
    2. 维护成本低，功能可复用
      • 同上，如果代码合理，只需要一名前端就可以维护多个 app，而且很多功能还可以互相复用；
    3. 更新较为自由
      • 虽然没有 WebApp 更新那么快速，但是 Hybrid 中也可以通过原生提供 api 进行资源主动下载，达到只更新资源文件，不更新 apk(ipa) 的效果；

  3. 现在国内外也有很多将 WebApp 打包成 Hybrid App 的应用技术，例如：

桌面应用扩展

  1. WebView 的使用场景不仅仅只是在移动端应用上面，许多桌面应用也可以使用 WebView 来扩展自己的功能，由于 Web 技术的简单性和强大性，很多加载和扩展项通常选择以 HTML、CSS 和 JavaScript 技术而非 C++、C# 来进行构建；

  2. 下面以 Microsoft Office 为例，可以针对某一个特殊的词使用维基百科进行查询：

  3. 而这里的维基百科内容就是通过 WebView 显示出来的。

总结

目前为止，已经介绍了 3 种移动端开发的方式了，这里以表格的形式做一个总结：

Native App Web App Hybrid App
原生功能体验 优秀 一般 良好
渲染性能 非常快 一般 良好
是否支持设备底层访问 支持 不支持 支持
网络要求 支持离线 依赖网络 支持离线(资源存本地情况)
更新复杂度 高(几乎总是通过应用商店更新) 低(服务器端直接更新) 较低(可以进行资源包更新)
编程语言 Android(Java) iOS(OC/Swift) js+html+css3 js+html+css3
社区资源 丰富(Android、iOS 单独学习) 丰富(大量前端资源) 有局限(不同的 Hybrid 相互独立)
上手难度 难(不同平台需要单独学习) 简单(写一次，支持不同平台访问) 简单(写一次，运行任何平台)
开发周期 长 短 较短
开发成本 昂贵 便宜 较为便宜
跨平台 不跨平台 所有浏览器 可以打包到不同的平台
APP 发布 App Store Web 服务器 App Store
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 前言
  2. 2. WebView 介绍
  3. 3. WebView 常见使用场景
    1. 3.1. App 内置浏览器
    2. 3.2. 广告
    3. 3.3. 混合开发（Hybrid App）
    4. 3.4. 桌面应用扩展
  4. 4. 总结