Facebook PWA：你需要知道的

全球發展最快的社交媒體平台正式加入 PWA 轉型。 我們的最新文章將向您介紹一個非常受歡迎的 Facebook PWA 案例研究。

我們將分解為什麼 Facebook 需要切換到 PWA，以及 PWA 為這家大型科技公司帶來了什麼結果。 讓我們直接進去吧。

Facebook概述

2004 年，哈佛大學輟學生馬克·扎克伯格創立了 Facebook，其使命是建立一個社區，讓來自世界各地的人們可以在帖子下聯繫、分享意見和互動。 剩下的就是歷史。

直到今天，Facebook 仍在幫助人們保持聯繫，從他們的朋友和家人那裡獲取日常生活更新，並了解世界上正在發生的事情。

它是目前這個星球上最大的社交媒體平台，每月有大約 29.3 億活躍用戶，數據取自 2022 年第一季度。

與具有特定目標群體的 LinkedIn 或 Twitter 不同，Facebook 之所以發展壯大，是因為它不局限於任何群體，而是接觸到各種各樣的人，滿足多種類型的需求和內容，並融合了許多不同的媒體方面。

PWA 在未來的作用

當我們聽到 Facebook 推出 PWA 版本的故事時，我們應該對 PWA 了解多少？ 首先，它是關於 PWA 在未來的存在。

這不是是否會的問題，而是網站所有者何時開始集成或構建 PWA 的問題。 因為簡單地說，如果 Facebook、Twitter、Uber、Tinder、星巴克、速賣通和阿里巴巴都將 PWA 納入其數字戰略，那一定是一件事。

其次，我們知道 PWA 還是比較新鮮的，所以它的性能相對於原生應用來說可能是落後的。 但 Facebook 95% 的原生功能可以為 PWA 重新創建，開發者對這種轉變持樂觀態度。

預計將是明天的事情。 幾乎任何應用程序都可以內置到 PWA 中。 PWA 功能列表不斷擴展到本機應用程序等。

為了讓你遠離 PWA 周圍所有低效的噪音，用流行語和奇怪的說法，這就是它給世界帶來的價值。

PWA 的誕生理念是讓網絡成為一個更好的閒逛場所，使其對重要的人群有意義。

最終用戶的日常應用使用習慣有很大的趨勢。 大多數人每天最多使用 6 個應用程序，並且每天只與 2-3 個應用程序認真互動。

因此，用戶不需要更多的應用程序，因為數據顯示他們對應用程序最大的不滿是消耗了太多的存儲空間。 這就是為什麼讓用戶在一個單一的輕量級平台上閒逛並仍然對他們產生持久影響會使原生應用程序不足。

當用戶更喜歡 PWA 時，它可以節省企業和開發人員的精力和資源，以產生有利可圖的在線形象。

跨設備擁有一種無縫體驗比必須支持 2 個獨立的本機應用程序和一個網站更有意義。

此外，即使品牌已經擁有原生應用程序，構建 PWA 仍然有效，只是它更適合大牌。 這將有助於他們在 PWA 首次亮相時吸引所有可能的潛在客戶。

Facebook 在 PWA 集成之前的挑戰

出乎很多人的意料和欣喜的是，Facebook 在 2020 年停止了開發其移動 Web 應用程序。據說最初的應用程序不夠人性化，Facebook 一直在尋找轉用 PWA 的機會。

PWA 跨瀏覽器運行的類似應用程序的體驗很快就結束了這兩種分裂的情況。 它正在發展勢頭，近年來成為許多本地應用程序的可行替代方案。

Facebook 還可以看出，該技術正在主導數字領域，尤其是在電子商務領域。 然而，作為一個網絡應用程序，PWA 仍然是新的，需要在其功能上做更多的工作。

Facebook PWA 的成果

關於設計

Facebook PWA 和非 PWA 出現在主屏幕上時的標誌設計略有調整。 在桌面上，常規的在底部顯示一個 Chrome 書籤，而 PWA 看起來就像一個原生應用程序圖標。

使用非 PWA，您可以獲得帶有菜單欄和頂部地址的舊的新標籤視圖。 當您在真實站點出現並開始加載之前看到初始屏幕時，PWA 的體驗會有所不同，就像應用程序一樣。 它仍然是您設備的瀏覽器來處理工作，但它的出現方式更像是一個沒有頂欄的應用程序。

Facebook PWA 在概覽切換器中獨立運行，供您繼續之前的業務。 除此之外，在內容或佈局上沒有太多差異。

關於用戶體驗

• 加載速度：快速流暢
• 頁面和元素之間的過渡：響應式即時出現
• 整體體驗：簡單、直接、快速

構建像 Facebook 一樣的 PWA 的 7 個技巧

KISS 原則（保持簡單，愚蠢）

