[譯] 理解 WebView

• 原文地址：Understanding WebViews
• 原文做者：kirupa
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：子非
• 校對者：swants, wuyanan

咱們一般使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等瀏覽器來瀏覽網頁。你也許正在使用其中一種瀏覽器閱讀本文！雖然瀏覽器對於訪問互聯網內容的任務來講很是流行，它們還有一些咱們從未過多關注過的競爭對手。這些競爭對手以 WebView 的形式被咱們所熟知。這片文章將講解 WebView 的神祕之處以及爲何它這麼棒。

咱們繼續！

WebView 入門知識

讓咱們來點無聊的定義。WebView 是一種嵌入式瀏覽器，原生應用能夠用它來展現網絡內容。這句話有兩部分要注意：

1. 第一，原生應用（亦稱 app）。原生應用由專門爲特定平臺設計的編程語言和 UI 框架編寫：

換句話說，應用不是指在瀏覽器中運行的跨平臺網絡應用。相反，你的應用主要是用像 Swift、Objective-C、Java、C++、C# 語言來編寫的。這種工做方式與系統更加貼近。在這樣的背景下，你使用的大多數應用都應該是原生應用。許多流行的應用，好比你的臺式機/筆記本上的 Microsoft Office 也是如此。

2. 第二個處須要注意的是嵌入式瀏覽器。咱們都知道瀏覽器是什麼。它是讓咱們能夠在網上衝浪的獨立應用：

若是你把瀏覽器想象成兩部分，一部分是 UI（地址欄，導航欄按鈕等），其它部分是把標記跟代碼轉換成咱們可見和可交互視圖的引擎。

WebView 就是瀏覽器引擎部分，你能夠像插入 iframe 同樣將 Webview 插入到你的原生應用中，而且編程化的告訴它將會加載什麼網頁內容。

把全部的這些概念放到一塊兒並簡單整合下，WebView 只是一個可視化的組件/控件/微件等。這樣咱們能夠用它來做爲咱們原生 app 的視覺部分。當你使用原生應用時，WebView 可能只是被隱藏在普通的原生 UI 元素中，你甚至用不到注意到它。

你的 WebView 就像是原生組件海洋裏一座對 Web 友好的島。對於你的應用來講這座島的內容不須要存儲在本地。你的 WebView 一般會從 http:// 或者 https:// 地址下載網絡內容。這意味着你能夠從服務器中獲取部分（或所有）Web 應用而且依賴 Webview 將這部份內容展現在原生應用中：

這種靈活性打開了一個瀏覽器端的 Web 應用和但願展現在原生應用中的 Web 應用代碼之間可重用的世界。這一切聽起來真的很是棒……

運行在你的 WebView 中的 JavaScript 有能力調用原生的系統 API。這意味着你沒必要受到 Web 代碼一般必須遵照的傳統瀏覽器安全沙箱的限制。下圖解釋了使這樣成爲可能的架構差別：

默認狀況下，在 WebView 或 Web 瀏覽器中運行的任何 Web 代碼都與應用的其他部分保持隔離。這樣作是出於安全緣由，主要是爲下降惡意的 JavaScript 代碼對系統形成的傷害。若是瀏覽器或 WebView 出現故障，那很不幸，但能夠接受。若是整個系統發生故障，那很不幸……而且這樣不能接受。對於任意 Web 內容，這種安全級別頗有意義。你永遠不能徹底信任加載的 Web 內容。WebView 的狀況並不是如此。對於 WebView 方案，開發人員一般能夠徹底控制加載的內容。惡意代碼進入並在設備上形成混亂的可能性很是低。

這就是爲何對於 WebView，開發人員可使用各類受支持的方式來覆蓋默認的安全行爲，並讓 Web 代碼和原生應用代碼相互通訊。這種溝統統常稱爲 bridge。你能夠在前面的圖表中看到 bridge 可視化爲 Native Bridge 和 JavaScript Bridge 的一部分。詳細瞭解這些 bridge 的內容超出了本文的範圍，但要點以下：爲 Web 編寫的相同 JavaScript 不只能夠在 WebView 中運行，還能夠調用原生 API 並幫助你的應用更深刻地集成酷炫的系統級功能，如傳感器，存儲，日曆/聯繫人等。

WebView 用例

如今咱們已經瞭解了 WebView 的概況以及他們所擁有的一些強大做用，讓咱們退後一步，看看咱們一些在原生應用中受歡迎的 WebView 的用例狀況。

App 內置瀏覽器

