2022 年漸進式 Web 應用的終極指南——包含 50 個 PWA 示例

有興趣構建漸進式 Web 應用程序嗎？ 本指南將告訴你所有你需要知道的——以及市場上最好的 PWA 的 50 個示例！

多年來，我們一直在不停地宣揚：你需要一個原生應用程序。 這是有充分理由的，我們仍然堅持這一點。

我們的平台 News、Canvas 和 Canvas for eCommerce 已幫助我們的客戶極大地改善移動用戶體驗、增加流量、建立更多忠誠度並增加收入。 原生應用非常適合與您的核心用戶群建立更深層次的關係，並且對於任何重視忠誠度、參與度和保留率的品牌來說都是必不可少的。

然而，沒有什麼是完美的。 原生應用不能替代出色的 Web 體驗。

本機應用程序只與那些安裝了應用程序的人相關。 對於第一次在網絡上查看您的新訪問者、偶爾來訪但還沒有足夠投入安裝應用程序的臨時用戶或使用桌面的客戶，它們無濟於事。

這些潛在客戶對於成功也絕對至關重要。 第一印像很重要，原生應用程序總是在渠道的早期階段有所幫助。 您需要為整個旅程提供快速、流暢的體驗。 如何？

輸入漸進式 Web 應用程序 (PWA)。 如果你有一個網站，並且它對你或你的企業很重要——你需要一個 PWA。

在本文中，我們將定義漸進式 Web 應用程序，討論它們最重要的好處，並分享 50 個互聯網上最好的 PWA 示例。

我們將總結一些關於如何構建 PWA 的建議，以及它們如何與原生移動應用程序一起工作以創建一個成功的移動 UX 組合。 讓我們開始吧。在本文結束時，您將了解開始您的漸進式 Web 應用程序項目所需了解的一切。

我們將從基本問題開始——什麼是 PWA？

什麼是漸進式 Web 應用程序？ 讓我們定義一個 PWA

漸進式 Web 應用程序將 Web 的優點與以前只能在本機應用程序上實現的功能相結合。

PWA 像傳統網站一樣存在於瀏覽器中，並且完全連接到網絡的鏈接和搜索引擎索引基礎設施。 就像原生應用程序一樣，雖然它們可以從主屏幕圖標啟動，向用戶的設備發送推送通知，瞬間加載，並且可以離線工作。

漸進式網絡應用程序與您的網站並不分離。 它們是對您網站的增強，使其與當前的最佳實踐保持同步，並利用服務工作者等尖端網絡技術在移動瀏覽器中提供類似應用程序的體驗。

也許你仍然不確定它們到底是什麼。

這是可以理解的，因為該術語被廣泛使用，但可靠的定義卻難以捉摸。 讓我們看看這個詞的歷史來澄清事情。

漸進式 Web 應用程序的原始定義

“Progressive Web App”一詞是由 Francis Berriman 和 Google 工程師 Alex Russell 在 2015 年創造的。 他們一直在觀察一類新的 Web 應用程序的出現，並在晚餐時決定對它們進行定義和命名。

他們提出了以下標準：

• 響應式：適合任何外形尺寸
• 獨立於連接：通過 Service Worker 逐步增強，讓他們離線工作
• App-like-interactions：採用 Shell + Content 應用程序模型來創建應用程序導航和交互
• 新鮮：由於 Service Worker 更新過程，透明地始終保持最新狀態
• 安全：通過 TLS（Service Worker 要求）提供服務，以防止窺探
• 可發現：由於 W3C Manifests 和 Service Worker 註冊範圍允許搜索引擎找到它們，因此可以識別為“應用程序”
• Re-engageable ：可以訪問操作系統的重新參與 UI； 例如推送通知
• 可安裝：通過瀏覽器提供的提示到主屏幕，允許用戶“保留”他們認為最有用的應用程序，而無需使用應用程序商店的麻煩
• 可鏈接：意味著它們是零摩擦、零安裝且易於共享的。 URL 的社會力量很重要。

您可以看到這些標準如何滿足定義的“網絡應用程序”部分。

多年來，像我們和其他公司這樣的公司創建了允許企業使用Web 技術創建應用程序體驗的平台。 直到今天，這都很有效，但需要權衡取捨。 為了創建出色的原生應用體驗，您將失去 Web 的可發現性和可鏈接性。

像服務工作者（我們稍後會介紹）這樣的新 Web 技術出現並改變了一些事情——允許開發人員構建能夠充分利用原生應用 UX 的體驗並將其放入瀏覽器中，從而保留 Web 的所有優勢。

您不再需要接受平庸的移動 Web UX，同時推動人們下載您的本地應用程序以獲得真正的交易。 您可以通過 App Store和網絡為在線與您的品牌互動的每個人提供出色的移動體驗。

這就是 Berriman 和 Russell 觀察到的。 他們沒有發明任何東西，他們注意到網絡的變化並將其命名。

“進步”部分呢？

在這種情況下，這意味著應用程序是使用漸進增強構建的。 這是一種設計技術，專注於構建適用於所有人的“基線”體驗，但在更先進的設備上進行升級和增強。 漸進式 Web 應用程序的體驗不一定對所有用戶都相同，它會根據他們設備的功能以及他們授予的權限進行調整。

那麼Berriman 和Russell 的定義就足夠了嗎？ 問題是很少有 PWA 真正滿足所有這些標準。 它們更像是一個願望清單，或者一個目標，或者一個典型案例。

Google 對漸進式 Web 應用的定義

一段時間以來，微軟一直對 PWA 充滿熱情。 Apple 取得了一些令人信服的結果，現在（大部分）加入了。不過，在大型科技公司中，谷歌從一開始就真正支持 PWA。

也就是說，谷歌自己似乎並不能 100% 確定這個定義。 早在 2015 年，他們就列出了 10 個特徵，然後將其減少到 6 個，然後又添加了 3 個新特徵。

目前，谷歌對漸進式網絡應用的定義包括三個支柱。 在他們的介紹頁面中，他們聲明 PWA 是：

“經過精心設計的 Web 應用程序功能強大、可靠且可安裝。 這三個支柱將它們轉變為一種感覺就像是特定於平台的應用程序的體驗”

這更有幫助，但沒有那麼有用，因為它是如此廣泛。 不過，它暗示了關鍵點，即 PWA 正在將傳統上僅與原生平台相關聯的體驗帶入網絡。

漸進式 Web 應用程序的技術定義

我們可以定義 PWA 的第三種方法是指定純技術標準，而不是 UX 標準。

這就是 Web 開發人員和作家 Jeremy Keith 在他 2017 年的博客文章什麼是漸進式 Web 應用程序中所嘗試的。 .

Keith 認為 PWA 定義的混淆是沒有根據的，基本上必須滿足三個標準：

1. HTTPS—— PWA 必須在使用 HTTPS 的安全服務器上運行。 Service Worker 對他們的潛力至關重要，只有在你有 HTTPS 的情況下才能使用它們。
2. Service Worker——本質上是一個與主瀏覽器“線程”分開運行的 JavaScript 文件，允許開發人員控制應用程序如何處理網絡請求和緩存。 這有助於推動 PWA 令人印象深刻的速度和離線功能。
3. Web App Manifest –向瀏覽器提供應用程序描述的 JSON 文件，包括名稱、作者、圖標、描述和運行資源等詳細信息。 這確保了應用程序是可發現的。

Keith 繼續指出，這是一個最小的、基本的定義。 PWA 的能力遠不止於此，但它們必須滿足這三個技術標準才能晉級。

因此，我們已經看到了最初的觀察/渴望定義、Google 的 UX 驅動定義和極簡技術定義。 我們可以推測什麼？ 儘管可能仍然存在一些歧義，但我們現在對漸進式 Web 應用程序是什麼有了一個很好的了解。

