無(wú)需下載安裝即可使用的應(yīng)用，相信很多人第一反應(yīng)會(huì)想起微信里的小程序，2016 年隨著小程序正式開(kāi)放公測(cè)，到支付寶小程序、百度智能小程序，再到 QQ 小程序上線，BAT 三巨頭布局小程序市場(chǎng)，傳統(tǒng)的移動(dòng)應(yīng)用程序會(huì)不會(huì)被小程序替代成為大家討論的焦點(diǎn)。

Google 在 2015 年開(kāi)始也已經(jīng)著手推廣這類(lèi)無(wú)需下載的應(yīng)用，被命名為 PWA（Progressive Web Apps，漸進(jìn)式 Web 應(yīng)用），意在將 Web 網(wǎng)頁(yè)服務(wù)打包提供類(lèi)似原生安裝應(yīng)用的使用體驗(yàn)。今天我們整理了一篇關(guān)于 PWA 應(yīng)用的科普文章，究竟有哪些好用的 PWA 應(yīng)用。

懶人目錄

• 什么是 PWA 應(yīng)用
• PWA 和國(guó)內(nèi)的小程序有什么不同
• 如何添加 PWA 應(yīng)用
• 實(shí)用的 PWA 應(yīng)用合輯

什么是 PWA 應(yīng)用

通過(guò)查詢 Google 官方文檔，PWA 應(yīng)用是這樣介紹的：

漸進(jìn)式 Web 應(yīng)用會(huì)在桌面和移動(dòng)設(shè)備上提供可安裝的、仿應(yīng)用的體驗(yàn)，可直接通過(guò) Web 進(jìn)行構(gòu)建和交付。它們是快速、可靠的 Web 應(yīng)用。最重要的是，它們是適用于任何瀏覽器的 Web 應(yīng)用。

反而在 Mozilla Web 開(kāi)發(fā)網(wǎng)站（Firefox 瀏覽器的開(kāi)發(fā)商）關(guān)于 PWA 的解釋更簡(jiǎn)單明了：

PWA（Progressive web apps，漸進(jìn)式 Web 應(yīng)用）運(yùn)用現(xiàn)代的 Web API 以及傳統(tǒng)的漸進(jìn)式增強(qiáng)策略來(lái)創(chuàng)建跨平臺(tái) Web 應(yīng)用程序。這些應(yīng)用無(wú)處不在、功能豐富，使其具有與原生應(yīng)用相同的用戶體驗(yàn)優(yōu)勢(shì)。

PWA 和國(guó)內(nèi)的小程序有什么不同

對(duì)于用戶來(lái)說(shuō)，PWA 應(yīng)用最大的變化在于，改變了以往需要下載安裝包、等待安裝的過(guò)程，這類(lèi)應(yīng)用很好地體現(xiàn)了「用完即走」的理念，與傳統(tǒng)安裝應(yīng)用相比，PWA 應(yīng)用具備的優(yōu)勢(shì)是：無(wú)需安裝、更輕量、不占用大量空間，只需要一款支持 PWA 應(yīng)用的瀏覽器，就可以輕松添加 PWA 應(yīng)用，具備了跨平臺(tái)使用的特性。

而微信小程序這類(lèi)應(yīng)用，需要安裝好微信本身這款應(yīng)用的前提下，才能正常使用小程序，并且有些小程序會(huì)強(qiáng)制讓用戶關(guān)聯(lián)微信帳號(hào)后方可使用應(yīng)用。與其相比，PWA 應(yīng)用在一定程度上展示更開(kāi)放的一面，目前市面上大部分瀏覽器已經(jīng)較好地支持 PWA 應(yīng)用的標(biāo)準(zhǔn)，所以說(shuō)在手機(jī)端或電腦端安裝了瀏覽器，就能夠輕松添加 PWA 應(yīng)用。

如何添加 PWA 應(yīng)用

