Uber PWA：漸進式 Web 應用的完美案例研究

曾經對叫 Uber 出租車的簡單快捷印象深刻嗎？ 你想知道優步是如何做到這一點的嗎？ 優步必須投資一些技術或其他東西才能給我們帶來如此流暢的體驗，但它到底是什麼，我們如何了解它？ 如果您曾經使用過 Uber PWA，您會注意到 Uber PWA 與其他原生應用程序之間的差異。 它像普通應用程序一樣快速、強大且功能強大，但事實並非如此。 正如標題所示，您可能知道一些事情，所以讓我們深入研究這個案例研究。

優步概述

優步科技是21世紀成功的代表企業，利用科技的力量幫助人們。 這家有抱負的初創公司成立於 2009 年，其想法簡單而絕妙，很快就取得了非凡的成就，顛覆了公共交通和出租車行業。

這個概念在許多國家並不新鮮。 然而，對於大多數西方人來說，允許乘客從獨立司機那裡叫車並支付車費是相當離譜的。

優步僅作為連接需求和供應的第三方，仍然見證了爆炸性增長，儘管被眾多爭議所包圍，但它已成為最令人著迷的公司之一。

Uber 宣稱“我們通過讓世界運轉來點燃機遇”，其使命是為世界各地的每個人提供專門且可靠的交通服務。

時至今日，優步目前在增長中佔有超過 1.18 億用戶，超過 350 萬活躍服務司機，2020 年其拼車業務的總預訂收入為 266.1 億美元。

PWA 如何幫助基於服務的公司蓬勃發展？

企業在這個數字時代生存的製勝法寶始於提供超越傳統界限的精緻用戶體驗。

隨著科技公司的數量和質量不斷提高，Uber、Tinder 和 Netflix 等數字商品或基於信息的服務必須在客戶服務方面做得更好，而不僅僅是通過電子郵件或電話處理他們的投訴和查詢。

這些數字平台最重要的共同點是依靠網站或移動應用程序與目標受眾進行交流。 它是電商的血脈，是收益的源泉。

對創新者來說，最大的衝動是找到填補缺失部分的解決方案，即改善屏幕背後用戶體驗的技術答案。 2015 年，Google 工程師創造了 Progressive Web App 的名稱，這是一種新的 Web 技術，它充分利用了 Web 和原生應用程序的特性。

考慮到 PWA 如何幫助基於服務的公司獲得成功，有兩個主要趨勢。

首先，頁面權重會隨著數據庫的增加而增加，但帶寬也會增加。 因此，網站會變得更慢更重，所以我們有並發的優化過程。

PWA 可以中斷服務工作者的網絡請求，以最大限度地減少往返延遲和預緩存站點資源，以從第二次訪問創建即時加載。 這種緩存允許開發人員專注於網站速度並優化加載時間，只需 3-5 秒。

其次，電子商務一直在為買賣雙方提供便利。 在這些趨勢中，移動商務似乎是最賺錢的類型，十年來用戶增長了三倍。

由於 service worker 在後台運行，它可以響應來自操作系統的事件或進程。 此功能使 PWA 能夠將彈出通知推送到 Android 移動設備。 另一方面，iOS 拒絕支持此功能，但隨著 PWA 聲譽的增長，我們認為 Apple 需要改變主意。

優步在 PWA 集成之前的挑戰

優步希望通過緊跟其技術進步來繼續創造一場革命並主導拼車經濟。

他們希望為用戶提供一個快速訪問、最新且方便的機會，讓他們可以隨時使用他們的服務，尤其是在緊急情況下，無論他們不下載移動應用程序還是不隨身攜帶智能手機。

這就是為什麼他們正在尋找一種解決方案來快速流暢地執行，在瀏覽器中始終如一地運行良好，並且可以處理低 Internet 連接請求。

PWA 是一種具有成本效益且構建時間短的解決方案，以維持強大的在線狀態，可以在連接不良的情況下嚴格工作並提供閃電般的加載速度。

優步 PWA 的成果

關於設計

與 PWA 網站設計的一個顯著區別是 Uber PWA 不會移動活動標籤的位置，不會留下“加載”動畫，而是切換頁面效果。 您可以使用桌面設備清楚地看到它。