PWA 是一個現代、安全、快速加載的網站，它使用尖端的 Web 技術來實現這些特徵。 與傳統網站不同，它的性能和用戶感覺就像一個原生應用程序——並在此過程中“避開”瀏覽器選項卡。

正如亞歷克斯·羅素所說：

“這些應用程序不是通過商店打包和部署的，它們只是吸收了所有正確維生素的網站”

這是一個很好的表達方式。 PWA 是最新一代的網絡。 它們是能夠利用現代瀏覽器技術潛力的網絡應用程序。 通過將您自己的網站變成 PWA，您可以為其提供最佳運行所需的“維生素”。

現在，我們將繼續討論構建漸進式 Web 應用程序的好處，然後再查看 50 個 PWA 示例來激發您的項目。

漸進式 Web 應用程序的好處

我們之前說過，如果你有一個網站，並且它以任何方式與你的業務成功相關——你需要建立一個 PWA。

這似乎是一個大膽的聲明，但這是事實。 為什麼？

簡而言之，如果不構建 PWA，您可能會將客戶、收入和增長留在桌面上。 正如 Google 網絡團隊的 Pete LePage 和 Sam Richard 所說：

“數字不會說謊！ 推出 Progressive Web Apps 的公司取得了令人矚目的成果。 例如，Twitter 的每個會話頁面增加了 65%，推​​文增加了 75%，跳出率降低了 20%，同時將其應用程序的大小減少了 97% 以上。 改用 PWA 後，Nikkei 的自然流量增加了 2.3 倍，訂閱量增加了 58%，每日活躍用戶增加了 49%。 Hulu 用 Progressive Web App 取代了他們特定平台的桌面體驗，回訪次數增加了 27%”

這只是表面問題。

讓我們來看看其他知名品牌作為推出 PWA 的直接後果所取得的成果。

• 阿里巴巴將移動網絡轉化率提高了 76%，iOS 上的活躍用戶增加了 14%，Android 上的活躍用戶增加了 30%
• Debenhams的移動收入增長了 40%，轉化率增長了 20%，在線增長高於市場
• Pinterest的總花費時間增加了 40%，用戶產生的廣告收入增加了 44%，核心參與度增加了 60%
• 福布斯的每位用戶會話增加了 43%，廣告可見度提高了 20%，參與度提高了 100%
• BMW銷售網站的點擊率提高了 30%，加載時間提高了 4 倍，移動用戶增長了 50%，自然流量增加了 49%
• MakeMyTrip將頁面速度提高了 38%，轉化率提高了兩倍，購物者會話增加了 160%
• AliExpress將新用戶的轉化率提高了 104%（iOS 上增加了 82%），每次會話花費的時間增加了 74%，每次會話訪問的頁面增加了 2 倍
• Housing.com的轉化率提高了 38%，平均會話時間延長了 10%，跳出率降低了 40%，頁面加載時間總體加快了 30%
• Wego的廣告點擊率增加了兩倍，訪問者增加了 26%，總體轉化次數增加了 95%。 在 iOS 上，他們獲得了令人印象深刻的 50% 的轉化率提升和 35% 的會話持續時間
• Treebo的轉化率同比增長了 4 倍。 重複用戶的轉化率提高了 3 倍。
• Tinder將加載時間從 11.91 秒減半至 4.69 秒，並且 PWA 比其原生應用程序小 90%，從而全面提升了參與度

所有這些驚人的結果是怎麼可能的？ 很多原因歸結為 PWA 提供了更好的用戶體驗，並由此產生了巨大的業務成果。

不僅如此。 讓我們更詳細地了解一些漸進式 Web 應用程序的主要優勢，從最重要的優勢開始——速度。

PWA 快如閃電

現代消費者期望即時加載。 如果某些東西沒有立即加載，許多人會失去興趣，也許是永久性的。 這既不言自明，又得到大量數據的支持：

• 近 50% 的用戶表示，他們在移動設備上的最大挫敗感是等待緩慢的頁面加載（來源）
• 在 2 秒內加載的頁面有 9% 的跳出率，需要 5 秒的頁面有 38% 的跳出率（來源）
• “轉化率急劇下降”與平均加載時間從 1 秒增加到 4 秒有關（來源）
• 加載時間每改進 1 秒，轉化率就會提高 2%，而 100 毫秒的改進會產生高達 1% 的增量收入（來源）

本質上，您的網站加載速度越快越好。 如果你讓你的客戶/讀者/用戶等待，那麼他們中的相當一部分會反彈而不給你他們的錢。

提高站點速度可以全面推動更好的結果。 這裡的所有都是它的。

那麼 PWA 如何幫助您實現這一目標呢？ 漸進式網絡應用程序很快。 真的很快。

例如，Pinterest 設法將他們的“交互時間”加載時間從緩慢的 23 秒縮短到 5.6 秒。 這平均是通過慢速 3G 連接的 Android 硬件。 這對關鍵指標產生了可喜的連鎖反應。

一點也不差。 不過，Pinterest 的結果並不罕見。

流媒體平台 ZEE5 通過構建 PWA 將站點速度提高了兩倍並將緩衝時間減半。 Uber 的 PWA 在2G 網絡上加載時間不到 3 秒。 福布斯通過其 PWA 將移動加載時間從之前的移動網站上的 6.5 秒縮短到僅 2.5 秒。

當您構建一個良好的、設計良好的漸進式 Web 應用程序時，速度的提高是有保證的。

為什麼漸進式 Web 應用程序如此之快？

多虧了最重要的服務人員，PWA 如此之快。 正如 Jason Grigsby 在他的優秀著作 Progressive Web Apps 中所說：

“漸進式 Web 應用程序使用服務人員來提供異常快速的體驗。 Service Worker 允許開發人員明確定義瀏覽器應該在本地緩存中存儲哪些文件，以及在什麼情況下瀏覽器應該檢查緩存文件的更新。 存儲在本地緩存中的文件可以比從網絡中檢索的文件更快地訪問”

格里格斯比繼續解釋說：

“當有人從漸進式 Web 應用程序請求新頁面時，呈現該頁面所需的大部分文件已經存儲在本地設備上。 這意味著頁面幾乎可以立即加載，因為瀏覽器需要下載的只是該頁面所需的增量信息”

本機應用程序的傳統優勢之一是它們可以快如閃電。 他們以類似的方式實現這一點——運行應用程序所需的所有文件都在安裝時下載，它只需要檢索新數據。 服務工作者允許漸進式網絡應用程序為網絡帶來類似的令人印象深刻的性能！

PWA 在 Web 上提供類似應用程序的 UX

我們已經討論過的速度顯然是用戶體驗的重要組成部分。 不過，還有其他重要因素，PWA 在這裡也有幫助。

原生移動應用長期以來一直是移動 UX 的黃金標準。 它們仍然是（至少在某些方面），但 PWA 現在可以直接從瀏覽器匹配它們的大部分感覺和功能。

例如，PWA 可以：

• 離線工作或在網絡條件差的情況下工作（下一個更多內容）
• 安裝在用戶的設備上並通過主屏幕圖標訪問，如原生應用程序
• 將推送通知發送到設備的鎖定屏幕（不幸的是僅在 Android 上）
• 旨在通過模仿原生應用程序的導航結構提供全屏、“身臨其境”的體驗
• 像原生應用一樣使用動畫
• 開髮用於訪問設備的硬件，如相機和 GPS

早期的移動網絡相當粗糙。 桌面瀏覽器的舊範式被“固定在”智能手機上，它並不真正適合。 響應式設計時代顯著改善了這一點，但總是缺少一些東西。

原生應用程序明確地是為智能手機構建的。 他們總是更好地適應設備的體驗。 雖然 PWA 模糊了這條線，但在經驗方面的區別可能很難確定。

例如——您是否使用過 Instagram Lite、Google Maps Go 或 Twitter Lite？

您可以在 Google Play 商店下載它們並查看它們 - 看看它們與任何其他本地應用程序的感覺如何。

