用過這些網頁版應用後，或許你就不想裝它們的客戶端了

本文經過少數派授權轉載，搜索少數派既可以關注

PWA（Progressive Web Apps 的簡稱，譯作漸進式 Web App），是 Google 在 2015 年推出的一個項目（傳送門：Wikipedia），旨在將 Web 網頁服務具備類似原生 Apps 的使用體驗。在 2017 年微軟宣布會在 Windows 10 RS4 大更新中將完整支持 PWA 應用，未來還會在自家的應用商店裡上架更多優質的 PWA 應用。兩大巨頭的「捧場」讓 PWA 技術成為業界比較矚目的焦點。

用戶在手機或者電腦端，均可以使用 Chrome 最新版打開對應網址來使用 PWA 應用。今年 2 月，微軟官方宣布，旗下 Edge 瀏覽器預覽版本也將支持啟用 PWA。

通過這篇 PWA 應用合輯，你可以了解到國內外有哪些具有代表性的 PWA 應用，以及通過哪些渠道可以找到這類實用的應用資源。

註：本文適用於 Android 平台。

▍國內 PWA 應用

國內廠商跟進推出的 PWA 應用數量不算多，新浪微博、餓了么是其中的代表。

新浪微博

目前，新浪微博已經擁有常規版、極速版、國際版的客戶端，原生 Apps 種類繁多，應用內的廣告問題一直為人詬病。去年 12 月，微博推出了 PWA 版本，少數派也曾在 一周 App 派評 中分享了使用體驗。

使用瀏覽器（下文會以 Chrome 為例）打開這個網址，選擇瀏覽器中「添加到主屏幕」的功能。微博 PWA 應用具備了與手機中原生 Android 應用近乎一致的使用體驗，包括沒有瀏覽器框架干擾、支持通知推送、額外設置應用通知的類型、可作為應用卡片出現在多任務管理界面等等。微博 PWA 版應用界面「實在簡潔」，頂部位置保留了個人主頁、關注、熱門以及信息四個入口，關注的時間線里終於沒有了莫名其妙的廣告。

微博 PWA 版本同樣可通過系統應用列表中查看相關版本信息，從圖片來看，目前 PWA 應用屬於 v1.0.0 版本，應用大小僅為 152kB，整個數據佔用的存儲空間為 193kB 左右。

較小的應用安裝空間

餓了么

去年二月，餓了么在其手機站使用了 PWA 技術，CSDN 曾撰文 餓了么的 PWA 升級實踐 解析了其 PWA 技術應用背後的故事。

打開餓了么網址，添加至主屏幕後，應用圖標沒有了常規 App 版本的廣告特色。經過簡短時間的使用後，餓了么 PWA 版有著不錯的載入速度，頁與頁之間載入過程中添加骨架屏之後，使用體驗上有了更加順暢的錯覺。

骨架屏給了更加順暢的錯覺（圖片來源：CSDN）

不過，PWA 版在設置上缺少了部分功能，我的收藏、圖片質量的控制選項、第三方賬號綁定、支付密碼以及小額免密支付這些功能統統沒有。相反與常規 App 比較下，PWA 版本的設置頁面保持了簡潔風格，砍掉了推薦有獎、金幣商城、玩遊戲領紅包、餓了么聯名卡等這類偏廣告的內容。

▍國外 PWA 應用

與國內少數廠商支持 PWA 技術相比，國外已經湧現了大量 PWA 應用，同時出現諸如 Outweb、PWA Directory 等類似的應用商店，收錄和幫助用戶快速找到市面上有哪些好玩使用的 PWA 應用。

Instagram

用戶訪問網址，Instagram PWA 版應用功能和常規版 App 保持了高度一致，PWA 版主界面的按鈕採用了更加清晰的線條和取色。在 PWA 版本上，用戶依然可以順暢使用 Instagram 雙擊點贊、短視頻、快拍、直接拍照上傳平台等功能，Timeline 時間線上沒有出現原生 App 版本的廣告贊助內容。

不過，Instagram PWA 版在使用上還是遇到了一些小問題，比如遇到需多圖滑動操作的時候，未能成功切換下一張。PWA 版也缺失了部分功能，比如將快拍單獨發給好友、豐富的 Instagram 拍照界面（直播、貼紙、文字等）。

PWA 版缺少豐富的 Instagram 拍照界面

Twitter

訪問後，將會安裝名稱為 Twitter Lite 的 PWA 應用。PWA 版除了將界面中的側邊欄移動至 Twitter 賬戶頭像位置，布局也和原生 App 版保持一致，PWA 版提供了主頁、搜索、通知和私信標籤頁功能。

主界面和撰寫推文界面

用戶可下拉手動刷新推文或者根據應用提示有新推文的通知，直接雙擊主頁按鈕查看最新推文。Twitter Lite PWA 版新建推文的界面，提供了文本輸入，支持圖片、GIF 或者投票的發文類型。以我派 @sspai_com 為例，賬戶主頁按照推文、推文和回復、媒體以及喜歡的類型分列四個標籤，用戶還可以對關注賬號進行更細緻的控制。

