Twitter PWA：你需要知道的

頂級公司與小公司之間的技術差距從未如此緊密。 隨著進步的網絡應用程序，最大的貢獻者之一是財務能力已大大降低。 通過應用 Web 應用程序技術的新的和先進的使用，深刻地提到服務工作者，各種規模的公司都可以根據自己的功能需求和預算調整 PWA。 如果你正在從世界上偉大的 PWA 採用中尋找靈感，那麼 Twi​​tter PWA上的以下案例研究是你不能錯過的。

PWA 集成之前 Twitter 的故事

2017 年 4 月，與 Google 合作推出了其網站在移動瀏覽器上的新改進 Twitter Lite。 這個名字來源於它被建造得更輕、更快捷、更實用的事實。

快進到今天，Twitter 是美國第三大最受歡迎的社交媒體網站，也是全球第 15 大最受歡迎的社交媒體網站。 儘管他們的大部分用戶人口都在美國，但日本和印度是 Twitter 用戶的兩個最大代表，加起來超過了美國用戶的數量。

Twitter Lite 的故事要追溯到 2010 年到 2017 年，Twitter 正在成為世界頂級社交媒體網站。

與早期他們最大的競爭對手 Facebook 相比，Twitter 的起步並不順利。 然而，從 2010 年起，藍鳥在圖表上見證了一個美妙的景象，一個季度一個季度的持續增長。 2015年、2016年和2017年，增速放緩。

認識到美國以外的潛力後，Twitter 迅速進入國際市場。

Google 推出 PWA 後，Twitter 就知道如何擴展和獲取新用戶。 Twitter Lite 是他們的最終答案，專門針對網絡連接不可靠的新興國家。 新的 Twitter PWA 在使用優化的數據保護模式執行時佔用不到一兆字節的存儲空間。 模糊預覽中的圖像和視頻，直到用戶點擊它們。

谷歌 Twitter Lite 工程主管 Nicolas Gallagher 表示：“Twitter Lite 現在是使用 Twitter 最快、最便宜、最可靠的方式。” Twitter Lite 的成功成為許多有關 PWA 的文章的頭條新聞。

世界上最大的 PWA 的解決方案 – Twitter PWA

為了幫助您了解 PWA 開發的實踐知識，以下將提供有關 Twitter PWA 或 Twitter Lite 框架的關鍵點，以及為按需請求定制的創新方法。

請注意，Twitter Lite 的整個目標是確保用戶擁有出色的現場體驗，無論互聯網連接狀況如何，從而導致後續訪問並將訪問者轉化為常客。 由於 PWA 能夠提高速度、可靠性和安全性，您可以在 mobile.twitter.com 上體驗它。

建築理念

Twitter Lite 的核心是一個簡單、大小適中的 Node.js 服務器和客戶端 JavaScript 應用程序。 PWA 將支持構建用於數據緩存和存儲的 API。 服務器將首先處理身份驗證過程，組裝應用程序的最早狀態，並通過應用程序外殼中的初始 HTML 呈現將 Web 代碼轉換為交互式頁面。

在後台加載後，將直接從 Twitter API 請求數據。 這種架構的簡單性有助於 Twitter PWA 在效率方面帶來出色且可靠的服務，即使在規模上也是如此。

設計性能

易於使用是 Twitter Lite 的首要任務之一。 每個月都會有數百萬甚至數億用戶訪問這個社交網絡。 因此，他們希望創建一個在任何連接情況下都高度可用的用戶旅程。

開發人員利用一系列增量性能利用，PRPL 模式，結合現代瀏覽器的最新更新，構建 Service Worker、Web 推送通知、IndexedDB 和 Web 應用安裝橫幅。 它們都是令人印象深刻的加載速度和獨立於連接的一部分。

數據的使用

依靠緩存資源預先提供較小的數據，再加上數據保存模式，Twitter Lite 天生就被設置為最大限度地減少數據的使用，導致時間軸頁面減少 40%。 為了按需加載優化的圖像，執行 HEAD 請求以通過單擊按鈕顯示其大小。

漸進式加載

在將初始 HTML 響應注入瀏覽器後，發送指令以預加載關鍵資源，以供服務器組裝交互狀態。 使用 webpack 將腳本分解成細小塊，以便僅在被要求時加載。

換句話說，來自 Twitter Lite 的初始加載非常快，因為只執行可見視圖的必要性，而服務工作者將預緩存額外的資源，以實現幾乎即時的外觀和未來交互的平滑過渡。

離線可用性

就像它的本機應用程序一樣，Service Worker 使臨時離線使用成為可能。 通過 HTML 應用程序外殼中的緩存、靜態資產和一些最常見的表情符號，所有以前加載的頁面都會立即重新打開。

當數據或腳本加載失敗時，會提供“重試”按鈕，以確保問題得到解決。 只需啟用離線瀏覽，啟動和後續訪問的加載速度都會大大提高。

渲染

忘記昂貴的渲染工作； Twitter Lite 針對組件渲染進行了優化。 然而，更大的問題在於推文的複雜性以及對額外性能的無限要求列表。

然後他們想到了一個虛擬化列表組件，它只呈現對上面顯示的視圖可見的內容，並保留用於跨屏幕滾動。 另一個更新是通過將非關鍵渲染推遲到非活動模式並通過 requestIdleCallback API 節省數據消耗。

系統和倍速

Twitter Lite 是一個基於組件詳細信息構建的響應式設計系統，以使應用程序符合任何形狀請求。 使用 UI 組件為快速迭代和重用已建立的構建塊騰出了空間。 還值得一提的是，佈局設計嚴重依賴 flexbox，在顏色、字體大小和長度上固定的數量有限。