假設這些是其主要原生應用程序的更輕、更精簡的版本，你會被原諒。 正如您可能已經猜到的那樣——它們是漸進式網絡應用程序。

這顯示了 PWA 在重建我們都知道和喜愛的原生應用程序體驗方面的潛力。 當我們稍後進入示例時，您會明白我們的意思！

注意：您可能已經註意到這些 PWA 已在 Google Play 商店中上線。 Google 在 2019 年初向 PWA 開放了 Play 商店！ 這表明他們對 PWA 作為真正的跨平台應用程序的未來充滿信心。 你必須跳過幾個圈才能讓你的 PWA 在那裡，但這當然是可能的。 截至目前，Apple 沒有關於這是否會在 iOS App Store 上實現的信息。

PWA 是可靠的

我們都曾嘗試在不穩定的移動連接上使用網站或 Web 應用程序。 這不好玩。

再次感謝服務人員，他們專門定義了瀏覽器應該在本地緩存的內容——即使用戶連接不佳，也可以構建 PWA 以提供快速、完整的體驗。

這也可以更進一步。 通過“預緩存”，即在第一次訪問時下載並存儲整個應用程序，PWA 也可以完全離線運行！

這一點非常重要，考慮到有多少人仍然生活在農村和服務差的地區，以及未來幾年首次上網的大約十億人——其中許多人將無法享受完美的連接。

PWA 安全、高效且適應性強

為了讓服務人員做他們的事情，您的網站必須使用 HTTPS 完全安全。

希望它已經做到了，但如果不構建 PWA 將迫使您完成所有必要的工作，以使您的網站 100% 安全。

PWA 也非常有效。 阻止人們下載本地移動應用程序的一個關鍵因素是他們設備上的可用存儲空間。 正如 The PWA Book 的作者所說：

“他們將他們的移動設備，如相機、電腦、記事本、助手，以及——最重要的——視為記憶的寶庫。 如果下載一個應用程序意味著他們必須犧牲珍貴的照片或信息，他們會三思而後行，然後點擊是。”

PWA 不會強迫人們做出如此艱難的決定。 它們比原生應用程序輕得多，安裝過程中的摩擦更小（只需輕按一個按鈕，就會在主屏幕上創建一個快捷方式）。 PWA 確實在設備上佔用了一點空間，但相比之下可以忽略不計。

推動這種效率的服務工作者還負責減少服務器負載，並將在緊張時期性能低迷和崩潰的風險降至最低。

漸進式 Web 應用程序的適應性也很強。 由於它們基於 Web，因此它們可以比原生移動應用程序更容易地維護和更新。

當您想要更改或更新某些內容時，您可以快速移動，無需與 App Store 看門人打交道，無需用戶手動更新，或與專業的原生應用程序開發人員簽約。

就像今天更新您的網站一樣簡單 - 更新（部署到服務器）幾乎可以立即提供給用戶。

PWA 讓您通過推送通知吸引用戶

多年來，我們一直在談論推送通知的強大功能。 它們是在移動設備上與觀眾互動和交流的最佳方式——沒有之一。 您可以使用它們來更新用戶，將他們推回應用程序，宣傳優惠和產品，並且通常在他們忙碌的生活中保持首要地位。

以下是不同企業如何使用推送通知的一些示例：

• 新聞出版商

“突發新聞，X 和 Y 剛剛發生！”

推送通知非常適合數字出版商，讓他們能夠將流量吸引回他們的頭條新聞，並通過時間敏感的突發新聞提醒用戶。

• 電子商務商店

“特價/您放棄購物車/您的物品已發貨”

Push 非常適合電子商務。 購物應用程序會定期發送通知以提醒用戶注意優惠和新產品，讓他們及時了解交付流程，並提供特殊的僅限應用程序的優惠券代碼。

• 社交平台和社區

“你的朋友剛剛給你發了一條消息/好友請求/回復了你”

我們之前可能都經歷過來自社交平台的推送消息。 它們是社交應用程序用來讓您回到他們的平台、與其他用戶互動和互動的秘密成分。

這些是一些用例。 但真正的推送通知對於任何企業來說都是一個巨大的推動力。 它們曾經是（現在仍然是）構建原生應用程序的最強有力的理由之一。

再次感謝我們的服務人員朋友——您不再需要本機應用程序來發送推送通知。 你可以從你的網站發送它們（如果你把它變成 PWA）。

推送通知需要正確使用而不是濫用，但它們可以帶來很多好處，是構建 PWA 的一大好處。

例如，在構建 PWA 後，蘭蔻發現 8% 的消費者點擊推送通知進行購買，並通過推送通知將回收的購物車的轉化率提高了 12%。

另一家是沙特阿拉伯領先的電子產品零售商 eXtra Electronics。 eXtra 從通過網絡推送到達的用戶那裡獲得的銷售額增加了 100%，並註意到選擇推送通知的用戶返回的頻率增加了 4 倍，並且在網站上花費的時間增加了 2 倍。 首席業務發展官 Mujeed Hazzaa 表示：

“推送通知是我們移動參與策略的重要組成部分。 這是與我們的客戶溝通的一種更加個性化的方式。 這對我們的底線非常有價值。”

當您將您的網站變成一個漸進式網絡應用程序時，您也可以獲得強大的業務成果。 有一個很大的警告 - 您只能在 Android 上使用它們。 iOS 不支持它們，任何人都可以猜測它是否會支持。 如果推送通知對您很重要並且您想將它們發送給所有用戶，那麼您將必須構建本地移動應用程序。

漸進式 Web 應用程序將發展您的業務

我們已經了解了將您的網站轉變為漸進式網絡應用程序的一些最重要的好處。

最重要的是，它們對任何有網站的企業都是有意義的。 它們允許您升級整個 Web UX，並提供快速、現代的體驗，幾乎可以保證改善關鍵指標。

構建 PWA 的缺點是什麼？

真的沒有，除了你需要投入的時間和金錢來建造一個。 即便如此，PWA 還是相對負擔得起的，並且隨著時間的推移很可能（超過）為自己付費——特別是如果您的網站通過廣告、電子商務或會員資格與任何類型的收入掛鉤。

還需要說服力嗎？

讓我們通過一些示例將所有內容聯繫在一起。 我們將重點介紹互聯網上 50 個最好的漸進式 Web 應用程序示例，並直接向您展示我們迄今為止一直在討論的內容。

Progressive Web App 示例：2020 年互聯網上 50 個最佳 PWA

如果你想開發一個令人印象深刻的 PWA，第一步是查看成功的漸進式 Web 應用程序示例以獲取靈感。

作為我們激勵您的使命的一部分，我們現在收集了 50 個最佳 PWA 的模型示例。 您可以跳到與您自己的業務最相關的部分，瀏覽列表直到有東西引起您的注意，或者通讀所有漸進式 Web 應用程序示例以獲得良好的概覽！

讓我們進入我們的 50 個最佳 PWA 示例。

電子商務和零售

星巴克

作為世界上最受歡迎的咖啡連鎖店之一，星巴克開發了 PWA，通過提供忠誠度計劃和更簡單的訂購流程來提高客戶參與度。

該應用程序旨在取代其舊的移動應用程序，以更好地保持其參與度，無論使用何種設備。

用戶可以首先查看其獎勵部分，客戶可以在通過智能手機訂購時兌換他們的免費食物和飲料、生日禮物、補充和支付選項。

應用程序頁面的其餘部分提供自定義訂單、商店可用性、交付詳細信息和應用程序菜單。

就像從咖啡師那裡訂購一樣，訂購您最喜歡的飲料可以讓您自定義其大小、加載項和拍攝選項。 星巴克還為那些監測飲食的人增加了營養信息、成分和過敏原部分。

我們喜歡這個電子商務 PWA 的地方：