PWA 應(yīng)用在 2015 年推出至今，市場(chǎng)主流瀏覽器已經(jīng)能夠較好支持這一應(yīng)用標(biāo)準(zhǔn)，PWA 所需的關(guān)鍵要素是 service worker 支持，所以只要是支持 service worker 的瀏覽器，理論上均支持 PWA 應(yīng)用，Chrome（v70 穩(wěn)定版及以上版本）、Firefox（僅支持 Android v58+）、Edge、Safari（iOS 11.3+）這四款主流瀏覽器也都支持 PWA 應(yīng)用，如果你對(duì) PWA 應(yīng)用的開(kāi)發(fā)有興趣，Mozilla 對(duì)漸進(jìn)式 Web 應(yīng)用（PWA）開(kāi)發(fā)有較完善的中文幫助文檔（傳送門(mén)）。

既然已經(jīng)擁有了一款支持 PWA 應(yīng)用瀏覽器，那么用戶究竟如何添加應(yīng)用？

目前有兩種添加方式，一是打開(kāi)提供 PWA 應(yīng)用的網(wǎng)頁(yè)鏈接，Chrome 移動(dòng)端瀏覽器會(huì)自動(dòng)提示是否添加 PWA 應(yīng)用，桌面端則會(huì)在地址欄自動(dòng)顯示加號(hào)的標(biāo)志，或者在菜單選項(xiàng)中找到「安裝 XX 應(yīng)用」。如果沒(méi)有彈出添加應(yīng)用的提醒，Chrome 桌面端用戶可通過(guò)「菜單按鈕 – 更多工具 – 創(chuàng)建快捷方式」，手動(dòng)添加 PWA 應(yīng)用。

二是通過(guò) PWA 應(yīng)用商店，更方便集中查看和添加 PWA 應(yīng)用，目前 Windows 10 系統(tǒng)內(nèi)置的 Microsoft Store 應(yīng)用商店已經(jīng)內(nèi)置了數(shù)十款 PWA 應(yīng)用，用戶直接輸入 PWA 關(guān)鍵詞進(jìn)行搜索即可找到。

在這里，我個(gè)人更推薦另一家 PWA 應(yīng)用商店 App Scope ，收錄了國(guó)內(nèi)外的 PWA 應(yīng)用，網(wǎng)站本身也支持添加 PWA 應(yīng)用，用戶可以按照不同的分類(lèi)找到不同用途的 PWA 應(yīng)用，搜索功能和 Top list 排行榜則降低了用戶找到實(shí)用應(yīng)用的門(mén)檻。以添加 Twitter Lite 應(yīng)用為例，打開(kāi)對(duì)應(yīng)的 App Scope 頁(yè)面，提供了應(yīng)用截圖、功能、更新時(shí)間及相關(guān)媒體報(bào)道，通過(guò)點(diǎn)擊「Launch app」，頁(yè)面將跳轉(zhuǎn)到關(guān)聯(lián)鏈接，并自動(dòng)提醒是否將 PWA 應(yīng)用添加到桌面。

另一家 PWA 應(yīng)用在線商店 Outweb 上同樣可以幫助我們找到更多有趣、實(shí)用的 PWA 應(yīng)用，網(wǎng)站還提供了應(yīng)用打分、留言評(píng)價(jià)的功能。國(guó)內(nèi)也有開(kāi)發(fā)者專門(mén)建立了一個(gè) PWA 應(yīng)用合輯的網(wǎng)站，需要通過(guò)手機(jī)端瀏覽器打開(kāi) 鏈接。

實(shí)用的 PWA 應(yīng)用合輯

前面介紹了 PWA 應(yīng)用簡(jiǎn)要的歷史，目前市面上有哪些瀏覽器支持 PWA 應(yīng)用，以及如何添加 PWA 應(yīng)用，下面我收集了八款 PWA 應(yīng)用，涵蓋了國(guó)內(nèi)外開(kāi)發(fā)商應(yīng)用，有社交、工具等不同分類(lèi)的應(yīng)用。

