Progressive Web App（PWA），借助現(xiàn)代網(wǎng)絡(luò)技術(shù)，提供能趕超任何移動應(yīng)用的用戶體驗。而正是積極進(jìn)取的開源社區(qū)以及谷歌、微軟等科技巨頭，助推著 PWA 的發(fā)展，試圖沖破應(yīng)用程序之間的鴻溝。

其實，PWA 就是在網(wǎng)絡(luò)瀏覽器中運(yùn)行你的程序。因為谷歌 Play Store 和蘋果 App Store 事實上二分天下，所以重點就是谷歌 Chrome 和蘋果 Safari（分別基于開源的 Chromium 和 WebKit 構(gòu)建）。

關(guān)于創(chuàng)建桌面應(yīng)用的內(nèi)容不在本文展開，如果你對此感興趣，可以參考 Electron。

PWA 的構(gòu)建方式和任何其他網(wǎng)站或網(wǎng)絡(luò)應(yīng)用沒有兩樣。它們使用最新的移動技術(shù)，并且采用用戶體驗的最佳實踐。PWA 還可以將瀏覽器與原生代碼相結(jié)合以優(yōu)化體驗。

如果你在搜索引擎中輸入 “什么是 PWA”，你可能得到一個概括性的回答，像是“PWA 的設(shè)計上高速、穩(wěn)定、吸引人，可以離線工作，還可以安裝到設(shè)備的主屏幕上。”雖然這個答案部分正確，但卻僅僅涵蓋了 PWA 所能達(dá)成和正在發(fā)展成的事物表面部分。

下面的這些并非 PWA

下面列出的是跨平臺應(yīng)用框架，它們可以讓你能從單一代碼庫開發(fā)應(yīng)用，但并未采用瀏覽器作為它們的平臺。

• Flutter
• React Native

采用 Flutter，你可能會用到 Dart 語言，此語言可以編譯出 iOS、安卓和網(wǎng)頁應(yīng)用。而 React Native 同樣可以對 JavaScript 進(jìn)行后端編譯。

PWA 的定義是什么？

根據(jù)最初的定義，一個 PWA 必須滿足以下三個要求：

• 服務(wù)工作線程： 提供離線功能。
• 網(wǎng)絡(luò)清單： JSON 標(biāo)記用于配置主屏幕和應(yīng)用圖標(biāo)。
• 安全性： 強(qiáng)制使用 HTTPS，因為服務(wù)工作線程在后臺運(yùn)行。

這些組件使你能通過 谷歌 Lighthouse PWA 審核，并在你的評分上得到綠色檢查標(biāo)記。

谷歌 Lighthouse 得分，包括性能，便捷性，最佳實踐，SEO 和 PWA

只要滿足這些要求，Chrome 的“添加到主頁”提示就會自動啟用。

PWA Builder（由微軟提供的免費(fèi)服務(wù)）具有出色的用戶界面，可以用于構(gòu)建 PWA 和可視化基本要求。請見以下基于 developers.google.com 的示例。你可以在這個 鏈接 預(yù)覽此功能，這是由我在 上一篇文章 中討論的 PWA 模塊 提供。

顯示服務(wù)工作線程的谷歌開發(fā)者界面

顯示清單的谷歌開發(fā)者界面

PWA 的基本要求通過服務(wù)工作線程實現(xiàn)了離線行為，manifest.json 文件則使得在安卓上添加“添加至主頁”行為成為可能，這樣你的網(wǎng)站會作為圖標(biāo)添加到主屏幕上，并以無瀏覽器的 Chrome（全屏模式）以帶應(yīng)用啟動頁的方式打開。這些是 PWA 的最低要求，除了離線緩存帶來的性能提升，它基本上給人一種網(wǎng)站就是應(yīng)用的感覺。這其實是一種用戶心理的轉(zhuǎn)變，從只把瀏覽器看作“網(wǎng)站”的工具，逐漸認(rèn)識到它其實是一個應(yīng)用平臺。谷歌似乎趨向于推動這種觀點，為發(fā)展更多的功能、性能和用戶體驗/用戶界面的提升掃清了道路，這樣才能真正提供“像應(yīng)用一樣的體驗”。