• 即使在網絡連接較弱的情況下也能正常工作
• 與 Spotify、Lyft 和 Ford 等其他品牌的其他平台和服務完全集成
• 無縫的移動支付和結賬流程
• 極其人性化的設計

朱米亞

阿里巴巴之於中國，Jumia 之於非洲。 這個成功的在線市場於 2012 年在尼日利亞首次推出，然後迅速接管了非洲的電子商務行業。

2016 年，它推出了 PWA，以應對撒哈拉以南地區不穩定的互聯網連接。 借助 PWA，它能夠依靠具有數據上限的 2G 網絡佔據很大一部分市場。

引入 PWA 是在不消耗大量數據帶寬的情況下提供類似應用程序的用戶體驗的完美解決方案。

結果？ 據谷歌稱，該公司的轉化率提高了 33%，用戶增長了 12 倍（與原生應用相比）。 此外，它還大大降低了跳出率和用戶設備存儲需求。

我們喜歡這個電子商務 PWA 的地方：

• 可靠的離線訪問
• 快速搜索能力
• 快速加載過程
• 簡易安裝

OLX.in

對於在線市場的 PWA，請相信印度分類廣告公司 OLX.in。 憑藉其從房地產到時尚的強大類別，賣家和買家與公司的 PWA 更匹配。

用戶在搜索特定產品或從賣家那裡獲得超值優惠時，可以很容易地註意到該應用程序的易用性。

OLX 透露，自 Google 報告的過渡到 PWA 以來，它的廣告點擊率更高，跳出率大幅下降了 80%。

我們喜歡這個電子商務 PWA 的地方：

• 即使在離線模式下也可以推送通知
• 為賣家打造的簡易相機集成功能
• 搜索歷史功能

Flipkart

印度電子商務領域的另一個競爭對手是 Flipkart 繼續通過其 PWA 重新定義在線購物體驗。

當用戶向下滾動瀏覽應用程序時，會顯示產品類別、有限優惠、暢銷書和折扣，目的是吸引客戶瀏覽並在應用程序上花費更多時間。

Flipkart 的 PWA 於 2015 年通過 Flipkart Lite 開始。 即使大多數地區的互聯網連接斷斷續續，該公司也希望讓印度人更容易購物。

我們喜歡這個電子商務 PWA 的地方：

• 最新消息和更新的推送通知是一致的
• 簡化在線購買流程
• 搜索能力準確

純公式

意識到保健品市場比以往任何時候都更具競爭力，美國的 Pure Formulas 在推出自己的 PWA 時被認為是該行業的先驅。

在發現其網站和移動應用程序由於結帳過程緩慢而遭受非常高的跳出率後，該公司開發了一個 PWA，使他們徹底扭轉了局面。

它報告了更高的轉化率和平均訂單價值（AOV）的增加。

我們喜歡這個電子商務 PWA 的地方：

• 非常方便的結帳流程
• 極簡設計
• 非常輕的設備存儲要求
• 高度安全的交易

速賣通

憑藉高度響應的 PWA，速賣通被認為是當今 B2C 交易中最受歡迎的應用程序之一。

由於公司產品類別的廣泛覆蓋，用戶可以瀏覽數以千計的選項，而不會使用 PWA 減慢頁面加載速度。

自推出以來，全球速賣通宣布，由於其 PWA，它經歷了更好的重新參與和轉換統計。

我們喜歡這個電子商務 PWA 的地方：

• 輕鬆的產品導航
• 更快的加載時間
• 用戶友好的佈局

阿里巴巴

談到阿里巴巴 PWA 的成功，馬雲的阿里巴巴集團無需再多介紹。 B2B 電子商務應用程序是任何 PWA 的理想模型：快速、響應迅速、輕巧且非常吸引人。

阿里巴巴在其移動網絡和移動應用程序發布方面取得了成功。 然而，它需要通過提高參與度來壟斷很大一部分市場。 該公司的 PWA 是解決此問題的完美解決方案。

據谷歌稱，它報告的總轉化次數增加了 76%。

我們喜歡這個電子商務 PWA 的地方：

• 輕鬆的產品導航
• 與網站的工具（如 Feed、Messenger 和我的阿里巴巴帳戶）集成
• 更快的加載時間

目標

為了不被競爭對手超越，美國第八大零售連鎖店 Target 迅速對其客戶分析研究採取了行動。 2015 年，它發現其客戶在他們的移動設備上開始他們的旅程，然後使用他們的計算機進行購買。

管理層考慮引入 PWA，從那時起，其應用程序用戶數量大幅增加，在線交易顯著改善，而不會疏遠不同設備上的用戶。

我們喜歡這個電子商務 PWA 的地方：

• 輕鬆添加到購物車選項
• 快速加載圖像，無論大小

沃爾瑪

對於無縫的應用體驗，沃爾瑪的 PWA 正好滿足了應用開發者的長長清單。 憑藉數千種產品，這家零售巨頭能夠為每筆交易整合在線購買和取貨/送貨選擇。

它的地理跟踪功能可以監控用戶所在區域的暢銷商品，這使該應用程序能夠根據此類列表提供推薦。

最後，它對推送通知的有效使用使公司能夠讓其忠實的粉絲群了解超值優惠和新發現。

我們喜歡這個電子商務 PWA 的地方：

• 反饋部分
• 地理追踪功能
• 反應靈敏的界面
• 不穩定網絡上的無縫性能

梅西百貨

高端零售品牌 Macy's 在推出 PWA 時有一個目標：為每月數百萬的訪客提供最佳體驗。

認識到其應用程序用戶的增長，該公司的 PWA 是對其消費者工具的一個受歡迎的補充，可以讓其購物者隨時了解商店貨架上的新產品。

我們喜歡這個電子商務 PWA 的地方：

• 可靠的商店查找工具
• 有組織的產品佈局

蘭蔻

法國奢侈化妝品品牌蘭蔻在其在線銷售中遇到了障礙：移動用戶增加，但轉化率下滑。

為了理解這個問題，該公司調查了客戶的行為，發現他們在移動應用上的用戶體驗很糟糕。

該品牌改用 PWA 以減少加載時間並使應用程序易於訪問。 據谷歌稱，推送通知貢獻了 12% 的轉化率，移動會話數飆升至 51%。

我們喜歡這個電子商務 PWA 的地方：

• 快速搜索結果
• 輕鬆導航

消息

金融時報

The Financial Times PWA is considered as one of the best PWAs in the news industry. Covering business and global markets, the app takes a similar look and feel of the paper with its traditional salmon-colored background.

The publication is one of the first news sites to abandon its native app and transition to a PWA. It works well even on slow networks, making news easily accessible for business people on the go.

What we like about this News Publisher PWA:

• Reliable offline
• Very fast loading time
• Real-time updates on content
• Seamless video content experience

Infobae

This Buenos Aires-based news website has proven to be successful in the PWA scene thanks to its Spanish readers. According to Google, the Latin American audience contributed to three times more page views compared to its old mobile site, and spent more sessions on the app as well.

Infobae switched from its mobile site to PWA in 2017 to improve the speed of access among its mobile users. This was influenced by the huge drop in session duration (3 minutes on mobile compared to 27 minutes on desktop).

What we like about this news publisher PWA:

• Very fast loading time
• High-quality visuals loading seamlessly
• Easy navigation

Nau.ch

One of Switzerland's leading news websites became extremely popular when it began flashing content in public areas such as terminals and petrol stations.

Nau (an abbreviation for “new”) was founded in 2007 with the goal of prominently displaying news in public transport to reach millions of commuters on their daily route.

To improve its reach, the company launched its PWA and has achieved 400 times more installations than its old mobile site in the first two days.

What we like about this news publisher PWA:

• Impressive user interface
• Easy navigation
• Content loads much faster relative to other news-related PWAs

Nikkei

Regarded as the world's largest financial newspaper (more than 3 million in daily circulation), Nikkei launched its PWA in 2017 with the goal of reducing load time, improve reader interaction and boost engagement.