Twitter PWA 的結果

移動和桌面網站

Twitter PWA 據稱可以在 5 秒及以下的時間內在大多數具有 3G 網絡的設備上進行交互。 Lite 版本的加載速度提高了 30%，並節省了高達 70% 的數據使用量，同時將交互延遲時間減少了 25% 以上。

與舊的原生應用程序相比，Twitter PWA 最多只佔用 3% 的大小，只是設備存儲空間的一小部分。 然而，它的作用深遠而強大。 時間線是最複雜的功能之一，可以從有限的 30 行代碼配置行構建，同時將 Redux 模塊附加到 React 組件，混合內容。

PWA 的工作方式與本機應用程序非常相似，具有常規提要、推送通知彈出窗口、直接消息傳遞和搜索選項卡等標準功能。 過渡是跨頁面和元素的響應，儘管觸摸響應明顯比其本機應用程序慢。 開發人員仍在努力提高未來版本的可用性和責任感。

與 Mac 和 Windows 中舊的被忽視的 Twitter 官方應用程序相比，桌面版本的一切都非常有利，在狹窄的窗口中運行良好。 整個體驗感覺相對輕巧且使用起來輕鬆。

Twitter Lite 目前支持多達 42 種語言，並創建了 Globalize 功能以顯示適合當地人的數字、日期和消息。

數字結果

• 每個會話的頁面增加 65%
• 發送的推文數量增加 75%
• 跳出率降低 20%

Twitter PWA 如何成為最快的 PWA 之一？

隨著服務工作者現有知識的功能調整，以及減少數據消耗的優化，PWA 被硬連線以處理更快的加載速度，並且在後續訪問中幾乎立即出現，無論是開始還是在旅程中。

優化速度不會在一兩天內完成，而是一個重複的測試、跟踪、測量、試圖了解它發生的原因以及應用可能的解決方案的過程。 績效工作是一個不斷觀察、衡量和改進的惡性循環。

話雖如此，Twitter Lite 是對首頁加載、React 組件渲染、防止重新渲染等方面的小改進和更新的積累。 每個都迎合了整體性能的提升，以及我們現在看到的所有微小的努力，這是世界上最大和最快的 PWA 採用之一。

當然，為了保持這個頭銜，開發人員必須不斷努力確保一切都在控制之中，並在有機會的情況下將流程改進為更好的東西。

關於 Twitter PWA 和 PWA 的常見問題

Twitter 是 PWA 嗎？

絕對地。 Twitter 於 2017 年與 Google 開發人員合作發布了新的漸進式網絡應用程序版本。Twitter PWA 被命名為 Twitter Lite，其構建的重點是為與美國相比可能經常遇到不穩定連接的國際用戶提供服務。

構建一個像 Twitter PWA 這樣的 PWA 成本高嗎？

Twitter PWA 據說是所有 Twitter 官方中最便宜的版本，但在不同的瀏覽器中表現出色，甚至類似於本機應用程序的一些最強大的功能。

Twitter PWA 結合了卓越的性能優化和 PWA 的現代技術的世界級應用。 話雖如此，構建像 Twitter Lite 這樣出色的 PWA 在很大程度上取決於您僱用或外包給的開發團隊。

PWA 是原生應用程序的最佳替代方案，並普遍預測了網站的未來。 因此，如果在線企業正在尋找一種通過改善現場客戶旅程來利用其轉化率的方法，請放棄重量級且價格昂貴的原生應用程序，轉而尋找 PWA。

從哪裡開始您的業務的 PWA 開發？

嗯，這一切都應該從您的業務所在、它需要什麼以及您希望它在哪裡開始。 說得通？ 因為您不想在無關緊要的事情上浪費金錢和寶貴的時間，對吧？

下一個關鍵步驟是確定 PWA 是否適合您的業務戰略。 幾乎每個人都在尋找增加網站流量、提高轉化率或利用其單位價值的方法。 PWA 開發機構可以幫助您解決所有這些問題。

他們可以幫助您在站點上可能存在的任何低性能區域中檢測問題。 如果您無法找到最佳解決方案，請聯繫諮詢或檢查服務。

這就是我們到達以下步驟的時候：選擇一個可靠的 PWA 開發服務提供商。 您需要一個擁有多年專業知識的名字，吸引一個充滿活力的開發人員團隊，為他們的客戶爭取最好的服務，當然，還需要創建功能強大且功能豐富的 PWA 所需的出色知識和技能。

Tigren 是世界領先的外包機構，在過去十年中受到全球數千家中小企業的信賴。 我們是一支由年輕、有抱負和敬業的個人組成的團隊，他們從各自行業的頂尖成就者中挑選出來。

我們專注於電子商務開發，尤其是 Magento 和 PWA 開發服務。 我們希望為您帶來您在其他地方找不到的最優惠的價格，幫助您直到最後，實現您來找我們的目標。

如果您需要有效且具有成本效益的解決方案，您可以信賴我們：

• 從頭開始完全電子商務 PWA 開發
• 部分電子商務 PWA 開發
• 現有電子商務 PWA 的內置解決方案和改進
• 高級即用型電子商務 PWA 主題/插件/擴展

關鍵要點

新的 Twitter PWA 為沈悶且反應遲鈍的移動網絡世界帶來了新鮮空氣。 Twitter 和谷歌之間強大的合作夥伴關係以變革性的採用而聲名鵲起，打破了對 PWA 潛力的所有擔憂和懷疑。 成為成功的 PWA 早期採用者，開始呵護您的在線用戶，並在為時已晚之前通過 Tigren 推動您的投資回報率的提高。