對關注賬號進行更細緻的控制

Flipboard

訪問添加 PWA 應用。Flipboard PWA 版本整個界面與常規版有不少的差距，作為一款閱讀類應用，無法提供字體大小這類有助於提升閱讀體驗的選項，也沒有保留 Flipboard 官方標誌性的翻頁動畫效果。目前來說，Flipboard PWA 版在保持較小的硬體開銷和簡便的安裝特性外，給我的閱讀體驗只能算是中規中矩。

Flipboard PWA 版中個人主頁和我派訂閱源頁面

Telegram

訪問，添加的 Telegram PWA 應用大小僅有 160kB，初始打開會提示是否開啟通知提醒。作為一款社交聊天工具，Telegram PWA 版完善了最核心的聊天功能，群組聊天中支持文字、內置 Emoji 表情、語音以及上傳截圖文件，同樣也支持頻道消息的圖片、GIF 文件、聲音播放。

初始安裝自動提示需獲取發送通知的許可權

群組消息支持直接播放語音類型、PWA 設置頁面

不過我在使用過程中，碰到一些不方便的地方，比如不支持添加外部中文化文件，導致應用不能切換語言，長按清除消息、置頂或者離開的功能，缺乏 Telegra.ph 鏈接預覽效果。更令我覺得困擾，需要退出 Telegram PWA 應用，竟然需要不斷點按返回鍵返回曾經打開的消息頁面，回到最初頁面之後才能退回手機系統的主界面。

Offline Wikipedia

Offline Wikipedia 作為一款支持離線使用的 PWA 應用，較好地展示 PWA 離線功能的特性。用戶訪問後按提示添加好 Offline Wikipedia 應用。用戶只需輸入需要查找的詞條即可找到維基百科的解釋內容，Offline Wikipedia 支持搜索聯想功能以及離線保存詞條。離線保存的內容會以「Cached articles」的形式顯示在應用主界面。閱讀體驗上，Offline Wikipedia 對較長的詞條內容調整了排版，保留了表格概述和優先顯示標題內容。

離線保存、搜索建議

調整好的內容布局

Offline Wikipedia 目前僅支持顯示英文內容，並未提供維基網頁版切換不同語言的功能，也不支持自定義字體大小、閱讀背景顏色等閱讀體驗的選項。

Spotlight

Spotlight 是一個影視信息查詢的網站，訪問後添加 PWA 應用。Spotlight 主界面以大量圖片和簡短說明文字為主，整個 PWA 應用的載入速度和滑動操作上都保持了很好的流暢性。Spotlight PWA 應用為用戶展示了即將上映/已上映的電影/美劇系列、流行的美劇系列/電影作品，以及明星信息，比如打開美劇 Gotham 為例，詳情頁面提供了簡短的背景描述、大量劇照、相關出演的人員以及其他推薦的關聯作品。

主界面、電視劇詳情頁面

Spotlight 配備了搜索功能，並且支持聯想搜索推薦，實時展示了搜索結果，這款應用適合影視作品查詢的輕度需求。

搜索功能

▍PWA 資源大全

面對還在起步發展階段的 PWA 應用，可能會有用戶對於如何找到這些 PWA 應用感到困惑。那麼，通過下面幾個類似應用商店的資源站點，有助於發現大量 PWA 應用，或者學習這些應用開發的故事、性能測試。

Outweb

Outweb 號稱是 PWA 應用商店「集散地」，收錄了大量 PWA 應用，並且會將應用按照最近收錄、不同類型來整理分類，用戶還可以授權登錄網站賬戶後，對 PWA 應用評論、打分，Outweb 也支持讓開發者主動申請提交自主開發的 PWA 應用。

主界面、賬戶登錄和提交 PWA 應用

Outweb 站點同樣提供了對應的 PWA 版本，利用好其搜索功能和分類肯定能夠幫助你找到心儀的 PWA 應用。打開對應的 PWA 應用頁面後，用戶可選擇「Share Link」分享應用給好友和「Launch App」啟動安裝 PWA 應用。

Share Link、Launch App 功能

▍其他站點

PWA Directory 提供了 PWA 應用的性能測試數據，包括了 Lighthouse 測試報告、WebPageTest、PageSpeed Insights 以及 Manifest 文件源碼內容。

PWA Stats 收錄大量 PWA 應用開發案例，每個案例以簡短的文字摘要和數據標註 PWA 技術的優勢。

▍結語

PWA 應用具備了輕量化、離線使用、本地通知等優勢特點，「封裝」好的應用本身只需佔用很小的存儲空間，依然保留了原生 Apps 大部分功能，甚至還進了硬體性能消耗、應用地頻繁出現廣告內容的問題。如果你希望在安裝原生應用之前，提前體驗功能和內容，輕量化的 PWA 應用會是一個不錯的選擇。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！