通過將徽標保留在頂部，即使在幾秒鐘內，這個閃屏也可以幫助加強對 Uber 用戶的召回能力。

關於功能

• 導航

Uber PWA 或 m.uber 的設計具有清晰直觀的佈局，用於向下滾動交互。 它可以讓眼睛朝著熟悉的方向移動并快速理解頁面。

• 加載速度

Uber PWA 獲得了令人難以置信的首頁加載。 這些元素會立即整齊地出現在它們需要的位置。

導航的設計在一定程度上有助於簡化加載速度。 它在您滾動時執行加載，因此使站點能夠固定內容的外觀，從而節省緩存剩餘資源的時間。

負責的開發人員還聲稱，m.uber 通過渲染 Preact 來響應第一個瀏覽器請求，這發生在服務器上。 通過將內聯標記作為字符串，服務器幾乎可以立即交付內容。

• 頁面和元素之間的過渡：響應迅速，連接流暢，高交付方式，交互時間迅速。
• 體驗：我們只能將一切描述為一個平靜而令人滿意的預訂旅程，讓您放心。

結果

Uber 用戶現在只需點擊幾下即可輕鬆預訂行程，無論他們的網絡連接、操作系統、數據庫和使用 PWA 的設備類型如何。

Uber 在 PWA 推出後報告了一項重大變化，其中通過 Uber PWA 預訂了更多的乘車服務，而不是之前的移動原生應用程序。 越來越多的人可能會繼續在優步上預訂。

從那時起，M.uber 就變得超級輕巧、流暢，並且與任何現代瀏覽器兼容。 該網絡應用程序克服了使用低端設備的騎手在站點性能方面的問題，提供了一致的類似應用程序的體驗，只要他們需要打車就可以輕鬆滿足。

優步 PWA 有什麼令人興奮的地方？

以下是 Uber 開發人員能夠通過轉型 PWA 項目攜帶的一些有趣的技術事實。

• Uber PWA 速度驚人

考慮到市場需求，他們使用 PWA 的意圖是在移動設備上替代他們的原生應用程序。 開發人員處理了一個很小的 PWA，壓縮後只有 50kB。

目標是讓一切盡可能輕巧，避免不必要的組件，即使在 2G 網絡下也能穩健運行。

沒有什麼比參加重要活動遲到、趕到外面兜風更糟糕的事情了，但最終卻被加載緩慢的應用程序卡住了。 它帶來了最大程度的挫敗感，並可能有害地影響他們對優步的態度。

然而，Uber 已經成功推出了一款閃電網絡應用，即使在 2G 上也只需不到 3 秒的時間即可顯示出來。 這真的很快。 他們的所作所為令人印象深刻。

• Uber PWA 在不同情況下都是可靠的

憑藉所取得的成績，優步有信心進入全球市場。 他們總是找到一種精心策劃的方法，將 Uber PWA 調整為針對每種情況和問題的快速簡便的體驗。

儘管覆蓋範圍和連接信號較差，但國際觀眾可以隨時隨地使用他們的服務。 此外，用戶仍然可以離線、在優步網站上和在旅途中對他們的行程進行操作或調整。

這一切都是可能的，因為 Uber PWA 仍然可以加載以供後續訪問並保存所有用戶生成的內容以供以後與 Wi-Fi 同步。

關鍵要點

如果沒有漸進式網絡應用程序的幫助，最具活力的成長平台不可能成為現在的樣子。 憑藉更輕鬆、更快、更簡單的體驗，Uber PWA 讓拼車預訂流程變得更加輕鬆。 Lyft 被認為是 Uber 最大的競爭對手，但其市場份額無法與 Uber 相比。

因此，如果您想了解有關 PWA 如何幫助您的在線業務的更多信息，請訪問 Tigren 的博客以查看更多我們經常發布的出版物。

自 2015 年以來，Tigren 一直是 Magento PWA 開發服務值得信賴且可靠的名稱。我們已幫助全球 800 多家中小型企業提高投資回報率。

我們優質的 Magento PWA 集成解決方案具有世界知名的品質，但對於有抱負的所有者來說，在他們的預算範圍內建立他們理想的在線形象仍然是合理的。

如果您希望通過一對一諮詢盡快解決您的問題，請發送郵件至 [email protected] 並獲取報價，如果我們不匹配，則無需承諾。