PWA 只會越來越好，不會敗！

Slack是一款網路應用程序。Trello是一款網路應用程序。谷歌文檔。Gmail中。即使是Twitter。

該網站最初是作為超鏈接文檔的集合。在2000年代中期的「Web 2.0」炒作是關於網路如何變得互動。起初，我們只是對超鏈接文檔進行評論和提升，但不久之後，像我這樣的人可以在現在稱為「網路應用程序」中完成他們幾乎所有的工作。其中一些應用程序增加了協作或其他好用的功能，傳統的桌面應用任務，如電子郵件或文檔創建。其他人更加超鏈接 - 本質上是文檔 - 認為嵌入在Slack和Twitter或Trello的多用戶本質上。

但是關於網路應用程序有一條近乎黃金的規則：本地應用程序可能更好。

原生應用程序 - 專為iOS，Android或Windows平台設計的應用程序 - 與Web應用程序相比具有許多固有優勢。無論您在HTML文檔頂端放置多少JavaScript，都很難與原生應用的性能，質量和持久性相匹配。Web應用程序構建起來可能更快，分發更簡單，並且更容易迭代，但這在處理各種情況下取消原生應用程序的優勢還不夠。

但是網路平台不斷發展，並且有一些即將到來的網路技術可以為網路應用提供更好的機會與其本地的競爭對手進行競爭。

我們來談談其中的一些。

漸進式WEB應用程序

微軟在2月份對Windows上的Progressive Web Apps提供支持方面做出了巨大的貢獻。但是您是否知道iOS 在11.3更新中悄悄地向Safari添加了對PWA的支持？這意味著您現在可以製作漸進式Web應用程序並將其發布到Android，iOS，Chrome操作系統和Windows。

那麼，什麼是漸進式Web應用程序？

那麼，對於初學者來說，它只是一個帶有特殊「清單」文件的網站，它定義了應用程序的名稱，主屏幕的圖標以及應用程序是否應顯示典型的瀏覽器UI或只是接管整個屏幕。用戶可以將任何帶有清單文件的網站添加到他們的主屏幕或其「開始」菜單，並像常規的移動或桌面應用程序一樣啟動它。

但是，不要只是從互聯網上載入一個網站，一個Progressive Web App通常會緩存在您的設備上，因此它具有某種離線功能。這可以是任何東西，從保存JavaScript和CSS，以便網站載入速度更快，最多可以保存用戶在本地進行的所有操作，例如傳統應用。

重要的是，漸進式Web應用程序還可以支持推送通知和其他後台工作，這是由於一種名為「服務人員」的新Web技術。服務人員可以幫助緩存新內容並將本地更改同步到遠程伺服器，從而使漸進式Web應用程序保持最新狀態作為一個典型的網站最新，同時保持作為本地應用程序響應。

現在，Progressive Web App的最好例子就是Twitter Lite客戶端。它速度快，最小，甚至有一個切換，所以你可以最大限度地減少數據使用。一些在線商店和出版物也利用了PWA的精彩表現。我實際上在我的iPhone上玩了一個最小2048克隆PWA。它可以離線工作，並記住會話之間的高分。有時它甚至可以保存遊戲狀態，所以我可以長時間恢復，但這並不完美。

蘋果對Progressive Web App標準的支持分散且遠未完成。事實上，蘋果似乎與谷歌有一個不同的看法，即PWA應該具備多大的能力。隨著PWA在蘋果競爭對手的平台上變得越來越無處不在，我們將看到這一願景如何演變。

WEBASSEMBLY

網路應用程序如何變得更強大？在過去的十年中，您可以在網頁上完成的工作種類發生了重大變化。隨著我們的計算機變得更快，瀏覽器優化JavaScript性能，我們從閱讀電子郵件和編寫文本文檔到做圖形設計和製作音樂。

但本地應用程序具有編譯好的，貼近金屬的代碼的優點。如果您使用適用於Android的Java或適用於iOS的Swift編寫您的應用程序，則可以輕鬆地在性能上超越幾乎任何基於JavaScript的應用程序。例如，如果您使用C或C ++編寫應用程序的某些部分，則很多遊戲開發人員可以做到這一點，通常可以更快。

應用程序底層代碼的速度並不僅僅是定義應用程序的響應程度，而是限制它可以做的事情。視頻編輯，運動圖形，3D建模，遊戲，機器學習，音樂創作，甚至Snapchat過濾器都利用了大量的CPU和GPU功能。JavaScript無法在高端競爭。

