Reddit PWA：領先的社交媒體如何利用 Web 應用程序

採用新技術是在線業務創新和增長的必然部分。 一般來說，大公司可以輕鬆體驗最新的小工具，提高客戶滿意度並在競爭中脫穎而出。 PWA 將是下一件大事，被 Reddit PWA、Facebook PWA 和阿里巴巴 PWA 等眾多大品牌採用。

話雖如此，PWA 被視為現代網站的新標準，也是取代原生應用程序的有希望的參與者。 然而，對於小型和新興企業來說，它是令人難以置信的負擔得起的。 在今天的案例研究中，我們將首先深入了解 Reddit PWA，看看這個流行的社交媒體網站如何利用 PWA。

Reddit 概覽

Reddit 由弗吉尼亞大學的 Steve Huffman 和 Alexis Ohanian 於 2005 年創立。 當其他人想分享一個故事時，它的名字是對“我讀過它”的回應的一種調整。

這是一個龐大的平台，用戶可以在其中提交各種內容類型的帖子，即社交新聞、論壇討論、網絡內容或聚集網絡。 這是 Reddit 受歡迎的部分原因，它是幾乎所有學習領域的知識討論的累積來源。

此外，Reddit 允許人們在提出任何問題時保持匿名，從而為開放和令人興奮的體驗騰出空間來瀏覽他們大腦渴望的任何信息。

Reddit 帖子由社區決定。 只有當用戶根據他們認為有用的方式對其進行投票時，才能將帖子或 subreddit 上移。 通過這種方式，可以減少垃圾郵件或有害、誤導性信息。

他們的主要目標受眾是 18-29 歲的大學本科生、精通互聯網的研究員和社交媒體倡導者。 他們在美國排名第 10 位最受歡迎的社交網絡，每月活躍用戶近 4800 萬，全球每月活躍用戶超過 4.3 億。

整合 PWA 如何幫助品牌提升成就

加速用戶體驗

許多品牌使用 PWA 來提高其應用的加載速度。 以 Uber PWA 為例。 知道他們的客戶（大部分時間）都在匆忙使用 Uber，他們創建了一個小巧但功能強大的 Uber PWA，即使在低至 2G 的連接下也可以在 3 秒內加載。

加快用戶旅程將降低跳出率，從而提高潛在轉化率。 現在的人們經常將加載緩慢的頁面視為觀看一部他們隨時會退出的令人討厭的電影。

沃爾瑪還發現，加載時間僅提高 1 秒，轉化率已經提高了 2%。

增加客戶價值

PWA 不僅可以幫助您改善首頁加載，還可以在頁面和元素之間創建平滑、無縫的過渡。 換句話說，現場用戶體驗也將是愉快的。

對於電子商務商店和市場，客戶在頁面上停留的時間越長，就意味著他們對所提供的商品感興趣。 與此同時，那些傾向於批量購物的人發現購物之旅既輕鬆又快捷。

PWA 可以在關鍵時刻啟用推送通知，從而重新與頻繁用戶聯繫以進行互動，從而為在線業務帶來更多價值。

模糊在線 - 離線距離

憑藉離線工作的能力，PWA 允許用戶通過瀏覽加載的頁面來繼續他們未完成的在線旅程。

他們還可以對內容進行更改，並且所有內容都將保存在後台，以便在重新應用連接時進行最接近的同步。

所有設備行為相同

小型企業可以為其他基本投資分配預算，同時節省 PWA 集成成本。

只需要為任何設備構建一個快速應用程序可以在所有在線狀態上保持一致的性能，並最大限度地利用時間和資源來吸引和獲取客戶。

這就是成長中的企業可以有效地增加收入的方式。

PWA 集成之前 Reddit 的挑戰

Reddit 一直想要一個解決方案來鼓勵其用戶使用該應用程序，尤其是通過桌面。 他們一直在尋找一種方法，讓用戶幾乎可以毫不費力地切換到應用程序。

數據顯示，使用應用程序的最大缺點之一是消耗過多的存儲空間。 相比之下，PWA 安裝需要不到 1MB。

此外，Reddit 的下載過程因其龐大的數量而被視為時間殺手。 一些 Reddit 線程表示，沒有看到 Reddit 更早地在 PWA 上工作並優化功能令人驚訝。

Reddit PWA 的成果

關於設計

儘管 PWA 跨平台保持相同的外觀和感覺，但每個瀏覽器支持它的方式不同。 三點菜單使使用 Chrome 而不是 Microsoft Edge 從 Web 安裝或卸載 PWA 變得更簡單。