WebView 最多見的用途之一是顯示連接的內容。在移動設備上啓動瀏覽器，將用戶從一個應用切換到另外一個應用以及但願他們找到返回應用的操做尤爲使人失望。WebView 經過在應用自己內徹底加載連接的內容來很好地解決這個問題。

看看下面的視頻，瞭解當咱們點擊 Twitter 或 Facebook 應用中的連接時會發生什麼：

Twitter 和 Facebook 都沒有在默認瀏覽器中加載連接的內容。他們使用 WebView 僞造應用內瀏覽器並將內容呈現爲應用體驗自己的一部分。Twitter 的應用內瀏覽器看起來很是簡單，但 Facebook 則更進一步，作了一個看起來很棒的地址欄甚至還有一個漂亮的菜單：

選擇 Twitter 和 Facebook 作例子是由於我安裝了這兩個應用，而且能夠隨時錄製視頻與你們分享。有許多應用經過依賴 WebView 做爲應用內瀏覽器來以相似的方式打開連接。

廣告

廣告仍然是原生應用最流行的賺錢方式之一。這些廣告大部分是如何投放的？答案是經過 WebView 提供的 Web 內容：

雖然原生廣告確實存在，但大多數原生解決方案在幕後使用 WebView，並從集中式廣告服務器提供相似於你在瀏覽器中看到的廣告。

全屏混合應用

到目前爲止，咱們一直在將 WebView 視爲舞臺上的次要支持角色，並由原生應用和其餘原生 UI 元素徹底支配。WebView 具備成爲明星的深度和廣度，而且在一大類應用中 WebView 內部加載的 Web 內容構成了整個應用用戶體驗：

這些應用被稱爲混合應用。從技術角度來看，這些仍然是原生應用。事實上，這些應用所作的惟一原生操做就是託管 WebView，而 WebView 又加載 Web 內容和用戶交互的全部 UI。混合應用很受歡迎有幾個緣由。最大的一個是開發人員生產力。若是你有一個在瀏覽器中運行的響應式 Web 應用，那麼在各類設備上使用相同的應用做爲混合應用會很是簡單：

當你對 Web 應用進行更新時，全部使用它的設備均可以當即使用該更改，由於內容來自一個集中位置，也就是你的服務器：

若是你必須使用純原生應用，不只須要爲構建應用的每一個平臺更新項目，你可能必須經歷耗時的應用審覈過程才能使你的更新在全部的應用商店獲取到。從部署和更新的角度來看，混合應用很是方便。將這種便利性與原生設備訪問相結合能爲你的 Web 應用提供超能力，這樣你就擁有了一個成功的技術解決方案。WebView 使一切成爲可能。

原生應用擴展

你將看到 WebView 使用的最後一個大類與可擴展性有關。許多原生應用（尤爲是桌面應用）爲你提供了一種經過安裝加載項或擴展程序來擴展其功能的方法。因爲 Web 技術的簡單性和強大，這些加載項和擴展一般以 HTML、CSS 和 JavaScript 而不是 C++，C# 或其餘方式構建。一個流行的例子是 Microsoft Office。構成 Microsoft Office 的各類應用盡量是原生和經典的方式，可是爲其構建擴展的方法之一就涉及 Web 技術。例如，一個流行的此類擴展是維基百科應用：

這些基於 Web 的擴展程序（如維基百科）在 Word 等 Office 應用中的表現方式是經過——是的，WebView：

WebView 中顯示的實際內容來自此URL。當你在瀏覽器中訪問該頁面時，你並無真正看到不少內容。是原生應用功能和 Web 代碼（經過 WebView 暴露）的功能之間的交集使體驗工做完整。做爲 Word 應用內維基百科擴展的用戶，你可能永遠不會有疑問幕後發生了什麼，由於功能已經被很好地集成，咱們要的僅僅是它能正常工做。

WebView（一般）並不特別

WebView 很是棒。雖然看起來它們看起來像是徹底特殊和獨特的野獸，記住，它們只不過是一個在應用中設置好位置和大小的瀏覽器，並且不會放置任何花哨的 UI。其實還有更多東西，但這是它的精髓。在大多數狀況下，除非你要調用原生 API，不然沒必要在 WebView 中專門測試 Web 應用。除此之外，你在 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 引擎。

咱們能夠花更多的時間來了解 WebView，並更深刻地瞭解它們提供的一些特殊行爲，但這會讓咱們偏離主題。對於咱們在本篇文章要講的東西，不偏離主題並寬泛瞭解WebView 纔是正確的——至少到目前爲止。

若是你對此主題或任何其餘主題有疑問，最簡單的方法是經過咱們的論壇，這裏有一羣最友好的人等着你的到來，而且會樂於幫助你解決問題！

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。