移動屏幕比台式機小得多，消耗的數據和電量也少得多。 這意味著開發人員可以使用的內容更少。

因此，請保持簡單、必要和有用。 為某些空間留出空間，而不是讓它們對你的設計感到不知所措。 進行 A/B 測試以刪除不必要的元素，從而降低參與度。

使用複雜的字體會消耗您的網站大量的加載能力，從而減慢進程。 經驗法則是盡可能優先考慮默認字體。

Facebook 用老式的 Helvetica 字體解決了這個問題，這樣就可以在不丟失品牌標識元素的情況下吸引人們的注意力。

確保順暢導航

一個好的優先事項是同時避免所有基於 Web 的交互因素，例如頁眉或頁腳。 在應用程序或移動瀏覽器上使用 Facebook，您會發現一切都與您期望的一樣。

與其使用瀏覽器功能，不如讓它以無邊緣模式溢出，並將您的 PWA 與構建原生應用程序一樣對待。

儘管觸摸手勢應該與備用手勢一起使用，但它們不一定是需要的，因為它們難以執行。

跨瀏覽器功能

值得考慮每個瀏覽器具有 PWA 功能的能力，以在設計階段評估它們的兼容性。

Chrome 和 Firefox 是最支持 PWA 功能的兩個瀏覽器，而 Safari 仍然拒絕完全支持 PWA 中的 service worker。

這種 PWA 核心技術的缺失導致了推送通知和離線瀏覽等原始功能的缺失。 你仍然可以在所有 Apple 產品上看到 Facebook PWA，但它不像其他瀏覽器那樣經過優化。

保持離線模式窺探

我們都記得臭名昭著的 Google Dinosaur，它讓我們忙得不可開交，並為互聯網連接關閉的原因感到高興。 當內容需要更多時間來加載時，同樣的技巧可以在這裡應用。

用其他不那麼令人沮喪的東西替換加載微調器，讓他們忘記負載的東西會讓他們認為網站比它更快。

另一個使加載時間看起來更短的重要用途是骨架屏幕，它可以讓用戶偷看什麼和不期待什麼，同時引導他們走向頁面上的每個興趣點。 但是，不要忽略 Service Workers，它使您的站點能夠存儲用戶生成的數據並在沒有 Internet 連接的情況下正確緩存它們。

優化 SEO

當谷歌更新算法時，搜索引擎要遵循一套新的規則來進行排名。 因此，設計您的頁面既要支持機器爬行，又要支持屏幕後面的真實訪問者。 每個都應該通過 URL 獲得。

沒有 PWA 的幫助，Facebook 帖子很難出現在所有搜索引擎上的相關關鍵字。 他們往往在最高職位上被高度展示。

以下是對 SEO 友好的網站需要注意的幾點：

• 初始索引波需要服務器端呈現的內容，並儘可能使用它。 如果不是，您可以依賴第三方提供的動態渲染服務。
• 通過每個頁面上的規範標籤指定規範 URL。
• 避免被搜索機器人掩蓋或提供相同的內容。
• 確保您的網站在 5 秒內快速加載，增加頁面停留時間，並且高度安全。

適用於不同類型的輸入

如果您打算將觸發器設計為具有懸停效果的交互，請確保用戶單擊或觸摸以激活它。 不要忘記使用準確的語義元素和非語義 HTML，你會得到它。

另一件事是讓鍵盤區域遠離消息空間，這在 PWA 處於橫向視圖時很常見。 Facebook PWA 在確保其用戶在不同設備上獲得準確的交互方面做得非常出色。

使用 Google 的 Lighthouse 工具驗證您的 PWA

當您需要在製作過程中或發布後評估 PWA 的性能時，您可以依賴 Google 的開源工具審計網站 Lighthouse。 Lighthouse 根據 1 到 100 的 5 個參數對網站進行排名。

大牌總是在開發過程中進行測試，以確保涵蓋所有內容。 PWA 也是一個用來分類網站是否是 PWA 的因素。

當確定時，PWA 將在速度、安全性、響應式設計、緩存、離線性能、索引、推送通知和用戶體驗等各個方面進行衡量。

關鍵要點

為了發揮兩全其美，在網站上採用最好的原生應用程序，從而使 PWA 在不久的將來具有巨大的優勢。 在線環境的未來會影響 PWA 的影響。

Facebook PWA 的開創性作用無疑加速了 PWA 革命，同時為他們帶來了輕量級的體驗和強大的平台，供全球用戶加入對話，儘管互聯網連接能力存在差異。

如果您正在尋找一個能夠讓您充分感受到可靠性以幫助您完成 PWA 轉換的專家名稱，那麼 Tigren 就是您所需要的。

立即與我們聯繫，以合理的價格為您提供優質優質的電子商務 PWA 服務。 立即開始賺錢並提高您的投資回報率。