深入的說，PWA 實際上是一系列瀏覽器技術(shù)以及網(wǎng)絡(luò)開發(fā)技巧和工具的集合，使網(wǎng)站更像“應(yīng)用”。我把這些內(nèi)容分解到了以下幾個類別。

提供增強(qiáng)的“應(yīng)用般”體驗

• 在移動設(shè)備上的用戶體驗/用戶界面體驗優(yōu)化

• HTML/CSS/Javascript

• 更接近原生設(shè)備的訪問以及強(qiáng)大的網(wǎng)絡(luò)功能
• 更快速流暢的性能表現(xiàn)

當(dāng)前的 PWA：超越最初定義的可能性

以下是對于前述三個體驗優(yōu)化方向的詳細(xì)闡述。

用戶體驗/用戶界面的改進(jìn)

用戶體驗/用戶界面設(shè)計和視覺問題解決對于讓你的網(wǎng)站更像應(yīng)用至關(guān)重要，這可能表現(xiàn)在動畫效果、輸入/字體大小、滾動問題，以及其他 CSS 錯誤的細(xì)節(jié)之處。重視前端開發(fā)團(tuán)隊至關(guān)重要，因為他們可以打造出這樣的用戶體驗。在設(shè)計和用戶體驗的廣泛領(lǐng)域內(nèi)，我們可以通過一些 Web 文檔建構(gòu)的核心元素（HTML/JSS/JS）實現(xiàn)增強(qiáng)型特征，例如：

• Hotwire Turbo：這是一個利用線上 HTML，只通過 AJAX 或 WebSockets 更新你網(wǎng)頁有變動的部分的開源框架。它為了實現(xiàn) SPA 那樣的性能優(yōu)化，僅用到了部分 JavaScript。對于你的單體應(yīng)用或模版渲染系統(tǒng)，這種途徑最佳，不需要多費(fèi)周折去解耦你的前后端。
• 專門的移動 SPA 框架：市場上有一些可以為你的網(wǎng)站帶來類應(yīng)用用戶體驗的解耦式框架。Onsen UI 和 Framework 7 就是兩個可幫你創(chuàng)建快速、反應(yīng)靈敏的網(wǎng)站用戶界面的優(yōu)秀工具。當(dāng)然，你未必必須依靠這些框架，如前所述，有力的前端團(tuán)隊通過應(yīng)用最新的、類似移動設(shè)備設(shè)計技巧就能打造出你向往的 UI 設(shè)計。

這個幻燈片 詳細(xì)講述了應(yīng)如何在你的 PWA 中保持 HTML/CSS/JS 的最新狀態(tài)。

Web 的能力

Chromium 團(tuán)隊持續(xù)在改進(jìn)瀏覽器體驗方面努力不懈，你可以在 Project Fugu 中追蹤他們在這個全方位網(wǎng)絡(luò)功能改進(jìn)項目的進(jìn)展。WebKit 即持續(xù)致力于優(yōu)化其瀏覽器體驗和能力。

Swift API 還可以與 WKWebView 進(jìn)行交互，以增強(qiáng)原生體驗。

谷歌提供了一項名為 Bubblewrap 的服務(wù)，與 Trusted Web Activity（TWA）共同工作。它的作用僅是將你的基于 PWA 的網(wǎng)站包裝在一個原生的 APK 包中，從而可以將其提交到應(yīng)用商店。這就是我之前提到的關(guān)于安卓的 PWA Builder 鏈接的工作方式。在我之前的文章里，你可以了解更多關(guān)于 WKWebView 和 TWA 的信息。

速度和性能

改進(jìn)你的應(yīng)用性能的方法多得數(shù)不清。你可以先從 谷歌 PageSpeed tools 進(jìn)行檢查。

使用 PWA 的各種獎勵：

