譯者 | 子非 譯文 | https://juejin.im/post/5ce76ee4f265da1b8d15f700 作者 |kirupa 原文 | https://www.kirupa.com/apps/webview.htm
我們通常使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等瀏覽器來瀏覽網頁。你也許正在使用其中一種瀏覽器閱讀本文！雖然瀏覽器對于訪問互聯網內容的任務來說非常流行，它們還有一些我們從未過多關注過的競爭對手。這些競爭對手以 WebView 的形式被我們所熟知。這片文章將講解 WebView 的神秘之處以及為什么它這么棒。
讓我們來點無聊的定義。WebView 是一種嵌入式瀏覽器，原生應用可以用它來展示網絡內容。這句話有兩部分要注意：
第一，原生應用（亦稱 app）。原生應用由專門為特定平臺設計的編程語言和 UI 框架編寫：
換句話說，應用不是指在瀏覽器中運行的跨平臺網絡應用。相反，你的應用主要是用像 Swift、Objective-C、Java、C++、C# 語言來編寫的。這種工作方式與系統更加貼近。在這樣的背景下，你使用的大多數應用都應該是原生應用。許多流行的應用，比如你的臺式機/筆記本上的 Microsoft Office 也是如此。
第二個處需要注意的是嵌入式瀏覽器。我們都知道瀏覽器是什么。它是讓我們可以在網上沖浪的獨立應用：
如果你把瀏覽器想象成兩部分，一部分是 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 方案，開發人員通?？梢酝耆刂萍虞d的內容。惡意代碼進入并在設備上造成混亂的可能性非常低。
這就是為什么對于 WebView，開發人員可以使用各種受支持的方式來覆蓋默認的安全行為，并讓 Web 代碼和原生應用代碼相互通信。這種溝通通常稱為 bridge。你可以在前面的圖表中看到 bridge 可視化為 Native Bridge 和 JavaScript Bridge 的一部分。詳細了解這些 bridge 的內容超出了本文的范圍，但要點如下：為 Web 編寫的相同 JavaScript 不僅可以在 WebView 中運行，還可以調用原生 API 并幫助你的應用更深入地集成酷炫的系統級功能，如傳感器，存儲，日歷/聯系人等。
現在我們已經了解了 WebView 的概況以及他們所擁有的一些強大作用，讓我們退后一步，看看我們一些在原生應用中受歡迎的 WebView 的用例情況。
WebView 最常見的用途之一是顯示鏈接的內容。在移動設備上啟動瀏覽器，將用戶從一個應用切換到另一個應用以及希望他們找到返回應用的操作尤其令人失望。WebView 通過在應用本身內完全加載鏈接的內容來很好地解決這個問題。
看看下面的視頻，了解當我們點擊 Twitter 或 Facebook 應用中的鏈接時會發生什么： Twitter 和 Facebook 都沒有在默認瀏覽器中加載鏈接的內容。他們使用 WebView 偽造應用內瀏覽器并將內容呈現為應用體驗本身的一部分。Twitter 的應用內瀏覽器看起來非常簡單，但 Facebook 則更進一步，做了一個看起來很棒的地址欄甚至還有一個漂亮的菜單：
選擇 Twitter 和 Facebook 做例子是因為我安裝了這兩個應用，并且可以隨時錄制視頻與大家分享。有許多應用通過依賴 WebView 作為應用內瀏覽器來以類似的方式打開鏈接。
廣告仍然是原生應用最流行的賺錢方式之一。這些廣告大部分是如何投放的？答案是通過 WebView 提供的 Web 內容：
雖然原生廣告確實存在，但大多數原生解決方案在幕后使用 WebView，并從集中式廣告服務器提供類似于你在瀏覽器中看到的廣告。
到目前為止，我們一直在將 WebView 視為舞臺上的次要支持角色，并由原生應用和其他原生 UI 元素完全支配。WebView 具有成為明星的深度和廣度，并且在一大類應用中 WebView 內部加載的 Web 內容構成了整個應用用戶體驗：
這些應用被稱為混合應用。從技術角度來看，這些仍然是原生應用。事實上，這些應用所做的唯一原生操作就是托管 WebView，而 WebView 又加載 Web 內容和用戶交互的所有 UI?；旌蠎煤苁軞g迎有幾個原因。最大的一個是開發人員生產力。如果你有一個在瀏覽器中運行的響應式 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 非常棒。雖然看起來它們看起來像是完全特殊和獨特的野獸，記住，它們只不過是一個在應用中設置好位置和大小的瀏覽器，而且不會放置任何花哨的 UI。其實還有更多東西，但這是它的精髓。在大多數情況下，除非你要調用原生 API，否則不必在 WebView 中專門測試 Web 應用。除此以外，你在 WebView 中看到的內容與你在瀏覽器中看到的內容相同，尤其是使用同一渲染引擎時：
在 iOS 上，Web 渲染引擎始終是 WebKit，與 Safari 和 Chrome 相同。是的，你沒看錯。iOS 上的 Chrome 實際上使用了 WebKit。
在 Android 上的渲染引擎通常是 Blink，與 Chrome 相同。
在 Windows，Linux 和 macOS 上，由于這些是更寬松的桌面平臺，因此在選擇 WebView 風格和渲染引擎時會有很大的靈活性。你看到的流行渲染引擎將是 Blink（Chrome）和 Trident（Internet Explorer），但是沒有一個引擎可以依賴。這完全取決于應用以及它正在使用的 WebView 引擎。
我們可以花更多的時間來了解 WebView，并更深入地了解它們提供的一些特殊行為，但這會讓我們偏離主題。對于我們在本篇文章要講的東西，不偏離主題并寬泛了解WebView 才是正確的——至少到目前為止。
最多閱讀
