理解 WebView #5769

CoolRice · 2019-05-13T06:27:52Z

译文翻译完成，resolve #5658

wuyanan · 2019-05-14T03:10:59Z

校队认领

swants · 2019-05-14T08:02:44Z

校对认领

fanyijihua · 2019-05-14T08:02:46Z

@swants 好的呢 🍺

swants · 2019-05-14T08:06:02Z

校队认领

@wuyanan 有别字没有触发机器人校对流程重新申请校对一下吧

leviding · 2019-05-15T00:44:34Z

@wuyanan 好的，下次注意校对认领的关键字要对

swants

翻译的不错,加油!

swants · 2019-05-14T08:45:33Z

TODO1/understanding-webviews.md

 > * 校对者：

-# Understanding WebViews
+# Understanding WebView


删除原文标题

swants · 2019-05-14T08:50:48Z

TODO1/understanding-webviews.md


-When it comes to accessing internet content, we typically use a browser like Chrome, Firefox, Safari, Internet Explorer, and Edge. You are probably using one of those browsers right now to read this article! While browsers are pretty popular for the whole task of accessing internet content, they have some serious competition that we probably never paid much attention to. This competition comes in the form of something known as a **WebView**. This article will explain all about what this mysterious WebView is and why it is sorta kinda cool.
+在访问互联网内容时，我们通常使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器。你也许正在使用其中一种浏览器阅读本文！虽然对于访问互联网内容的任务来说浏览器非常流行，它们还有一些我们从未过多关注过的竞争对手。这些竞争对手以 **WebView** 的形式被我们所熟知。这片文章将讲解 WebView 的神秘之处以及为什么它这么棒。


虽然对于访问互联网内容的任务来说浏览器非常流行，它们还有一些我们从未过多关注过的竞争对手。
前一句主语应该是浏览器,而不是任务

『在访问互联网内容时，我们通常使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器』 => 『我们通常使用Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器来浏览网页』
浏览网页更加通俗。

swants · 2019-05-14T08:51:40Z

TODO1/understanding-webviews.md


-Onwards!
+我们继续！

 ## WebView 101


WebView 101
WebView 入门知识

swants · 2019-05-14T08:54:13Z