微博

點(diǎn)擊這里添加微博 PWA 應(yīng)用。

新浪微博官方目前已經(jīng)推出了常規(guī)版、極速版、國(guó)際版客戶端，但被詬病的問(wèn)題（混亂的時(shí)間線、內(nèi)置廣告干擾）一直沒(méi)有得到很好解決。2017 年微博推出 PWA 應(yīng)用，只有幾百 kB 應(yīng)用大小，而且解決了微博時(shí)間線出現(xiàn)廣告和推薦內(nèi)容的干擾問(wèn)題。不過(guò)在體驗(yàn)過(guò)程中發(fā)現(xiàn)在后退操作中，內(nèi)容顯示可能會(huì)重新加載的問(wèn)題。

餓了么

點(diǎn)擊這里添加餓了么 PWA 應(yīng)用。

餓了么是國(guó)內(nèi)較早發(fā)布 PWA 應(yīng)用的開(kāi)發(fā)商之一，網(wǎng)上也有多篇關(guān)于餓了么 PWA 升級(jí)實(shí)踐的開(kāi)發(fā)分享文章（比如發(fā)表在 知乎專欄 的分享文），PWA 應(yīng)用改變了常規(guī)應(yīng)用的臃腫，界面操控流暢度在配置不高的機(jī)型（比如我手上的小米 A1）上也有不錯(cuò)的表現(xiàn)。

與國(guó)內(nèi)只有少數(shù)開(kāi)發(fā)商支持 PWA 應(yīng)用相比，國(guó)外會(huì)有更多廠商在跟進(jìn)支持 PWA 技術(shù)，也出現(xiàn)了 App Scope、Outweb 這類(lèi)的應(yīng)用商店。

Instagram

點(diǎn)擊這里添加 Instagram PWA 應(yīng)用。

Instagram PWA 應(yīng)用的界面上與原生 App 基本保持一致，雙擊點(diǎn)贊、看視頻、快拍、發(fā)表動(dòng)態(tài)等功能一個(gè)不漏，并且時(shí)間線上沒(méi)有出現(xiàn)原生應(yīng)用的廣告贊助動(dòng)態(tài)內(nèi)容。不過(guò)，PWA 應(yīng)用的拍照界面缺少原生 App 的功能（直播、貼紙、加文字），僅調(diào)用手機(jī)系統(tǒng)的拍照應(yīng)用。如果用戶使用桌面版瀏覽器添加 Instagram PWA 應(yīng)用，還會(huì)缺少拍照上傳圖片這個(gè)重要的功能。

Twitter Lite

點(diǎn)擊這里添加 Twitter Lite PWA 應(yīng)用

Twitter PWA 應(yīng)用被命名為 Twitter Lite，從我的使用體驗(yàn)上來(lái)說(shuō)，界面和功能上都做得很完善，主界面和原生應(yīng)用均采用了四個(gè)不同功能的標(biāo)簽頁(yè)設(shè)計(jì)（主頁(yè)、搜索、通知和私信），用戶點(diǎn)擊頭像圖標(biāo)彈出側(cè)邊欄，可切換夜間模式和開(kāi)關(guān)流量節(jié)省程序。

新建發(fā)送推文界面，提供了文本輸入，支持圖片、GIF 或者投票的類(lèi)型。（圓圈方式顯示已輸入的推文字?jǐn)?shù)）

Telegram

點(diǎn)擊這里添加 Telegram PWA 應(yīng)用

Telegram PWA 應(yīng)用更像是 Web 在線服務(wù)的打包封裝，滿足聊天、查看消息的輕量級(jí)需求，但不支持右鍵點(diǎn)擊消息彈出菜單（客戶端版本支持右鍵刪除、引用、回復(fù)消息的功能）、無(wú)法應(yīng)用中文翻譯文件（導(dǎo)致應(yīng)用本身不能更換中文版）。