這是WebAssembly步入的地方。它是Web的二進位格式。這意味著什麼呢？那麼，與將JavaScript「Just In Time」翻譯成您的CPU可以理解的機器代碼的JavaScript不同，WebAssembly代碼在通過互聯網發布之前會預編譯，然後在您的Web瀏覽器下載時完全編譯。這意味著瀏覽器解析的負擔較輕，並且可以以接近本機的速度運行，性能一致。WebAssembly旨在與JavaScript進行互操作，因此典型的Web應用程序可以將其大部分邏輯用JavaScript編寫，然後對像速度敏感的部分（如圖像處理演算法或整個視頻遊戲）可以在WebAssembly中運行。

WebAssembly的好處在於，您不必學習全新的編程語言就可以使用它。已經用C和C ++編寫的高性能代碼可以編譯為WebAssembly。例如，Unity和虛幻引擎都已移植到WebAssembly。這意味著您可以在瀏覽器窗口中玩遊戲，而無需擔心安裝特殊的插件。

與許多多年來一直陷於標準委員會的Web技術提案不同，或者只是從各種瀏覽器中獲得不穩定或不一致的支持，WebAssembly已經完全被Google，Mozilla，Apple和Microsoft所接受，並且現在正在每個主要瀏覽器中發布你不計算Internet Explorer。

將WebAssembly與漸進式Web應用程序相匹配，將一個無聊的舊網站變成一個可行的競爭者，在您的主屏幕上使用本地技術構建的「真實」應用程序旁邊，而不會犧牲任何無聊舊網站的優勢。

說實話，我不會經常聽到人們說「是的，但是本地應用程序看起來和感覺都比網站好」，但是聽起來好像有人會說如果我去參加正確的聚會。

我的意思是，當然，您可以下載一個保持離線狀態的PWA，當它們有保證時提供推送通知，並且由於WebAssembly的性能與原生應用程序一樣好。但是，它不會只是看起來和感覺像一個網站？

是的，它會。無論您為了模仿iOS或Android的審美和動畫而做了多少工作，您的手都受到HTML和CSS的基本限制。

因此，談到多年來一直陷於標準委員會的網路技術提案......讓我向您介紹Houdini。

Houdini提到了一系列新功能，可讓開發人員更直接地與瀏覽器的CSS渲染引擎進行對話。與Houdini一起工作的設計師可以創建令人難以置信的自定義布局，樣式和動畫，而不僅僅是定義一組樣式規則並讓瀏覽器處理它。

為了幫助理解為什麼這可能是一個強大的東西，以Google的Flutter應用程序開發框架為例。Flutter可以模擬原生iOS或Android應用程序的外觀和風格，並具有假定的像素完美的準確性，直至正確的滾動速度。Flutter不是用來製作網站，而是製作iOS，Android和Fuchsia應用程序。

但是，Fuchsia通過Skia圖形庫完成所有像素完美的布局，樣式和動畫，這是與Chrome瀏覽器渲染相同的引擎。當你製作一個網站時，你用HTML定義了內容，用CSS定義了樣式，但是它是一個像Skia這樣的渲染引擎，它繪製了實際的像素。你說，「讓我成為一個紅色的盒子，」但Skia負責完全如何。

Houdini旨在讓您訪問瀏覽器的渲染引擎。但是，不要為Skia編寫自定義代碼並將其作為帶Flutter的本地應用發布，您可以編寫CSS和JavaScript，並與每個瀏覽器的渲染引擎交談。

這是一個很大的責任，但是這個責任給了你很大的權力。謝天謝地，Houdini代碼將與傳統的CSS布局和樣式共存。這只是一個額外的選擇，當你需要一些東西來看待和感受一種非常具體的方式。

很難判斷Houdini的提案是否會在瀏覽器的內部深入到足以模仿Flutter與Skia所做的一切。但有趣的是，瀏覽器供應商想要朝這個方向前進。

不幸的是，現在大多數Houdini規範仍然處於空白狀態，Chrome是您可以測試其中許多想法的唯一瀏覽器。但是，如果網路應用的外觀和感覺是「本土的」，Houdini可能是他們到達目的地的途徑。

但是，本地API呢？

所以，回顧一下：

漸進式Web應用程序為我提供主屏幕上的圖標，離線支持和推送通知。

WebAssembly為我提供本地或接近本機的性能。

胡迪尼，如果它發生的話，給我我想要的幻想動畫和陰影。

「但是Feature X，我最喜歡的Android / iOS新API呢？」那麼，你可能運氣不好。

本機應用始終扮演著角色。原生iOS或Android應用程序可以充分利用平台所能提供的所有特定優勢：Apple的ARKit，Google的Visual Core晶元，原生圖形API以及每年都在操作系統上運行的眾多其他功能，以保持其競爭力。但對於那些重視無處不在和方便超越前沿功能的應用，在我看來，網路應用在未來幾年只會在我們的主屏幕和桌面上增加數量和重要性。

很難預測哪些下一代網路應用會產生最大的影響。即將到來的是什麼？

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！