Tinder PWA：漸進式 Web 應用程序的成功示例

到目前為止，Tinder 如何影響您的愛情生活？ 您使用 Tinder 的體驗如何？ 對於那些只尋找真正關係的人來說，Tinder 甚至可能不會忘記。 但 Tinder 決定證明他們是錯誤的，並旨在成為一個多功能的約會網站，讓每個人都能找到自己的真愛。 因此， Tinder PWA的誕生是為了幫助世界上最大的約會網站擴大知名度並實現他們想要的流量、提及和轉化。

在今天的案例研究中，我們將介紹另一個成功的 PWA 採用以及它如何幫助 Tinder 實現其目標。 讓我們揭開 Tinder PWA 的面紗並探索它的性能。

火種概述

Tinder 是為精通技術的一代人打造的新約會解決方案。 它可能通常被稱為聯播網站，但其核心是基於跨界和跨時區配對的理念。

早在 2012 年 Tinder 上市時，大多數單身人士就成為了 Tinder 的常客，四處閒逛尋找合作夥伴進行休閒約會。 儘管 Tinder 的存在增加了約會語言集的發明，鼓勵輕快、不負責任、無附加條件的關係，但 Tinder 還是許多成功訂婚和婚姻的故鄉。

要加入 Tinder，您需要合適的個人資料，包括頭像和迷人的簡歷，以吸引具有相似興趣的人。 當您看到個人資料時，您可以向左或向右滑動以通過或繼續前進。 如果您彼此匹配，則可以繼續與該人交換消息。

為了創建匹配項，Tinder 會向用戶提供您所在範圍內的年齡、性別、您附近的位置以及任何可用的共同朋友等信息。 儘管 Tinder 努力使其成為尋找愛情的安全場所，但很難通過 Tinder 獲得可持續的關係，而且欺詐行為也越來越多。

從用戶數量來看，Tinder 仍然是全球最大的約會網站，每月吸引 7500 萬人使用該平台，其中 780 萬是美國用戶。

導致 Tinder PWA 集成的情況

與其他品牌不同，Tinder 沒有遇到重大問題。 他們有一個體面的移動原生應用程序，在操作系統中表現良好。 他們的點擊率很高，但他們認為本可以更好。

Tinder 希望進一步擴張，佔領新市場，尋求新的採用，並保持其在其他在線約會平台中作為市場領導者的地位。

在認識到他們的競爭對手在移動網站上提供更時尚的體驗後，Tinder 決定做得更好，希望在 Tinder 的 V1 體驗中實現功能平等。

切換到 PWA 如何解決 Tinder 的請求？

PWA 可能會在可發現性方面擊敗本機應用程序。 它可以在搜索引擎上推廣，並且在瀏覽器中運行良好，同時提供與原生應用程序類似的體驗。 這使 PWA 具有顯著的競爭優勢，因為它可以吸引更多種類的受眾群體。

當涉及到一種快速而可靠的解決方案來打入新市場並激勵他們轉化為經常性用戶時，PWA 之前什麼都不應該出現。

雖然我們知道 Tinder 是一個高成就者，但我們一直致力於構建一個 Tinder PWA，它提供了極快的加載性能和完全響應、無憂的用戶體驗。

然後，與被替換的移動應用程序相比，他們採用了開發小型 PWA 的解決方案。 通過巧妙地利用現代 Web 應用程序技術和服務人員並優化 JavaScript 性能，該團隊能夠滿足 Tinder 的雄心勃勃的目標。

Tinder PWA 的影響

有史以來最快的 PWA 之一，Tinder 開發團隊花了 3 個月的時間來完成這個強大的項目，從開始到結束。 React 用於 Tinder PWA 的 UI 庫，而 Redux 負責狀態管理。

也稱為 Tinder Online，新的 Web 體驗已證明是採用 PWA 並將其定制為最佳用途的明智之舉。 結果非常值得期待。

Tinder 的錢肯定不喜歡晃動。 當為這種數據成本高昂的環境提供低至前期投資 10% 的基本 Tinder 體驗包時，他們的努力得到了回報。

用戶體驗評論

• 以快速響應的方式進行交互。
• 直觀、輕鬆的網站導航，固定和簡化，象徵著底部橫幅，使整個網站變得非常簡單。
• 當您向左滑動太快和太多時，可能會發生滯後。
• 體驗一圈後，Tinder PWA 會提示您將其添加到主屏幕並接收彈出消息。
• 由於 PWA 仍未得到該生態系統的全面支持，因此可以乾預 iOS 上的體驗。

結果

