PWA 與 Flutter：詳細比較

已發表: 2020-07-10

目錄

由於這些技術之間存在所有復雜性，因此在嘗試了解 Progressive Web App 和 Flutter 這兩種技術之間的區別時，您可能會感到有些困惑，這是可以理解的。 畢竟，它們在理論上聽起來很相似，因為它們都可以使用一個單一的代碼庫來提供跨設備的引人入勝的體驗。

為了區分這兩種技術，今天我們將深入探討這兩種技術——從它們的工作方式到它們在現實生活中的使用。 讓我們開始吧：

簡要概述

Progressive Web App vs Flutter：概述

什麼是 PWA？

簡而言之，Progressive Web Apps 是外觀和感覺都像應用程序的網站。 該技術融合了 Web 和原生應用程序的最佳功能，這意味著使用 PWA 的用戶可以受益於以前原生應用程序獨有的所有功能，例如推送通知、地理位置等，同時仍然保留來自網絡的最佳功能

這是一項很有前途的新技術； 再加上包括微軟在內的所有大公司的大規模採用以及他們最近將 PWA 推到 Windows 上，你可以肯定，從現在開始你只會看到更多的 PWA。

什麼是顫振？

Flutter 以其像素完美的開發能力而聞名，是 Google 最新的開源 SDK（軟件開發工具包），如果您想創建具有原生應用程序外觀和感覺的移動應用程序，同時仍然可以可用的跨平台。 這意味著 Flutter 應用程序在構建時考慮到了一個單一的代碼庫，從而大大降低了開發成本。

這可能看起來與 Progressive Web App 非常相似，但我們可以向您保證，使所有這些原生應用程序體驗成為可能的底層機制大不相同。

進入細節

語

如前所述，漸進式 Web 應用程序更像是 Web 的新標準，對於必須使用哪種編程語言進行編碼並沒有嚴格的規定。但是，由於它基本上仍然是來自 Web 的技術，因此 Web-像JavaScript這樣的基於語言的語言仍然是 PWA 開發的基礎。

另一方面，Flutter 使用Dart編程語言。 Dart 是一種完全面向對象的編程語言，由於它具有基於 C 的語法風格，因此如果您熟悉類似的語法風格，就很容易學習和學習。 此外，Dart 可以編譯為 ARM 和 x86 代碼，並且使用更新版本的 Flutter，您甚至可以期望能夠將其轉換為 JavaScript，以便您的 Dart 代碼可以有效地在 Web 上運行。

複雜

因為 PWA 是基於 JavaScript 的，它是一種更古老、更成熟的語言，你可以期待學習曲線更加寬容，因為有許多 JavaScript 框架和庫可供你選擇。 Flutter — 作為一種更新的語言 — 乍一看可能會稍微複雜一些，因為從 UI 到邏輯代碼的所有內容都可以在 Flutter 中或多或少地混合在一起。 而且由於Flutter 中的一切基本上都是一個小部件，因此您可能會發現自己最終會遇到一個異常大、深且複雜的“小部件樹”。

表現

在性能方面，這兩者是針鋒相對的，而不是人們所期望的單方面比賽。 與 Flutter 應用程序相比，典型的 PWA 在嘗試直接與本機代碼“對話”時應該會受到一點性能影響——因為 PWA 通常仍然需要使用 JavaScript 橋接器才能訪問設備的底層功能，例如，GPS、相機等。

但是，在查看基準測試時，很明顯 JavaScript 框架，例如NodeJS ，即使不比 Dart（Flutter 應用程序的主幹）更好，也可以在很多情況下執行。

基準 nodejs 與 dart
NodeJS （一種流行的 PWA 框架）在多線程工作負載中的性能明顯優於 Dart [來源]

這是因為 JavaScript 可以更好地利用現代 CPU 的多核特性並更均勻地分配工作負載，儘管該語言本身是單線程的。 隨著 NodeJS 最近引入的worker_threads模塊允許使用線程來並行執行 JavaScript 進程，JavaScript 現在可以更好地處理 CPU 密集型工作負載，並且實際上可以擊敗 Dart 等語言。

工作線程圖 - NodeJS
來源：節點源

特徵