Realizing that their website was not mobile-friendly (even taking more than 20 seconds to be fully interactive), the company assembled a team of five front-end engineers who worked on launching a PWA.

The result was truly impressive: improved loading speed, higher interactivity as well as better user experience with offline support according to Google.

What we like about this news publisher PWA:

• Prefetch feature (instant page navigation)
• Preloaded key requests
• Optimized JavaScript bundles
• Optimized images
• Enabled HTTP caching

The Washington Post

As a global authoritative news organization, The Washington Post has released one of the most responsive PWAs to reach out to a wider audience on mobile.

Launched in March 2016, the paper's goal is to provide “frictionless, uninterrupted reading.” This comes after its readers expressed their concerns over slow load times on its old mobile app.

With more than 1,000 articles published daily, they have announced that an 88% improvement in load times was initially observed. This has contributed to an increase in retention rate and longer readership according to Google.

What we like about this news publisher PWA:

• Fast loading time
• Real-time live updates
• Same look and feel as the website

中等的

With social journalism becoming a necessity for readers and publishers alike, Medium has made a mark in the online publishing industry with its 120 million readers.

Medium's initial goal in 2012 was to reinvent the blogging platform through small stories that matter to any type of audience.

Now that it has grown into subscription-based service, its loyal users can follow exclusive content and audio narrations through its PWA even when working offline.

What we like about this news publisher PWA:

• 響應式
• Seamless functionality even on an unstable connection

Wired

When tech publisher Wired launched its PWA in 2017, its main objective was to increase its app's page speed and reach out to its 11 million users.

And true enough, it did. Not only did it result in higher readership but also more impressions per session, leading other Conde Nast publications to follow suit through what its chief of technology refers to as Alien Web Apps (AWA).

What we like about this news publisher PWA:

• Fast loading time
• Highly responsive
• Reliable background caching

Forbes

With almost a 50% lift in sessions, triple the rise in scroll depth and 100% boost in engagements according to Google, Forbes has definitely reaped the benefits of launching its fully functional PWA in 2017.

Its Chief Product Officer, Lewis Dvorkin, wanted a no-friction experience for its users to have content served to their devices the way they want.

In addition, Dvorkin states that the more people stay longer on their app, the more they view ads, thanks to increased personalization that yields better engagement.

What we like about this news publisher PWA:

• Stunning visual content
• 快速加載時間
• Unique number of readers infographic

The Guardian

To make its online content more accessible, UK's leading news and media outlet, The Guardian, launched its PWA in 2017.

The app features high-quality images, interactive multimedia, and thousands of new content without compromising loading time and user experience.

The company also created a US-based innovation team called The Guardian Mobile Innovation Lab, which operated from 2015 to 2018, which explored mobile tools and chat apps to improve user experience.

What we like about this news publisher PWA:

• Customizable sections
• News alert feature
• 離線訪問

Sports Mole

Sports fans – football, F1, tennis, rugby, cricket, golf and even snooker – are able to enjoy Sports Mole's website features right in their own devices through the site's PWA.

Video clips, real-time scores and game schedules are just some of the exciting features in the PWA.

The result of this move led to higher readership rate and increased session time on the app.

What we like about this news publisher PWA:

• 搜索功能
• Seamless video playback
• 實時更新
• No lag on page transitions

The Weather Channel

Since the 1980s, The Weather Channel has been a trusted companion by travelers and households when it comes to providing an average of 40 billion daily weather forecasts.

While its previous native app was used by half of its total users through mobile web, the company found out that there are still users who don't enjoy reliable connections or are not equipped with advanced smartphones.

Through its PWA, The Weather Channel is able to cater to millions of its global users in 62 languages. Google reports that it has improved its page load time by 80% through the app.

What we like about this news publisher PWA:

• 搜索功能
• Multiple language availability
• 推送通知

MyNet

Offering a wide range of content from news to sports, travel to education, and weather to finance, MyNet is one of Turkey's largest web portals.

Its old mobile site was plagued with complaints, most especially very slow loading speed. This led the company to develop a PWA to deliver fast and a highly engaging website.

Google reports that introducing PWA to MyNet's readers influenced a 15% rise in average views per session and a 23% drop in bounce rate.

What we like about this news publisher PWA:

• 實時更新
• 搜索功能

目錄

科帕

Kopa 以前稱為 PadPiper，是一個提供家具齊全的公寓和租房者的市場。 它為租房者和出租房東提供驗證，因此匹配他們更加安全。

PadPiper 最初推出 PWA 是為了幫助學生在學年或開始實習後找到合適的住房。 它還考慮利用這個機會聯繫學生並找出誰在他們附近工作，以便更輕鬆地匹配室友。

我們喜歡這個目錄 PWA 的地方：

• 快速搜索結果
• 出租託管功能
• 極簡設計

倫蒂奧

這個相機和家用電器租賃市場是臨時需要此類物品的人的解決方案。

用戶在線下訂單並等待商品在同一天發貨。 租期結束後，用戶要么必須退回物品，要么選擇購買。

Rentio 的 PWA（日語或英語）提供易於導航的界面、快速的搜索結果、大量的類別和快速的響應時間。

我們喜歡這個目錄 PWA 的地方：

• 搜索功能
• 快速交易流程
• 方便的導航

喬皮

作為一個開發者招聘平台，Joppy 迎合了尋找人才的公司和一些技術工作機會的最佳申請人。

該平台專注於將申請人的偏好與招聘人員設定的要求相匹配。 但與其他在線工作委員會不同，求職者可以將他們的個人資料設置為匿名，這樣就沒有人可以用不請自來的建議來打擾他們。

Joppy 的 PWA 顯然是為招聘人員和申請人（主要在巴塞羅那）設計的，以使申請過程更加簡化。

我們喜歡這個目錄 PWA 的地方：

• 快速響應時間
• 快速匹配過程

OpenRent

如果沒有合適的在線工具，尋找英國租賃房地產市場可能會令人頭疼。 借助 OpenRent 的 PWA，租戶和房東可以方便地搜索合適的房產。

PWA 提供快速響應和實時更新。 這對於該網站至關重要，因為 OpenRent 會在列表被允許後立即刪除它們，以避免讓潛在租戶感到沮喪的幽靈廣告。

我們喜歡這個目錄 PWA 的地方：

• 結果過濾功能
• 輕鬆添加屬性
• 快速響應時間

汽車銷售

對於 PWA 上的在線汽車市場，Carsales 是澳大利亞購車者最受歡迎的目的地之一，為其用戶提供了很多便利。

買家可以根據車身類型、品牌、價格、特價搜索汽車。 另一方面，賣家可以要求對他們的汽車進行評估，其餘的由 Carsales 負責。

PWA 還通過有關汽車保養的評論、建議和建議提供專家提示。

我們喜歡這個目錄 PWA 的地方：

• 出色的移動優先體驗
• 響應任何屏幕尺寸
• 輕鬆的離線體驗

卡里加米

Carigami 是一家連接供應商和租車人的法國汽車零售經紀人。 PWA 根據用戶對城市、駕駛員年齡、日期和時間的搜索偏好，提供可靠的汽車價格比較。

該應用程序會在幾秒鐘內返回搜索結果，其中包含每輛汽車租賃的所有詳細信息。

我們喜歡這個目錄 PWA 的地方：

• 快速加載時間
• 準確的搜索結果
• 搜索過濾器

閃耀

Shine 是印度第二大求職門戶網站，成立於 2008 年。它為各行各業的 15,000 多家公司匹配候選人。

它的 PWA 是最好的工作匹配網站之一。 例如，可以根據技能、職務、部門、行業、位置和教育輕鬆過濾搜索特定工作。

工作提醒也可以無縫傳送到用戶的設備。

我們喜歡這個目錄 PWA 的地方：

• 推送通知
• 完全無障礙
• 自定義離線頁面

社會或社區

火種