Tinder PWA 在滑動、配置文件編輯和每位用戶每次會話花費的時間方面優於其原生應用程序。 追求小尺寸幫助 Tinder 以 4.69 秒的最小加載時間比之前的 11.9 秒贏得了勝利，從而帶來了前所未有的高水平用戶參與度、重新參與度和更多的右側滑動。

Tinder PWA 被稱為該領域最好的漸進式 Web 應用程序之一。 與移動應用程序相比，它通過降低 15% 的跳出率和提高 30% 的點擊率顯示出卓越的性能。

數據說明了一切：與原生應用相比，用戶在 PWA 上滑動更多、發消息更多、編輯個人資料更多，並且在 PWA 上花費的時間更長。 更多的參與，更少的不必要的步驟。

如何構建像 Tinder 一樣的 PWA？

想知道 Tinder 的 PWA 是如何超越和超越的嗎？ 別說了。 我們將為您總結他們所做的工作。

揭示框架

路由級別的代碼拆分

起初，Tinder 應用程序使用包含不必要代碼的龐大、單一的 JavaScript 包，當用戶在應用程序上進行核心交互時，它們都會啟動。

那是整個體驗被延遲的時候。 因此，他們決定使用代碼拆分將最需要的代碼轉移到前端，而加載緩慢的代碼可以在出現之前盡可能多地休息。

Tinder 依靠 React Router 和 React Loadable 來執行這個想法，並直接開始拆分頂級代碼，因為他們的應用程序通過基於配置的信息呈現集中了所有路由。

React Loadable 屬於 James Kyle 的以組件為中心的小型庫，用於在 React 中進行代碼拆分。

它是一個可以創建另一個組件的函數，因此將捆綁包分解為組件很容易。 結果是一個 101KB 大小的包而不是一個 166KB 的包，並且 DCL 從 5.46 秒縮短到 4.69 秒。

React 16 最終不得不發布升級以最小化 React 的包大小，這是使用 Roll-up 更好地打包和替換未使用代碼的策略的一部分。

Tinder 還依賴於 CommonsChunkPlugin，這是一種流行的 webpack，用於在很長一段時間內跨路由將庫分塊為單個包文件。

長期資產緩存

使用 [chunkhash] 提取靜態資源輸出和 webpack 的長期使用以將緩存破壞器附加到每個文件。

為了確保即使在 3G 連接速度較慢的移動設備上也能保留良好的體驗，同時滿足預算目標，Tinder 使用“現實世界的性能預算”制定了基本規則。

核心和供應商塊的預算為 155KB，而慢速加載塊限制為 55KB，其餘為 35KB。 這種最低限度的設置使網站能夠快速啟動並保持互動。

CSS 需要限制在 20KB 以避免性能下降。

CSS 策略

Tinder 創建了可被 Atomic CSS 重用的高質量 CSS 樣式，它與初始繪製和其他基於樣式表的加載 CSS 保持一致。 20KB gzipped 是重要樣式的頂部，但它們最近可以重建到小於 11KB。

Workbox 和離線資產緩存的使用

Tinder 通過 Workbox Webpack 插件利用網絡攔截，緩存其 App Shell 和主要靜態資產（即 CSS）以及所有核心、供應商和清單包。

這樣，當用戶再次向上訪問第二個訪問者時，啟動應用程序的速度會更快，並且所有重複訪問對於任何網絡連接都是有彈性的。

高級 PWA 服務

僅供參考，漸進式網絡應用程序的名稱來自這樣一個事實，即 PWA 對每個品牌開放，以利用其現代技術來利用和定制每個細節以供適當使用。

如果您的目標是為您的在線商店製作像 Tinder PWA 這樣的高質量作品，請開始優先考慮優質的 PWA 服務。 並非每個 Web 開發人員和設計師都能適應 PWA 開發。

在依靠 PWA 機構時，專業知識和多年經驗是需要考慮的重要因素。 在 Tigren，自從 Google 將 PWA 概念介紹給全世界以來，我們一直在研究 PWA。 我們已與多家全球電子商務企業一起在 PWA 中發揮帶頭作用並蓬勃發展。

Tigren 是一家位於越南的高級 PWA 開發提供商，專門提供 Magento PWA 解決方案。 我們的目標是幫助在線企業以最節省預算的方式實現其目標。

如果您對 PWA 有任何疑問，請通過[email protected]給我們留言。

關鍵要點

PWA 被認為是每個網站運營的未來標準。 它吸引了更多的潛在客戶，吸引了更多的觀眾，與訪客互動，並讓他們停留更長時間，同時確保他們中的大多數人轉化。

通過對速度和便利性的特殊調整，Tinder PWA 已經實現了 Tinder 功能在更大的市場採用率的目標，更多的用戶留在網絡上進行交互，推動了更多的比賽，以及更多的應用程序轉換器。