Google 地圖

點(diǎn)擊這里添加 Google 地圖 PWA 應(yīng)用

作為 PWA 應(yīng)用的發(fā)起者，Google 也將旗下地圖應(yīng)用 Google Map 作為 PWA 技術(shù)實(shí)踐案例之一，PWA 應(yīng)用支持衛(wèi)星影像圖、路線規(guī)劃、街景這些核心功能，體驗(yàn)上有著很好的表現(xiàn)。

Squoosh

點(diǎn)擊這里添加 Squoosh PWA 應(yīng)用

去年 11 月，Google 推出名為 Squoosh 的圖片壓縮服務(wù)，支持離線使用服務(wù)，無(wú)網(wǎng)絡(luò)狀態(tài)下也可以輕松完成圖片壓縮工作。目前，Squoosh 支持 JPEG、PNG 及 WebP 的圖片格式，在壓縮界面中用戶可隨時(shí)調(diào)整壓縮比例，并且在同一界面中比較壓縮前后的效果。

Firefox Send

點(diǎn)擊這里添加 Firefox Send PWA 應(yīng)用

Firefox Send 是一項(xiàng)在線文檔的分享服務(wù)，主打免注冊(cè)和匿名安全的特色，用戶在無(wú)注冊(cè)的狀態(tài)下可上傳最大 1GB、最長(zhǎng) 1 天存儲(chǔ)時(shí)間的臨時(shí)文件，PWA 應(yīng)用版本與在線版界面保持高度一致，上傳文件、設(shè)置好下載次數(shù)和天數(shù)的選項(xiàng)，即可輕松生成分享鏈接。

結(jié)語(yǔ)

通過(guò)梳理以上八款 PWA 應(yīng)用，我們可以發(fā)現(xiàn)工具類(lèi)產(chǎn)品在 PWA 技術(shù)領(lǐng)域中有更多的施展空間，比如以上還沒(méi)介紹到的天氣類(lèi)應(yīng)用 WeatherApp、計(jì)算器應(yīng)用 MultiCalc 等等。同時(shí)國(guó)內(nèi)廠商對(duì)于支持 PWA 應(yīng)用并不是很積極，可能是由于手機(jī)端有微信小程序、電腦網(wǎng)頁(yè)端有輕應(yīng)用/快應(yīng)用之類(lèi)的技術(shù)嘗試，目前實(shí)用的 PWA 應(yīng)用更多集中在國(guó)外應(yīng)用服務(wù)上。

▲圖片來(lái)自：Google 開(kāi)發(fā)者網(wǎng)站

近年來(lái)，很多應(yīng)用開(kāi)發(fā)商已經(jīng)意識(shí)到常規(guī)版應(yīng)用越來(lái)越臃腫的問(wèn)題，我們逐漸看到一些 Lite 精簡(jiǎn)版應(yīng)用的出現(xiàn)，甚至國(guó)內(nèi)廠商開(kāi)發(fā)的應(yīng)用版本中，國(guó)外版比國(guó)內(nèi)版會(huì)有更少的廣告、更流暢的表現(xiàn)，這些都有可能成為 PWA 應(yīng)用有力的競(jìng)爭(zhēng)對(duì)手。隨著手機(jī)和電腦硬件性能的提升，高速網(wǎng)絡(luò)服務(wù)的普及，PWA 應(yīng)用原本無(wú)需等待下載、功能精簡(jiǎn)帶來(lái)的低硬件資源消耗等優(yōu)勢(shì)有可能逐漸消失。對(duì)于普通用戶來(lái)說(shuō)，用好現(xiàn)在這些實(shí)用有趣的 PWA 應(yīng)用已經(jīng)完全足夠了，以后的發(fā)展路徑如何走，PWA 技術(shù)會(huì)不會(huì)消失，或許并不是我們當(dāng)下關(guān)心的核心話題。

題圖來(lái)源：Jelvix