當 Tinder 擾亂約會場景市場時，許多用戶開始愛上這款應用程序，因為它採用了創新的婚介方式。

2017年，公司經過三個月的開發，投資了自己的PWA。 立即觀察到好處。 首先，它能夠將其數據投資從其原生應用程序上的 30 MB 減少到 PWA 上的僅 2.8 MB。

它還報告了更快的頁面加載和用戶更好的參與度（在刷卡、消息傳遞、購買和消費會話方面）。

我們喜歡這個社交 PWA 的地方：

• 推送通知
• 便於使用
• 優化的性能（基於路由的代碼拆分）

Pinterest

三個月來，流行的圖像共享和社交媒體平台 Pinterest 建立了 PWA，以擴大其國際用戶群。 根據 Google 的說法，與它的 650 KB 的舊移動網站相比，PWA 的 150 KB 大小足以給用戶留下深刻印象。

Pinterest 訂閱者現在只需等待 5.6 秒即可使用 UI，而之前的移動應用需要 23 秒。

過渡到 PWA 的早期結果很有希望：在應用上花費的時間增加了 40% 以上，用戶生成的廣告增加了 44%，廣告點擊量增加了 50%，核心參與度增加了 60%。

我們喜歡這個社交 PWA 的地方：

• 推送通知
• 低帶寬使用
• 令人印象深刻的離線支持

電報

Telegram 在 2013 年通過提供與不同設備兼容的基於雲的工具，顛覆了即時通訊服務。

在撰寫本文時，每月有超過 4 億活躍用戶依靠這種跨平台的安全服務來交換短信、照片、視頻和音頻文件。

當其 PWA 推出以提供與其原生移動應用程序相同的功能（但尺寸更小）時，該公司報告稱每位用戶的會話數和保留時間增加了 50%。

我們喜歡這個社交 PWA 的地方：

• 可在 iOS 和 Android 上安裝
• 離線支持
• 顯現

推特

最早推出的 PWA 之一是 Twitter 早在 2017 年推出的 Twitter Lite PWA。應用程序開發人員後來將其用作將 Web 和原生應用程序功能集成到更理想的移動應用程序中的模型。

據谷歌稱，PWA 的目標是提高其 250,000 名每日用戶的重新參與度，這些用戶平均每天檢查四次帳戶。

通過降低數據消耗、改善即時加載（在 3G 網絡上 5 秒）和提高用戶參與度，該公司報告稱每個會話的頁面瀏覽量增加了 65%，發送的推文增加了 75%，跳出率下降了 20% .

我們喜歡這個社交 PWA 的地方：

• 瀏覽器優化（基於路由的代碼拆分）
• 更少的帶寬使用
• 快速更新

Instagram

Instagram 遵循 Twitter 的策略，即在後者的應用程序發布後立即提供 PWA。 2020 年初，Instagram 還更新了其 Windows 10 應用程序，使其成為帶有直接消息傳遞功能的 PWA。

雖然其原生應用程序仍在銷售，但設備移動瀏覽器上的網站呈現相同的功能和用戶體驗。 用戶可以從桌面和移動應用程序中獲得他們長期以來喜歡的相同功能。

我們喜歡這個社交 PWA 的地方：

• 推送通知
• 即時加載時間
• 反應快

旅行和預訂

愛彼迎

Airbnb 是一個在線平台，為世界各地的租房和旅遊體驗提供便捷的安排。 2008 年，該公司開始將希望租用額外房間的房主與尋找負擔得起的住宿的旅行者聯繫起來。

十年後，PWA 升級為在 Windows 10 移動版上與 Edge 配合使用。 結果是為客戶提供了更加無縫的即時頁面轉換。 迄今為止，Airbnb 每月有超過 8000 萬訪問者，其中大部分訪問者在其應用程序上。

我們喜歡這個 PWA 的地方：

• 推送通知
• 反應快
• 幾秒鐘內加載的高質量圖像

特雷布

在線預訂行業的另一個領導者是酒店預訂平台Treebo。 在印度超過 165 個城市提供住宿選擇，用戶可以比較最優惠的選擇。

據谷歌稱，其 PWA 在 3G 網絡上只需四秒鐘即可加載。 該網站還報告說，它的點擊次數增加了五倍，轉化率提高了三倍。

我們喜歡這個 PWA 的地方：

• 服務器端渲染
• 快速互動
• 漸進式渲染（HTML 流）

我們去

作為亞太地區和中東地區最大的旅遊相關網站，Wego 在設計 PWA 時考慮了消費者的行為。

由於大多數旅行者依靠手機保存照片，存儲空間很容易用完。 此外，到不同的地方旅行可能會因互聯網連接緩慢和不穩定而令人沮喪。

為了讓用戶能夠方便地預訂酒店房間和航班，建立了 PWA。 據谷歌稱，Wego 宣布已將其頁面加載時間從 12 秒減少到不到 3 秒。

我們喜歡這個 PWA 的地方：

• 極快的響應
• 極簡設計
• 準確的搜索結果
• 輕的

MakeMyTrip

作為印度領先的在線旅行社之一，MakeMyTrip 加入了 PWA 的行列，以更好地迎合其每月 800 萬訪問者的需求。

在其原生應用程序取得成功後，該公司發現該國的有限連接以及劣質智能手機的數據上限可能會使用戶訪問非常沮喪。

此外，它注意到訪問者在他們的網站上花費的時間比在他們的本地應用程序上花費的時間更多。 因此，複製相同的體驗對於手機用戶來說至關重要。

根據谷歌的數據，結果是客戶會話增加了 160%，跳出率下降了 20%。 此外，首次購物者的轉化率可能是之前使用原生應用的消費者的三倍。

我們喜歡這個 PWA 的地方：

• 輕鬆導航
• 可安裝在任何操作系統上
• 快速加載時間

Travelstart

利用其在線市場的成功，Jumia 通過 Jumia Travel 進軍旅遊行業。 據谷歌稱，其 PWA 有助於將流量增加 12 倍，將轉化率提高 33%。

隨後，Jumia Travel 於 2019 年被 Travelstart 收購，以創建旅遊業最大的平台之一。 Jumia Travel 的移動用戶即使在 PWA 上也被重定向到 Travelstart，他們可以在其中預訂航班、酒店住宿和汽車租賃。

我們喜歡這個 PWA 的地方：

• 快速加載時間
• 簡單的界面

特里瓦戈

為了每月接待 1.2 億遊客，德國科技公司 Trivago 推出了 PWA，以幫助更多用戶在旅行前搜索和比較酒店價格。

該應用程序覆蓋近 200 個預訂網站，在生成價格比較方面運行迅速。 用戶還可以方便地使用 Trivago 地圖、真實的酒店評論和參考以前的搜索，以節省時間和帶寬。

根據 Google 的報告，來自 55 個國家/地區的超過 50 萬用戶將 PWA 添加到他們的主屏幕，這導致酒店交易的參與度增加了 150%，點擊率增加了 97%。

我們喜歡這個 PWA 的地方：

• 可安裝在 Android 和 iOS 上
• 出色的離線支持
• 反應快
• 搜索過濾器
• 多語言支持

優步

Uber 的 PWA 是當今設計最獨特的應用程序之一。 這家叫車公司於 2018 年將其 Window 10 應用程序置於幕後，以支持於 2019 年 7 月首次推出的 PWA。

與其原生移動應用相比，Uber 的 PWA 僅佔用 50 KB 的存儲空間。 它加載速度非常快，當您被困在網絡較弱的區域時，它非常方便。

根據一個人的位置，優步提供叫車服務、送餐、自行車和踏板車租賃，以及在一個人的移動設備上點擊的空中拼車服務。

我們喜歡這個 PWA 的地方：

• 快速加載時間
• 離線支持
• 輕的
• 極快的預訂流程

來福車

優步的競爭對手 Lyft 成立於 2012 年，已擴大其在美國和加拿大的乘客和司機基礎。