毫無疑問，Flutter——一個專門為移動應用程序的跨平台開發而製作的 SDK——比基於 Web 技術的 PWA 功能要強大得多。 Flutter 應用程序與系統有更深入的集成，因此能夠利用設備的更多原生功能。

此外，在整體用戶體驗方面，Flutter 佔據了上風，因為它採用像素完美的理念，iOS 和 Android 平台的用戶都可以體驗到同樣的無縫體驗。

這是因為 Flutter 呈現自己的 UI 組件，這與大多數其他使用原生平台組件的框架不同。 通過這種方式，Flutter 應用程序在設備之間更加一致，但因此，典型的 Flutter 應用程序大小明顯大於典型的 PWA。 一個簡單的“你好，世界！” 例如，Flutter 應用程序的大小可以超過 7MB，而具有相同內容的 PWA永遠不會突破 1MB 標記。

用例

那麼什麼時候應該選擇其中之一呢？ 好吧，這就是困難的地方（這就是她所說的），因為它們都可以在不同的平台和不同的設備上提供幾乎相同的用戶體驗。 關鍵是你更喜歡這些技術的哪個優勢——覆蓋面或用戶體驗。

自然地，PWA 依賴於 Web 技術，這就是為什麼它可以覆蓋更廣泛的受眾，甚至可以在 Microsoft Store 中使用，從而有效地將您的覆蓋範圍擴大到整個 Windows 10 安裝群（每月有近 7 億活躍用戶）。

另一方面，Flutter 應用程序憑藉其像素完美的理念，可以使應用程序內體驗更具吸引力，同時仍然是企業的一種經濟高效的解決方案，因為 Android 和iOS 平台。

例子

在我們收集的 PWA 和 Flutter 應用程序中，這些是我們認為最能代表其能力的更突出的應用程序：

Flutter——紐約時報

Flutter 最近在 2019 年年中開始了它的新篇章，因為它的潛力在紐約時報的 KENKEN 遊戲的新 Flutter Web 版本中得到了驗證。

Kenken Flutter Web 應用程序
資料來源：顫振就是一切

對於一直致力於實現其 Flutter 應用程序的 Web 版本的開發人員來說，這是一個好消息，因為它展示了 Flutter 框架在被推到最大時的能力。

PWA——推特精簡版

Twitter Lite 可以說是有史以來最成功的 PWA 實施，因為它做了 PWA 最擅長的事情——跨設備提供引人入勝的、類似應用程序的體驗。 想要體驗 Twitter PWA 的用戶可以在他們能想到的每一種設備上啟動該應用程序，無論是台式機、移動設備還是平板電腦……

與性能相同的 Flutter 應用程序相比，性能最佳的 PWA 的核心區別在於，您的 PWA 的總大小在您的設備上不應超過 2MB。

Twitter 精簡版 PWA
Twitter 漸進式網絡應用

在將他們的網站轉換為 PWA 後，Twitter 看到了令人印象深刻的結果。 數字不言自明：

  • 跳出率下降 20%，
  • 每個會話的頁面增加 65%，
  • 發送的推文增加了 75%。
 相關文章：12 個漸進式 Web 應用程序示例，激發您的靈感

Flutter PWA，可行嗎？

對 Flutter 的 Web 支持已經在討論中，並且處於 beta 階段。 使您的 Flutter 在 Web 上可用的過程可以像將 Dart 編譯為 JavaScript 一樣簡單，而不是將其編譯為用於移動應用程序的 ARM 機器代碼。

仍然有一些複雜性使這一切變得更難實現。 但正如上面紐約時報的 KENKEN 遊戲中所觀察到的，Flutter 應用程序有可能做出像樣的 Web 實現，而且 Flutter PWA 可能很快就會成為現實。

結論

由於它們都是具有很大潛力的相對較新的技術，您可能值得探索更多選項並親自查看哪一個最適合您的開發需求。

在 SimiCart，我們是 Google 認可的 PWA 開發機構，隨時準備將下一代購物體驗帶入您的 Magento 商店。

探索 simicart PWA

閱讀更多：
PWA 與 Electron：深入探討

什麼是 PWA？ 您需要了解的有關漸進式 Web 應用程序的所有信息

Magento PWA Studio vs Vue Storefront：哪一個適合你？