“將應用程序安裝到主屏幕”等彈出標誌被認為是用戶友好的，並且是鼓勵訪問者使用應用程序的必備條件。

關於功能

• 加載速度：高效快速流暢
• 頁面和元素之間的過渡：無縫且響應迅速，即時出現的元素
• 易於導航：典型的下拉式內容佈局，帶有後展開懸停效果，熟悉、直觀、輕鬆
• 每次互動的參與度：總體令人滿意。 Reddit 徽標顯示以供加載內容稍後立即出現的方式使網站看起來運行得更快

如何構建像 Reddit 一樣的 PWA？

Reddit PWA 的提示

確保滿足 PWA 核心要求。 它應該快速啟動，但在整個用戶旅程中保持快速。 Reddit PWA 從第一次加載就顯示出驚人的速度，所有內容在您滾動時立即顯示，確保響應式用戶體驗。

僅在 iOS 上，Apple 不支持重新參與功能，例如彈出消息和 PWA 安裝通知。

如果您想練習高級開發以獲得最佳功能，請知道 PWA 是基於最佳實踐和現代 Web API 構建的。 根據您的業務優先級和特定需求，這些可以獨立或組合應用。

Reddit PWA 專注於首先提高速度，其他一切緊隨其後。 這就像說，“嘿，看看我們的移動應用程序的性能有多好，想像一下，如果你下載該應用程序會得到什麼。” 請注意，在訪問者滾動瀏覽後，Reddit 會啟用俯臥撑來鼓勵用戶切換到應用程序。

為了使您的網站具有現代的邊緣外觀並釋放您的 PWA 的全部潛力，Google 鼓勵優先考慮敏捷策略，即逐個啟動功能並查看該組合是否適合您。

這種觀點可以讓你一步一步地堅持市場反應。 分析跟踪數據可以了解用戶最喜歡使用哪些功能以及哪些功能沒有為他們帶來價值。

這些輸入對於網頁設計師和開發人員進行相應的調整至關重要。 保持試錯過程，直到您執行正確的過程，以幫助您擴大 PWA 產生的額外資金。

PWA 開發的簡單介紹

配置

創建 app 目錄並在此處填寫 js、CSS 和 images 子目錄。

為應用程序界面編寫標記

在這一步，無論是否禁用 JavaScript，PWA 都應該能夠顯示內容。 這樣，無論何時連接中斷或滯後，用戶都不會面臨令人不安的空白頁面。

相反，所有交互都應該是響應式的並在各種屏幕上正確顯示。 這需要考慮移動友好的方向。

測試應用程序

一旦您在瀏覽器中進行了操作，您就可以使用 Google 的 Lighthouse 對其進行測試，看看它對 PWA 標準的執行情況如何。

按 F12 在您的公共站點上打開 Chrome 的開發人員面板，找到審核選項卡，然後單擊 Lighthouse。

服務工作者

作為一個除了用戶交互之外在後台運行的相對獨立的 Web 腳本，這種強大的能力使 PWA 能夠攔截網絡請求、啟用本地緩存等。

應用清單

Service Worker 需要應用清單來確定 PWA 在主屏幕上的外觀和行為。 您可以設置名稱、圖標、主題顏色和應用程序的方向。

包起來

在此階段之前，代碼已完成，但您需要將應用程序上傳到 Web 服務器。 這將使您的 PWA 能夠在 HTTPS 的安全性下運行。

Tigren 的電子商務高級 PWA 開發

我們的專長

作為擁有十年曆史的專業 Magento 服務提供商，Tigren 現在是全球頂級外包機構之一。

這一切都始於一個由訓練有素、技術嫻熟、敬業的開發人員組成的小團隊，他們努力實現客戶的目標。 時至今日，我們已經為全球 800 多家中小企業執行了 1000 多個項目。

總部設在越南，我們希望以合理且實惠的價格為盡可能多的有抱負的企業主提供他們應得的世界級 Magento 電子商務項目。

我們的服務

我們是 Magento 的專業機構，旨在為中小企業帶來可持續增長的解決方案。 通過 PWA，我們提供以下 2 項優質服務：

• 自定義漸進式 Web 應用程序開發
• 高級 Tigren PWA 模板

關鍵要點

PWA 是本機應用程序和常規網站的正確組合，可為最終用戶帶來真正的價值。

專家預測它將成為數字世界的下一件大事，尤其是電子商務。 希望通過學習 Reddit PWA 的這個案例研究，您將了解如何創新網站以幫助您的客戶，並可能成為 PWA 的早期採用者之一。