TODO1/understanding-webviews.md


 ![](https://www.kirupa.com/apps/images/native_app_200.png)

-> In other words, the app isn't a cross-platform web app running in the browser. Instead, think of your apps as primarily being written in a language like Swift, Objective-C, Java, C++, C#, etc. that works more closely with the system. To put this into context, most apps you use in your mobile device are going to be native apps. Many popular apps like Microsoft Office on your desktop/laptops are as well.
+> 换句话说，这种应用不是指在浏览器中运行的跨平台网络应用。相反，你的应用主要是用像 Swift，Objective-C，Java，C++，C# 的语言来编写的。这种工作方式与系统更加贴近。在这样的背景下，你使用的大多数应用会成为原生应用。许多流行的应用，比如你的桌面/笔记本上的 Microsoft Office 也是如此。


这种应用
=> the 不翻译

swants · 2019-05-15T10:45:13Z

TODO1/understanding-webviews.md


 ![](https://www.kirupa.com/apps/images/native_app_200.png)

-> In other words, the app isn't a cross-platform web app running in the browser. Instead, think of your apps as primarily being written in a language like Swift, Objective-C, Java, C++, C#, etc. that works more closely with the system. To put this into context, most apps you use in your mobile device are going to be native apps. Many popular apps like Microsoft Office on your desktop/laptops are as well.
+> 换句话说，这种应用不是指在浏览器中运行的跨平台网络应用。相反，你的应用主要是用像 Swift，Objective-C，Java，C++，C# 的语言来编写的。这种工作方式与系统更加贴近。在这样的背景下，你使用的大多数应用会成为原生应用。许多流行的应用，比如你的桌面/笔记本上的 Microsoft Office 也是如此。


你使用的大多数应用会成为原生应用
=>
你使用的大多数应用都应该是原生应用

swants · 2019-05-15T11:02:23Z

TODO1/understanding-webviews.md


 ![](https://www.kirupa.com/apps/images/wikipedia_window2.PNG)

-The way these web-based extensions like the Wikipedia one are surfaced inside an Office app like Word is through...yep, a WebView:
+这些基于 Web 的扩展程序（如维基百科）在 Word 等 Office 应用中的表现方式是通过……是的，WebView：


是通过……是的，WebView：
省略号改成破折号更符合中文

swants · 2019-05-15T11:03:54Z

TODO1/understanding-webviews.md


-WebViews are pretty awesome. While it may look like they are entirely special and unique beasts, remember, they are nothing more than just a browser positioned and sized inside your app without any of their fancy UI thrown in there. There is more to it, but that's the gist of it. For most purposes, you don't have to specially test your web app inside a WebView unless you are calling native APIs. Otherwise, the functionality between what you see inside a WebView is the same as what you would see in the browser, especially if you match the rendering engines:
+WebView 非常棒。虽然看起来它们看起来像是完全特殊和独特的野兽，记住，它们只不过是一个在应用中设置好定位和大小的浏览器，而且不会放置任何花哨的 UI。其实还有更多东西，但这是它的要点。在大多数情况下，除非你要调用原生 API，否则不必在 WebView 中专门测试 Web 应用。除此以外，你在 WebView 中看到的内容与你在浏览器中看到的内容相同，尤其是在匹配呈现引擎时：


设置好定位和大小的浏览器

定位 => 位置/坐标

swants · 2019-05-15T11:04:25Z

TODO1/understanding-webviews.md


-WebViews are pretty awesome. While it may look like they are entirely special and unique beasts, remember, they are nothing more than just a browser positioned and sized inside your app without any of their fancy UI thrown in there. There is more to it, but that's the gist of it. For most purposes, you don't have to specially test your web app inside a WebView unless you are calling native APIs. Otherwise, the functionality between what you see inside a WebView is the same as what you would see in the browser, especially if you match the rendering engines:
+WebView 非常棒。虽然看起来它们看起来像是完全特殊和独特的野兽，记住，它们只不过是一个在应用中设置好定位和大小的浏览器，而且不会放置任何花哨的 UI。其实还有更多东西，但这是它的要点。在大多数情况下，除非你要调用原生 API，否则不必在 WebView 中专门测试 Web 应用。除此以外，你在 WebView 中看到的内容与你在浏览器中看到的内容相同，尤其是在匹配呈现引擎时：


但这是它的要点

要点换成精髓会不会好点?

swants · 2019-05-15T11:06:36Z

TODO1/understanding-webviews.md


-WebViews are pretty awesome. While it may look like they are entirely special and unique beasts, remember, they are nothing more than just a browser positioned and sized inside your app without any of their fancy UI thrown in there. There is more to it, but that's the gist of it. For most purposes, you don't have to specially test your web app inside a WebView unless you are calling native APIs. Otherwise, the functionality between what you see inside a WebView is the same as what you would see in the browser, especially if you match the rendering engines:
+WebView 非常棒。虽然看起来它们看起来像是完全特殊和独特的野兽，记住，它们只不过是一个在应用中设置好定位和大小的浏览器，而且不会放置任何花哨的 UI。其实还有更多东西，但这是它的要点。在大多数情况下，除非你要调用原生 API，否则不必在 WebView 中专门测试 Web 应用。除此以外，你在 WebView 中看到的内容与你在浏览器中看到的内容相同，尤其是在匹配呈现引擎时：


尤其是在匹配呈现引擎时
=>
尤其是使用同一渲染引擎时

swants · 2019-05-15T11:08:22Z

TODO1/understanding-webviews.md


-If you have a question about this or any other topic, the easiest thing is to drop by [our forums](http://forum.kirupa.com) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
+我们可以花更多的时间来了解 WebView，并更深入地了解它们提供的一些特殊行为，但这会让我们产生偏离主题。对于我们在本篇文章要讲的东西，不偏离主题并宽泛了解WebView 才是正确的……至少到目前为止。


才是正确的……至少到目前为止

省略号换为破折号

wuyanan

有些句子读起来不是很通顺，所以重新组织了下语言。

wuyanan · 2019-05-15T12:33:05Z

TODO1/understanding-webviews.md


-When it comes to accessing internet content, we typically use a browser like Chrome, Firefox, Safari, Internet Explorer, and Edge. You are probably using one of those browsers right now to read this article! While browsers are pretty popular for the whole task of accessing internet content, they have some serious competition that we probably never paid much attention to. This competition comes in the form of something known as a **WebView**. This article will explain all about what this mysterious WebView is and why it is sorta kinda cool.
+在访问互联网内容时，我们通常使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器。你也许正在使用其中一种浏览器阅读本文！虽然对于访问互联网内容的任务来说浏览器非常流行，它们还有一些我们从未过多关注过的竞争对手。这些竞争对手以 **WebView** 的形式被我们所熟知。这片文章将讲解 WebView 的神秘之处以及为什么它这么棒。


『在访问互联网内容时，我们通常使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器』 => 『我们通常使用Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器来浏览网页』
浏览网页更加通俗。

wuyanan · 2019-05-15T14:51:19Z

TODO1/understanding-webviews.md


-1.  The first set of words is **_native application (aka app)_**. A native app is one written in the language and UI framework designed specifically for a particular platform:
+1.  第一部分是 **原生应用（亦称应用）**。原生应用是用专门为特定平台设计的语言和用户界面框架编写的应用：


第一，原生应用（亦称 app）。原生 app 由专门为特定平台设计的编程语言和 UI 框架编写。

wuyanan · 2019-05-15T15:01:28Z

TODO1/understanding-webviews.md


 ![](https://www.kirupa.com/apps/images/browser_raccoon_200.jpg)

-> If you think of the browser as two parts, one part is the UI (address bar, navigation buttons, etc.), and the other part is the engine that turns markup and code into the pixels we can see and interact with:
+> 如果你把浏览器想象成两部分，一部分是 UI（地址栏，导航栏按钮等。），其它部分是把标记跟代码转换成我们可见和可交互像素的引擎。


如果你把浏览器想象成两部分，一部分是 UI（地址栏，导航栏按钮等），

括号解释内部除非是问号，比较少见加其他标点符号。

wuyanan · 2019-05-15T15:08:47Z

TODO1/understanding-webviews.md


 ![](https://www.kirupa.com/apps/images/browser_ui_engine_200.jpg)

-> A WebView is just the browser engine part that you can insert sort of like an iframe into your native app and programmatically tell it what web content to load.
+> WebView 就是浏览器引擎部分，你可以插入像 iframe 到你的原生应用并且使用编程化的方式告诉它什么 Web 内容会加载。


你可以像插入 iframe 一样将 Webview 插入到你的原生 app 中，并且编程化的告诉它将会加载什么网页内容。

wuyanan · 2019-05-15T15:16:43Z

TODO1/understanding-webviews.md


-Putting all of this together and connecting some dots, a WebView is just a visual component/control/widget/etc. that we would use as part of composing the visuals of our native app. When you are using a native app, a WebView might just be hiding in plain sight next to other native UI elements without you even realizing it:
+把所有的这些概念放到一起并简单整合下，WebView 只是一个可视化的组件/控制/控件/等。这样我们可以用它来作为我们原生 app 的视觉部分。当你使用原生应用时，WebView 可能只是被隐藏在普通的原生 UI 元素中，你甚至用不到注意到它。


component/control/widget/ 可翻译为组件/控件/微件

wuyanan · 2019-05-15T15:27:12Z

TODO1/understanding-webviews.md


 ![](https://www.kirupa.com/apps/images/webview_200.png)

-Your WebView is almost like a web-friendly island inside a large ocean of nativeness. The contents of this island don't have to be local to your app. Your WebView will commonly load web content remotely from a http:// or https:// location. This means you can take parts (or all) of your web app that lives on your server and rely on the WebView to display it inside your native app:
+你的 WebView 就像是原生组件海洋里一座对 Web 友好的岛。对于你的应用来说这座岛的内容不需要是原生的。你的 WebView 通常会从 http:// 或者 https:// 地址下载网络内容。这意味着你需要让你的部分（或全部） Web 应用依赖于服务器并且靠 WebView 来显示在原生应用中：


这意味着你需要让你的部分（或全部） Web 应用依赖于服务器并且靠 WebView 来显示在原生应用中：=> 这意味着你可以从服务器中获取部分（或全部）web app 并且依赖 Webview 将这部分内容展示在原生 app 中。

wuyanan · 2019-05-15T15:47:37Z

TODO1/understanding-webviews.md


 ![](https://www.kirupa.com/apps/images/webview_html5_remote_200.png)

-This flexibility opens up a whole world of code reuse between your browser-focused web app and the parts of your web app that you want to display inside a native app. If all of this doesn't sound crazy awesome...
+这种灵活性在你以浏览器为中心的 Web 应用与希望在原生应用中显示的 Web 应用部分之间打开了整个代码重用世界。这一切听起来真的非常棒……


这种灵活性打开了一个浏览器端的 web app 和希望展示在原生 app 中的web app 代码可重用的世界。

wuyanan · 2019-05-15T15:55:48Z

TODO1/understanding-webviews.md


 ![](https://www.kirupa.com/apps/images/webview_browser_2_200.png)

-By default, any web code running inside a WebView or web browser is kept isolated from the rest of the app. This is done for a host of security reasons that revolve around minimizing the extent of damage some malicious JavaScript might be able to do. If the browser or WebView go down, that's unfortunate but **OK**. If the entire system goes down, that is unfortunate...but **NOT OK**. For arbitrary web content, this level of security makes a lot of sense. You can never fully trust the web content that gets loaded. That isn't the case with WebViews. For WebView scenarios, the developer typically has full control over the content that gets loaded. The chance of malicious code getting in there and causing mayhem on your device is pretty low.
+默认情况下，在 WebView 或 Web 浏览器中运行的任何 Web 代码都与应用的其余部分保持隔离。这是出于一系列安全原因而实现的，这些原因主要是为了尽量降低恶意的 JavaScript 可能造成的破坏程度。如果浏览器或 WebView 出现故障，那很不幸但**可以接受**。如果整个系统发生故障，那很不幸……不过**这样不能接受**。对于任意 Web 内容，这种安全级别很有意义。你永远不能完全信任加载的 Web 内容。WebView 的情况并非如此。对于 WebView 方案，开发人员通常可以完全控制加载的内容。恶意代码进入并在设备上造成混乱的可能性非常低。


这是出于一系列安全原因而实现的，这些原因主要是为了尽量降低恶意的 JavaScript 可能造成的破坏程度。 => 这样做是出于安全原因，主要是为降低恶意的 JavaScript 代码对系统造成的伤害。

wuyanan · 2019-05-15T16:28:40Z

TODO1/understanding-webviews.md


-If you have a question about this or any other topic, the easiest thing is to drop by [our forums](http://forum.kirupa.com) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
+我们可以花更多的时间来了解 WebView，并更深入地了解它们提供的一些特殊行为，但这会让我们产生偏离主题。对于我们在本篇文章要讲的东西，不偏离主题并宽泛了解WebView 才是正确的……至少到目前为止。


但这会让我们产生偏离主题 => 但这会让我们偏离主题

wuyanan · 2019-05-15T16:30:01Z

TODO1/understanding-webviews.md

-3.  On Windows, Linux, and macOS, since these are the more permissive desktop platforms, there is a lot of flexibility in choosing the WebView flavor and rendering engine used under the covers. The popular rendering engines you see will be Blink (Chrome) and Trident (Internet Explorer), but there is no one engine that you can rely on. It all depends on the app and what WebView implementation it is using.
+1. 在 iOS 上，Web 渲染引擎**始终**是 WebKit，与 Safari 和 Chrome 相同。是的，你没看错。iOS 上的 Chrome 实际上使用了 WebKit。
+2. 在 Android 上的渲染引擎**通常是** Blink，与 Chrome 相同。
+3. 在 Windows，Linux 和 macOS 上，由于这些是更宽松的桌面平台，因此在选择 WebView 风格和渲染引擎时会有很大的灵活性。你看到的流行渲染引擎将是 Blink（Chrome）和 Trident（Internet Explorer），但是没有一个引擎可以依赖。这完全取决于应用以及它正在使用的 WebView 实现。


这完全取决于应用以及它正在使用的 WebView 实现。=》这完全取决于app正在使用何种 Webview 引擎。

wuyanan · 2019-05-15T16:38:06Z

@leviding @CoolRice 校对完成

leviding · 2019-05-17T04:28:32Z

@CoolRice 可以修改啦

leviding · 2019-05-21T10:40:45Z

@CoolRice 记得修改

CoolRice · 2019-05-22T07:18:45Z

@leviding 修改完毕

leviding · 2019-05-22T08:08:52Z

@CoolRice 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。

文章发布时，标题前面那个大图，你可以在上传掘金的时候作为题图使用，然后在文中删除那个图就行啦。

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

fix translation of understanding-webviews.md

2c5ad14

fanyijihua added the 校对认领 label May 13, 2019

fanyijihua mentioned this pull request May 13, 2019

理解 WebView #5658

Closed

JackEggie added the 前端 label May 13, 2019

fanyijihua added the 正在校对 label May 14, 2019

fanyijihua removed the 校对认领 label May 14, 2019

xitu deleted a comment from fanyijihua May 14, 2019

swants added the 校对认领 label May 14, 2019

leviding removed the 校对认领 label May 15, 2019

swants reviewed May 15, 2019

View reviewed changes

wuyanan reviewed May 15, 2019

View reviewed changes

leviding added the enhancement 等待译者修改 label May 16, 2019

leviding added the 延期啦，大大们赶紧哒 label May 21, 2019

small updates for #5769

b1ddd57

leviding added 2 commits May 22, 2019 16:02

Update understanding-webviews.md

e4f0113

Update understanding-webviews.md

a72758e

leviding approved these changes May 22, 2019

View reviewed changes

leviding merged commit 5bda8b5 into xitu:master May 22, 2019

leviding removed enhancement 等待译者修改延期啦，大大们赶紧哒 labels May 22, 2019

leviding added 翻译完成 and removed 正在校对 labels May 22, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

理解 WebView #5769

理解 WebView #5769

CoolRice commented May 13, 2019

wuyanan commented May 14, 2019

swants commented May 14, 2019

fanyijihua commented May 14, 2019

swants commented May 14, 2019

leviding commented May 15, 2019

swants left a comment

swants May 14, 2019

swants May 14, 2019

wuyanan May 15, 2019

swants May 14, 2019

swants May 14, 2019

swants May 15, 2019

swants May 15, 2019

swants May 15, 2019

swants May 15, 2019

swants May 15, 2019

swants May 15, 2019

wuyanan left a comment

wuyanan May 15, 2019

wuyanan May 15, 2019

wuyanan May 15, 2019

wuyanan May 15, 2019

wuyanan May 15, 2019

wuyanan May 15, 2019

wuyanan May 15, 2019

wuyanan May 15, 2019

wuyanan May 15, 2019

wuyanan May 15, 2019

wuyanan commented May 15, 2019

leviding commented May 17, 2019

leviding commented May 21, 2019

CoolRice commented May 22, 2019

leviding commented May 22, 2019


		When it comes to accessing internet content, we typically use a browser like Chrome, Firefox, Safari, Internet Explorer, and Edge. You are probably using one of those browsers right now to read this article! While browsers are pretty popular for the whole task of accessing internet content, they have some serious competition that we probably never paid much attention to. This competition comes in the form of something known as a WebView. This article will explain all about what this mysterious WebView is and why it is sorta kinda cool.
		在访问互联网内容时，我们通常使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器。你也许正在使用其中一种浏览器阅读本文！虽然对于访问互联网内容的任务来说浏览器非常流行，它们还有一些我们从未过多关注过的竞争对手。这些竞争对手以 WebView 的形式被我们所熟知。这片文章将讲解 WebView 的神秘之处以及为什么它这么棒。


		WebViews are pretty awesome. While it may look like they are entirely special and unique beasts, remember, they are nothing more than just a browser positioned and sized inside your app without any of their fancy UI thrown in there. There is more to it, but that's the gist of it. For most purposes, you don't have to specially test your web app inside a WebView unless you are calling native APIs. Otherwise, the functionality between what you see inside a WebView is the same as what you would see in the browser, especially if you match the rendering engines:
		WebView 非常棒。虽然看起来它们看起来像是完全特殊和独特的野兽，记住，它们只不过是一个在应用中设置好定位和大小的浏览器，而且不会放置任何花哨的 UI。其实还有更多东西，但这是它的要点。在大多数情况下，除非你要调用原生 API，否则不必在 WebView 中专门测试 Web 应用。除此以外，你在 WebView 中看到的内容与你在浏览器中看到的内容相同，尤其是在匹配呈现引擎时：


		If you have a question about this or any other topic, the easiest thing is to drop by [our forums](http://forum.kirupa.com) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
		我们可以花更多的时间来了解 WebView，并更深入地了解它们提供的一些特殊行为，但这会让我们产生偏离主题。对于我们在本篇文章要讲的东西，不偏离主题并宽泛了解WebView 才是正确的……至少到目前为止。


		1. The first set of words is _native application (aka app)_. A native app is one written in the language and UI framework designed specifically for a particular platform:
		1. 第一部分是原生应用（亦称应用）。原生应用是用专门为特定平台设计的语言和用户界面框架编写的应用：


		Putting all of this together and connecting some dots, a WebView is just a visual component/control/widget/etc. that we would use as part of composing the visuals of our native app. When you are using a native app, a WebView might just be hiding in plain sight next to other native UI elements without you even realizing it:
		把所有的这些概念放到一起并简单整合下，WebView 只是一个可视化的组件/控制/控件/等。这样我们可以用它来作为我们原生 app 的视觉部分。当你使用原生应用时，WebView 可能只是被隐藏在普通的原生 UI 元素中，你甚至用不到注意到它。

理解 WebView #5769

理解 WebView #5769

Conversation

CoolRice commented May 13, 2019

wuyanan commented May 14, 2019

swants commented May 14, 2019

fanyijihua commented May 14, 2019

swants commented May 14, 2019

leviding commented May 15, 2019

swants left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wuyanan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wuyanan commented May 15, 2019

leviding commented May 17, 2019

leviding commented May 21, 2019

CoolRice commented May 22, 2019

leviding commented May 22, 2019