• Lighthouse 得分和 SEO 的提升。
• 統(tǒng)一的代碼庫。
• 順滑無阻的測試過程。
• 對開發(fā)周期即時反饋。
• 使用了管理型的 PaaS Web 部署流程。
• Web 技術(shù)的學(xué)習(xí)和使用面向廣大開發(fā)者。
• 唯一一種可以提供完善網(wǎng)絡(luò)體驗的跨平臺開發(fā)解決方案。
• 自由發(fā)揮設(shè)計，不受限于跨平臺框架的 UI 組件束縛。
• 即使網(wǎng)絡(luò)連接狀況不佳，也能觸達(dá)用戶。

當(dāng)然，使用 PWA 也還有一些問題需要考慮：

• 功能可能有限：與原生設(shè)備使用體驗相比，PWA 還有所遜色，但瀏覽器正在大步趕超過來。你可以查閱 Thomas Steiner 對 Project Fugu 如何彌補(bǔ)應(yīng)用空白的論點，或者搜索 “What web can do” 查看你的瀏覽器能做什么。通常，你的 PWA 項目有很大可能是大部分不會因為功能/能力受限而耗盡資源的應(yīng)用。
• 標(biāo)準(zhǔn)化欠缺：Thomas Steiner 在文章中也提及了 “PWA 標(biāo)準(zhǔn)” 的問題，目前還使我們一頭霧水。這也造成 PWA 主題的混淆，使開發(fā)者在追求“心有戚戚焉”的突破瞬間時頗感困擾。缺乏明確的定義，使得 PWA 的推動力度降低，且導(dǎo)致營銷或管理層因為無法定義 PWA，所以也就不會主動提出需要 PWA。
• iOS App Store 的問題：目前的 App Store 并未列出 PWA，于是找到 PWA 就比找到原生應(yīng)用困難。但這并非絕境，你依舊可以讓你的網(wǎng)絡(luò)應(yīng)用提供比原生應(yīng)用更棒的體驗。做的好的話，你甚至能獲得蘋果公司的真心贊賞，因為最重要的評價標(biāo)準(zhǔn)就是提供良好的移動體驗。曾經(jīng)在 PWA 成為術(shù)語之前，就在原生 iOS 應(yīng)用中運(yùn)用 WKWebView 的 Ionic，在他們的論壇上 分享了有趣的見解。只要你懂行，便不會有任何問題。在 我以前在 Opensource.com 上的文章 的“網(wǎng)絡(luò)應(yīng)用如何進(jìn)入應(yīng)用市場”部分，你能找到更多內(nèi)容。
• 某些情況下的安全問題：瀏覽器采用 cookie 作為認(rèn)證，這種早在瀏覽器誕生時就已經(jīng)使用的方法，可能并不適合你的項目。其中，瀏覽器提供了出色的密碼管理，并一直在研發(fā)和引入其他認(rèn)證方法，例如 Webauthn。而 關(guān)聯(lián)域 中的使用提供了更多的安全層。

相比其他方式，我認(rèn)為“網(wǎng)絡(luò)正在嶄露頭角”，在未來的發(fā)展中，隨著網(wǎng)絡(luò)的新功能不斷涌現(xiàn)，當(dāng)前的缺點將逐漸被減弱。我不認(rèn)為原生開發(fā)會消失，只是 WebView 和原生代碼之間的集成會更加無縫。

結(jié)語

雖然 PWA 還在早期開發(fā)階段，但它們有潛力徹底改變我們使用網(wǎng)絡(luò)的方式。每天我都會看到新的網(wǎng)站在挑戰(zhàn) PWA 能做到什么。不管管理層是否知道他們正在建立一個 PWA，我經(jīng)常會發(fā)現(xiàn)網(wǎng)絡(luò)應(yīng)用和開發(fā)團(tuán)隊如何擴(kuò)展網(wǎng)絡(luò)技術(shù)的使用或者選擇一個優(yōu)化良好的移動網(wǎng)站而不是原生應(yīng)用，這都讓我感到驚訝。