無需下載安裝即可使用的應用,相信很多人第一反應會想起微信里的小程序,2016 年隨著小程序正式開放公測,到支付寶小程序、百度智能小程序,再到 QQ 小程序上線,BAT 三巨頭布局小程序市場,傳統的移動應用程序會不會被小程序替代成為大家討論的焦點。 Google 在 2015 年開始也已經著手推廣這類無需下載的應用,被命名為 PWA(Progressive Web Apps,漸進式 Web 應用),意在將 Web 網頁服務打包提供類似原生安裝應用的使用體驗。今天我們整理了一篇關于 PWA 應用的科普文章,究竟有哪些好用的 PWA 應用。 懶人目錄
什么是 PWA 應用
通過查詢 Google 官方文檔,PWA 應用是這樣介紹的: 漸進式 Web 應用會在桌面和移動設備上提供可安裝的、仿應用的體驗,可直接通過 Web 進行構建和交付。它們是快速、可靠的 Web 應用。最重要的是,它們是適用于任何瀏覽器的 Web 應用。 反而在 Mozilla Web 開發網站(Firefox 瀏覽器的開發商)關于 PWA 的解釋更簡單明了: PWA(Progressive web apps,漸進式 Web 應用)運用現代的 Web API 以及傳統的漸進式增強策略來創建跨平臺 Web 應用程序。這些應用無處不在、功能豐富,使其具有與原生應用相同的用戶體驗優勢。 PWA 和國內的小程序有什么不同 對于用戶來說,PWA 應用最大的變化在于,改變了以往需要下載安裝包、等待安裝的過程,這類應用很好地體現了「用完即走」的理念,與傳統安裝應用相比,PWA 應用具備的優勢是:無需安裝、更輕量、不占用大量空間,只需要一款支持 PWA 應用的瀏覽器,就可以輕松添加 PWA 應用,具備了跨平臺使用的特性。 而微信小程序這類應用,需要安裝好微信本身這款應用的前提下,才能正常使用小程序,并且有些小程序會強制讓用戶關聯微信帳號后方可使用應用。與其相比,PWA 應用在一定程度上展示更開放的一面,目前市面上大部分瀏覽器已經較好地支持 PWA 應用的標準,所以說在手機端或電腦端安裝了瀏覽器,就能夠輕松添加 PWA 應用。 如何添加 PWA 應用 PWA 應用在 2015 年推出至今,市場主流瀏覽器已經能夠較好支持這一應用標準,PWA 所需的關鍵要素是 service worker 支持,所以只要是支持 service worker 的瀏覽器,理論上均支持 PWA 應用,Chrome(v70 穩定版及以上版本)、Firefox(僅支持 Android v58+)、Edge、Safari(iOS 11.3+)這四款主流瀏覽器也都支持 PWA 應用,如果你對 PWA 應用的開發有興趣,Mozilla 對漸進式 Web 應用(PWA)開發有較完善的中文幫助文檔(傳送門)。 既然已經擁有了一款支持 PWA 應用瀏覽器,那么用戶究竟如何添加應用? 目前有兩種添加方式,一是打開提供 PWA 應用的網頁鏈接,Chrome 移動端瀏覽器會自動提示是否添加 PWA 應用,桌面端則會在地址欄自動顯示加號的標志,或者在菜單選項中找到「安裝 XX 應用」。如果沒有彈出添加應用的提醒,Chrome 桌面端用戶可通過「菜單按鈕 – 更多工具 – 創建快捷方式」,手動添加 PWA 應用。 二是通過 PWA 應用商店,更方便集中查看和添加 PWA 應用,目前 Windows 10 系統內置的 Microsoft Store 應用商店已經內置了數十款 PWA 應用,用戶直接輸入 PWA 關鍵詞進行搜索即可找到。 在這里,我個人更推薦另一家 PWA 應用商店 App Scope ,收錄了國內外的 PWA 應用,網站本身也支持添加 PWA 應用,用戶可以按照不同的分類找到不同用途的 PWA 應用,搜索功能和 Top list 排行榜則降低了用戶找到實用應用的門檻。以添加 Twitter Lite 應用為例,打開對應的 App Scope 頁面,提供了應用截圖、功能、更新時間及相關媒體報道,通過點擊「Launch app」,頁面將跳轉到關聯鏈接,并自動提醒是否將 PWA 應用添加到桌面。 另一家 PWA 應用在線商店 Outweb 上同樣可以幫助我們找到更多有趣、實用的 PWA 應用,網站還提供了應用打分、留言評價的功能。國內也有開發者專門建立了一個 PWA 應用合輯的網站,需要通過手機端瀏覽器打開 鏈接。 實用的 PWA 應用合輯 前面介紹了 PWA 應用簡要的歷史,目前市面上有哪些瀏覽器支持 PWA 應用,以及如何添加 PWA 應用,下面我收集了八款 PWA 應用,涵蓋了國內外開發商應用,有社交、工具等不同分類的應用。 微博 點擊這里添加微博 PWA 應用。 新浪微博官方目前已經推出了常規版、極速版、國際版客戶端,但被詬病的問題(混亂的時間線、內置廣告干擾)一直沒有得到很好解決。2017 年微博推出 PWA 應用,只有幾百 kB 應用大小,而且解決了微博時間線出現廣告和推薦內容的干擾問題。不過在體驗過程中發現在后退操作中,內容顯示可能會重新加載的問題。 餓了么 點擊這里添加餓了么 PWA 應用。 餓了么是國內較早發布 PWA 應用的開發商之一,網上也有多篇關于餓了么 PWA 升級實踐的開發分享文章(比如發表在 知乎專欄 的分享文),PWA 應用改變了常規應用的臃腫,界面操控流暢度在配置不高的機型(比如我手上的小米 A1)上也有不錯的表現。 與國內只有少數開發商支持 PWA 應用相比,國外會有更多廠商在跟進支持 PWA 技術,也出現了 App Scope、Outweb 這類的應用商店。 點擊這里添加 Instagram PWA 應用。 Instagram PWA 應用的界面上與原生 App 基本保持一致,雙擊點贊、看視頻、快拍、發表動態等功能一個不漏,并且時間線上沒有出現原生應用的廣告贊助動態內容。不過,PWA 應用的拍照界面缺少原生 App 的功能(直播、貼紙、加文字),僅調用手機系統的拍照應用。如果用戶使用桌面版瀏覽器添加 Instagram PWA 應用,還會缺少拍照上傳圖片這個重要的功能。 Twitter Lite 點擊這里添加 Twitter Lite PWA 應用 Twitter PWA 應用被命名為 Twitter Lite,從我的使用體驗上來說,界面和功能上都做得很完善,主界面和原生應用均采用了四個不同功能的標簽頁設計(主頁、搜索、通知和私信),用戶點擊頭像圖標彈出側邊欄,可切換夜間模式和開關流量節省程序。 新建發送推文界面,提供了文本輸入,支持圖片、GIF 或者投票的類型。(圓圈方式顯示已輸入的推文字數) Telegram 點擊這里添加 Telegram PWA 應用 Telegram PWA 應用更像是 Web 在線服務的打包封裝,滿足聊天、查看消息的輕量級需求,但不支持右鍵點擊消息彈出菜單(客戶端版本支持右鍵刪除、引用、回復消息的功能)、無法應用中文翻譯文件(導致應用本身不能更換中文版)。 Google 地圖 點擊這里添加 Google 地圖 PWA 應用 作為 PWA 應用的發起者,Google 也將旗下地圖應用 Google Map 作為 PWA 技術實踐案例之一,PWA 應用支持衛星影像圖、路線規劃、街景這些核心功能,體驗上有著很好的表現。 Squoosh 點擊這里添加 Squoosh PWA 應用 去年 11 月,Google 推出名為 Squoosh 的圖片壓縮服務,支持離線使用服務,無網絡狀態下也可以輕松完成圖片壓縮工作。目前,Squoosh 支持 JPEG、PNG 及 WebP 的圖片格式,在壓縮界面中用戶可隨時調整壓縮比例,并且在同一界面中比較壓縮前后的效果。 Firefox Send 點擊這里添加 Firefox Send PWA 應用 Firefox Send 是一項在線文檔的分享服務,主打免注冊和匿名安全的特色,用戶在無注冊的狀態下可上傳最大 1GB、最長 1 天存儲時間的臨時文件,PWA 應用版本與在線版界面保持高度一致,上傳文件、設置好下載次數和天數的選項,即可輕松生成分享鏈接。 結語 通過梳理以上八款 PWA 應用,我們可以發現工具類產品在 PWA 技術領域中有更多的施展空間,比如以上還沒介紹到的天氣類應用 WeatherApp、計算器應用 MultiCalc 等等。同時國內廠商對于支持 PWA 應用并不是很積極,可能是由于手機端有微信小程序、電腦網頁端有輕應用/快應用之類的技術嘗試,目前實用的 PWA 應用更多集中在國外應用服務上。 ▲圖片來自:Google 開發者網站 近年來,很多應用開發商已經意識到常規版應用越來越臃腫的問題,我們逐漸看到一些 Lite 精簡版應用的出現,甚至國內廠商開發的應用版本中,國外版比國內版會有更少的廣告、更流暢的表現,這些都有可能成為 PWA 應用有力的競爭對手。隨著手機和電腦硬件性能的提升,高速網絡服務的普及,PWA 應用原本無需等待下載、功能精簡帶來的低硬件資源消耗等優勢有可能逐漸消失。對于普通用戶來說,用好現在這些實用有趣的 PWA 應用已經完全足夠了,以后的發展路徑如何走,PWA 技術會不會消失,或許并不是我們當下關心的核心話題。 題圖來源:Jelvix |