該公司提供更便宜的價格（就常客的訂閱計劃而言），佔據了曾經由優步主導的巨大市場份額。 它於 2016 年推出了 PWA

對於新用戶，PWA 提供了一個簡單的註冊流程以及預訂服務，這是其原生應用程序的知名之處。

我們喜歡這個 PWA 的地方：

• 快速響應時間
• 可靠的實時更新

塔賈瓦爾

作為阿聯酋非常受歡迎的航班和酒店預訂應用程序，Tajawal 提供完整的解決方案，為旅客訪問 450 多家航空公司和數千家酒店。

PWA 運行速度非常快，並通過簡化的流程提供簡單的預訂解決方案。 界面簡單明了，主要關注預訂。

我們喜歡這個 PWA 的地方：

• 頁面加載速度非常快
• 擔保交易

飛行週末

這家獨特的旅行預訂公司於 2017 年在阿姆斯特丹成立。 目標是為用戶提供僅限週末的旅行路線，以便他們可以搭乘飛機並根據系統的推薦體驗兩天的靜修。

FlyWeeked 用戶只需輸入他們當前的位置並選擇他們想要休息的周末。 然後，系統會提供一個可點擊城市列表，如果用戶不感興趣，可以選擇“滑動”或預訂行程。

PWA 易於使用，獨特的概念保證了更高的參與度。

我們喜歡這個 PWA 的地方：

• 快速響應時間
• 快速頁面加載

酷表弟

當與您有共同興趣的當地人可以在您的旅行中指導您時，訪問外國會變得更加令人興奮。 借助 Cool Cousin，遊客可以在其易於使用的平台上選擇值得信賴的當地城市指南。

所謂的“堂兄弟”從外科醫生到音樂家，但都對接待家鄉的遊客有著相同的熱情。

其 PWA 於 2018 年推出，旨在為用戶提供更快、更流暢的訪問體驗。 在官方更新中，該公司宣布該應用程序已將加載時間減少了 25%，並減少了用戶對其他在線資源的訪問。

我們喜歡這個 PWA 的地方：

• 快速響應時間
• 輕鬆導航

娛樂

音片

Soundslice 是一款將樂譜與真實音頻同步的應用程序，現在學習如何彈奏吉他、鋼琴、薩克斯或班卓琴變得更加容易。

Soundslice 的 PWA 非常適合使用移動設備進行自學課程。 它允許用戶更改音高、循環部分和標記音樂。 另一方面，音樂教師可以使用該工具開發互動課程。

樣本“片段”讓用戶可以在樂譜上播放帶有移動垂直線引導的音頻。

我們喜歡這個 PWA 的地方：

• 交互設計
• 快速加載時間

Spotify

對於數字音樂流媒體服務 Spotify 來說，通過 PWA 來利用輕量級應用是追求更多訂閱者的必要條件。

Spotify 的桌面和移動應用程序在 PWA 中進行了複製，即使在離線收聽時也為聽眾提供同樣的便利。 PWA 加載速度要快得多，而且背景顏色會適應專輯流派，以獲得更個性化的觸感。

我們喜歡這個 PWA 的地方：

• 自適應用戶界面
• 離線支持
• 交互設計

1調諧器

與流行的看法相反，廣播並沒有死。 使用 1Tuner，任何用戶都可以收聽廣播電台（世界任何地方）和播客。

他們甚至可以創建播放列表，這樣他們就不會錯過收聽來自巴西的廣播或倫敦當地電台播放的熱門曲目。

PWA 也可以完美運行。 選擇特定廣播電台可讓您實時收聽廣播。 另一方面，播客以卓越的音頻質量提供。

我們喜歡這個 PWA 的地方：

• 可定制的主題
• 海量內容推薦

9GAG

自 9GAG 推出以來，在線幽默從未如此。 隨著世界各地用戶共享的互聯網模因、視頻和圖像，該網站已成為娛樂來源。

然而，它很快意識到其舊的原生應用需要更長的時間來加載，尤其是當熱門內容涉及大量視頻時。

9GAG 切換到 PWA 以降低頁面加載速度並鼓勵更好的用戶參與度。 該網站透露，其用戶在該應用上停留的時間比其原生應用多 25%。

我們喜歡這個 PWA 的地方：

• 可安裝在 Android 和 iOS 上
• 離線支持
• 快速加載時間

樂透.de

此 PWA 上最新歐洲樂透結果的整理實時信息為玩家提供了方便的資源。

PWA 加載速度非常快，並且在低端設備和互聯網連接不佳的情況下運行良好。 對於任何迫不及待想知道最新結果的樂透玩家來說，這個 PWA 是一個方便的伴侶。

我們喜歡這個 PWA 的地方：

• 流暢的用戶體驗
• 德語和英語的可用性

總結 50 個最佳 PWA 示例

希望這些漸進式 Web 應用程序示例突出了我們在本指南中提出的一些要點。

這些品牌投資於他們的移動用戶體驗，並從中獲益。 您可以而且應該追隨他們的腳步，為您自己的業務使用令人印象深刻的漸進式網絡應用程序“移動優先”。 我們會告訴你怎麼做，但首先我們要回答一個關鍵問題——“原生應用呢？”

也許您正在玩弄自己構建 iOS 和 Android 應用程序的想法，而您卻偏心於查看 PWA。 也許您對在 App Store 上發布並不那麼大驚小怪，只是想要一個更好的網站。

無論哪種方式——我們將簡要介紹“原生 vs PWA”的爭論，並解釋為什麼我們認為 PWA 是最低限度的，而 PWA + 原生應用程序是最優的。

您應該構建什麼樣的應用程序？ 漸進式 Web 應用程序與原生應用程序

有一種想法是漸進式網絡應用程序和原生應用程序是競爭對手。 PWA 將使原生應用程序變得無關緊要和不必要。 企業將在構建 PWA 和原生應用程序之間做出選擇，並始終選擇後者。

這種敘述是錯誤的，並將原生應用程序與 PWA 呈現為非此即彼的選擇，這是一種錯誤的二分法。 事實上，PWA 和原生應用程序是一個絕妙的組合，並且可以協同工作。 它們覆蓋彼此的基礎，並確保您為每個人提供最佳的用戶體驗，無論渠道如何。

PWA 受益於網絡的覆蓋範圍、可發現性和無處不在。 他們吸引自然流量，並以快速流暢的體驗給首次訪問者留下深刻印象，說服他們在您的網站上花費更多時間（和金錢）。 它們提供了一個簡單的安裝選項，可以減少摩擦和看門人，甚至可以吸引那些擔心設備存儲空間有限的人。

它們提供了與新訪問者建立聯繫的完美方式，以及那些參與度足以返回但不足以下載您的本地應用程序的人，無論出於何種原因。 PWA 是通過您的渠道培養人才的完美方式。

另一方面，與 PWA 相比，原生應用的覆蓋範圍和可見性較差。 它們位於 App Store 的“圍牆花園”後面，需要用戶做出更高級別的承諾才能安裝和下載它們。 另一方面，它們更符合現有的用戶習慣，允許您向 iOS 用戶發送推送通知，並且可以讓您在 App Store 上提升品牌知名度/影響力。

原生應用非常適合您的核心讀者/客戶/用戶。 應該鼓勵您最忠實的用戶下載您的本地應用程序並訪問它們——甚至在登錄屏幕或付費牆之後——這樣您就可以將它們聚集在一個地方，並真正專注於理解和吸引它們，盡可能地最大化 LTV 和保留率。

原生應用程序是您最大粉絲的絕佳“家”。

谷歌是這樣說的：

“PWA 不必替換原生應用； 他們可以與他們一起工作。 例如，零售商可以使用原生應用吸引更有可能安裝應用的忠實用戶，但使用 PWA 輕鬆接觸新用戶。 然後可以提示與 PWA 交互的用戶在未來下載移動應用程序”

我們的建議——兩者都建！

如果您的預算有限，請選擇 PWA。 如果您有本機應用程序但沒有 PWA，那麼您絕對應該盡快構建一個。 如果您完全致力於構建最佳的移動優先 UX 並能夠投資實現這一目標，那麼構建兩者並讓它們互補彼此的優勢和劣勢。

您可以使用 MobiLoud 獲得出色的原生應用程序，您所需要的只是一個網站或 Web 應用程序。 與我們的團隊聯繫以了解更多信息！

如何構建漸進式 Web 應用程序

本指南的目的是為您提供 PWA 的完整高級概述。 他們開發的複雜性不是我們要討論的內容，但我們將列出您的選擇，以便您自己做出選擇。

網上有很多關於如何在“10 分鐘”內構建 PWA 的內容。 承諾在不到一個小時的時間內將原生應用程序的感覺帶到傳統的 Web 應用程序中，很容易被這些教程所吸引。

它是合法的嗎？

是和不是。 這些 PWA “黑客”也用於滿足絕對最低標準a——HTTPS、Web 清單和服務工作者。 如果您有興趣創建一個非常基本的、功能強大的漸進式 Web 應用程序 - 您可以嘗試 Microsoft 的 PWABuilder。 有了一些修修補補和技術知識，你就可以得到一些體面的東西並運行起來。

為了構建一個獨特、優化且功能豐富的漸進式網絡應用程序——真正發揮其潛力——您需要進行更多投資。 要了解原因，讓我們分解基本步驟。

1. 購買 SSL 證書以通過您的託管服務進行配置
2. 開發應用程序外殼
3. 驗證瀏覽器是否支持服務工作者
4. 註冊服務工作文件
5. 添加推送通知和網絡應用清單
6. 設置安裝提示
7. 測試應用程序的功能
8. 審核基於應用程序的 Lighthouse 清單
9. 修復錯誤
10. 啟動應用程序

聽起來很容易，對吧？

實際上，要做好這一點並構建良好的自定義漸進式 Web 應用程序，需要具有構建複雜 Web 應用程序經驗的前端開發人員。

設置服務工作者和緩存以獲得最佳性能的重要工作很複雜，需要真正的技能。 然後，根據您的要求，您可能還需要了解原生應用程序用戶體驗以及如何在網絡上有效應用的設計師。

除非你是一家相當大的公司，否則你可能不會有一大堆才華橫溢的前端開發人員坐在那裡等你告訴他們該做什麼。 你需要找到他們，僱傭他們，組建一個團隊並管理他們——如果你沒有這些事情的經驗，這是一項艱鉅的任務。 優秀的前端開發人員也總是很受歡迎，他們的合同費率反映了這一點。

構建漸進式 Web 應用程序的成本和時間範圍

那麼這要花多少錢呢？ 嗯，這有點像經典的“一根繩子有多長？”

這完全取決於您要構建的應用程序的複雜性。 根據 PWA Book 的作者：

從頭開始構建 PWA 需要 3400 wh（對於小型應用程序）到 9000 wh（我們已經完成的專門項目）。 這意味著成本在 40 萬美元到 100 萬美元之間。 使用雲平台將至少便宜 75%，上市時間也將縮短 75%（2-3 個月而不是 8-12 個月）。

–第 10 章，PWA 手冊

這似乎很昂貴，但它讓您了解像我們上面看到的那些主要品牌如何投資他們的體驗。

當然，如果您將網站轉換為 PWA，而不是從頭開始構建，那麼在大多數情況下，它會更便宜、更容易。 作為粗略的估計，您正在考慮投資至少 3 個月，以及 20,000 到 50,000 美元以獲得良好的結果。

開發人員遵循不同的項目階段，但在大多數情況下，它涉及七個階段：發現、設計、修訂、初步開發、測試、錯誤修復和最終發布。

如果你的 PWA 更複雜，那麼考慮到必須集成的高級功能，例如 GPS、社交媒體支持和相機訪問，預計它的完成時間會更長。

話雖如此，簡單的 PWA可能需要不到三個月的時間（如果是簡單的，甚至只需要幾週的時間）。 如果您想擁有更高級的功能，例如後端管理面板、可視化模式和其他集成，那麼您仍然可以在不到六個月的時間內擁有您的 PWA。

這似乎是一個相當大的數量，但如果你把它放在上下文中，它就值得了。 它們不僅比原生應用程序更實惠且構建速度更快，而且從長遠來看，速度和改進的用戶體驗可能會超過其自身的回報。

如果您使用 WordPress，有一些更直接的方法可以將您的 WordPress 網站變成 PWA，並且您可以嘗試一些 WordPress PWA 插件。

我們可以幫助您就您的選擇提供建議，如果您的網站適合 - 使用我們的自定義平台在短短 2 週內將其轉換為 PWA，只需標準成本的一小部分。 我們還可以在類似的時間範圍內從您的網站構建原生 iOS 和 Android 應用程序，這樣您就可以覆蓋 2021 年及以後的所有移動基礎！

聯繫我們的一位移動專家進行諮詢以了解更多信息。

它在您的手中 – 立即開始構建漸進式 Web 應用程序！

到目前為止，您應該對漸進式 Web 應用程序的特徵和功能有一個很好的了解。

要了解更多信息，請查看以下資源：

• PWA 書
• Google 在 web.dev 和 Google Developers 上的資源
• PWA Stats（有趣的指標和案例研究）
• Google 的 PWA 路演（精彩視頻系列）
• Mozilla 優秀的 PWA 指南
• Jason Grigsby 的書 Progressive Web Apps
• 今天的網絡可以做什麼？ （展示了網絡技術是如何發展的）
• 是的，那個 web 項目應該是一個 PWA（優秀的指南/文章）
• 我們關於原生、Web 和混合應用程序之間區別的指南

現在輪到你了。 這似乎是一項艱鉅的任務——但您需要將您的網站變成一個進步的網絡應用程序，才能真正擁有令人印象深刻、現代、最佳的網絡形象。

我們保證，當它準備好發佈時，您會很高興。 您的客戶將通過花費更多時間、注意力和金錢與您的業務互動來獎勵您。

正如我們所提到的——PWA 不是原生應用程序的替代品。 PWA 主要是一個更好的網站。 讓用戶在他們的設備上安裝它們可能很困難，因為他們還不習慣，而且您錯過了向 iOS 用戶發送推送通知和在 App Store 上展示品牌的機會。

你也應該構建原生應用程序嗎？

PWA 是必須的，但原生應用程序仍然是終極的移動用戶體驗。 一些人對原生應用的前景持謹慎或消極態度的唯一原因是巨額費用（50,000 美元以上），以及傳統上伴隨它們而來的漫長而費力的開發過程。

如果您也有這些擔憂，但有興趣為您的品牌構建 iOS 和 Android 應用程序，您應該查看我們的平台 News、Canvas for eCommerce 或 Canvas。 無論哪一個最適合您——您可以在短短幾週內將您的網站或 Web 應用程序轉換為高質量的本地應用程序，成本低至 100 美元/平方米。

我們的平台可用於將任何網站轉換為移動應用程序。 您的網站是用什麼構建的並不重要。 MobiLoud 非常適合構建：

• WordPress 應用程序
• 泡泡應用
• Squarespace 應用程序
• 蠟應用
• WooCommerce 應用程序
• 網絡流應用

以及介於兩者之間的任何東西！ 您將在 Android和 iOS 上設置無限推送通知，並且您將擁有在網絡和 App Store 上建立成功的跨平台存在所需的所有功能。

我們還可以通過 PWA 幫助您，因此您將擁有理想的移動組合。 如果這聽起來不錯 - 請立即聯繫並預訂演示。 如果您決定採取另一條路線，那麼祝您旅途愉快。 我們希望您喜歡 PWA 示例並獲得一些靈感來幫助您在移動設備上茁壯成長！