早在2015年，設(shè)計師弗朗西斯·貝里曼和Google Chrome的工程師亞歷克斯·羅素提出“PWA（漸進式網(wǎng)絡(luò)應(yīng)用程序）”概念，將網(wǎng)絡(luò)之長與應(yīng)用之長相結(jié)合，其核心目標就是提升 Web App 的性能，改善 Web App以媲美Native的流暢體驗。

1. 什么是PWA

PWA 不是一個框架或工具集，而是一個概念，是開發(fā)人員需要在應(yīng)用程序中實現(xiàn)的一組功能，以便將應(yīng)用程序的用戶體驗提升到一個新的水平上。如果說某網(wǎng)站在某種程度上是 PWA，那它滿足的 PWA 功能清單中的特性越多，它就越接近這個概念。

PWA是一類Web應(yīng)用程序的統(tǒng)稱，通過高級Web功能使Web應(yīng)用程序的行為和表現(xiàn)像本地應(yīng)用程序一樣。PWA 可以通過一個代碼庫在多個平臺和多個設(shè)備上運行，像一個特定平臺的應(yīng)用程序那樣，可以安裝在設(shè)備上，可以離線和在后臺運行，并且可以與設(shè)備和其他已安裝的應(yīng)用程序集成。

PWA能夠重用現(xiàn)有代碼以提供服務(wù)體驗?；谄渌目缙脚_技術(shù)，往往需要一次性將適配于各種設(shè)備和平臺的應(yīng)用程序部署到所有商店，PWA與之有極大的不同，本質(zhì)上是提供類似于原生應(yīng)用程序的用戶體驗的網(wǎng)站。PWA受歡迎的原因之一是它能夠滿足所有面向移動網(wǎng)絡(luò)的設(shè)備需求，同時節(jié)省了應(yīng)用創(chuàng)建和維護的投資成本。

簡單而言，一個 PWA 應(yīng)用首先是一個網(wǎng)頁, 是通過 Web 技術(shù)編寫出的一個網(wǎng)頁應(yīng)用，隨后通過App Shell 架構(gòu)添加上 Manifest 實現(xiàn)添加至設(shè)備主屏幕， 在通過 Service Worker 來實現(xiàn)離線緩存和消息推送等功能。

圖片

2.PWA 的關(guān)鍵技術(shù)

歸納而言，PWA 應(yīng)用中有兩項關(guān)鍵技術(shù)：基于Manifest的App Shell 架構(gòu)和Service worker運行機制。

2.1 基于Manifest的App Shell架構(gòu)

App Shell 架構(gòu)是構(gòu)建 PWA 應(yīng)用的一種方式，能即時可靠且地將PWA加載到用戶屏幕上，從而與本機應(yīng)用相似。

作為一種PWA的構(gòu)建方式，App Shell架構(gòu)提供了一個最基本的 Web App 框架，包括應(yīng)用的頭部、底部、菜單欄等結(jié)構(gòu)。App Shell 架構(gòu)通常使用JavaScript框架(如React或Angular)來實現(xiàn)，可以是一種構(gòu)建單頁面應(yīng)用(SPA)的方法，它將邏輯與實際內(nèi)容分離開來。

App Shell 架構(gòu)涉及緩存靜態(tài)資源，然后使用JavaScript動態(tài)加載實際內(nèi)容，是一個能夠支持用最小化HTML/CSS/JS用戶界面集合的可緩存UI框架。如果有離線緩存，可確保在用戶重復訪問時提供即時、可靠的良好性能。這樣一來，用戶重復打開應(yīng)用時就能迅速地看到 Web App 的基本界面，只需要從網(wǎng)絡(luò)中請求、加載必要的內(nèi)容。這也意味著并不是每次用戶訪問時都要從網(wǎng)絡(luò)加載 App Shell，而只需要從網(wǎng)絡(luò)中加載必要的內(nèi)容。???App Shell 是通過瀏覽器中的Web runtime?完成的web 應(yīng)用與當前設(shè)備平臺的交互，尤其是在當前設(shè)備的屏幕上增加應(yīng)用的啟動入口。?Web Application Manifest，即通過一個清單文件向瀏覽器暴露 web 應(yīng)用的元數(shù)據(jù)，包括名稱、icon 的 URL 等，以備瀏覽器使用，比如在添加至主屏或推送通知時暴露給操作系統(tǒng)，從而增強 web 應(yīng)用與操作系統(tǒng)的集成能力。Manifest就是一個json文件，一個簡單示例如下：

{
    "name": "Progressive web app sample",
    "short_name": "pwa sample",
    "start_url": "/index.html",
    "display": "standalone",
    "theme_color": "#FFDF01",
    "background_color": "#FFDF01",
    "icons": [
        {
            "src": "homescreen.png",
            "sizes": "168x168",
            "type": "image/png"
        },
        {
            "src": "homescreen-124.png",
            "sizes": "124x124",
            "type": "image/png"
        }
    ]
}

當用戶第一次訪問PWA應(yīng)用程序時，瀏覽器會按照manifest.json文件的內(nèi)容對應(yīng)用程序進行注冊與安裝，以便隨時在離線狀態(tài)下訪問。

對于使用包含大量 JavaScript 的架構(gòu)的單頁面應(yīng)用來說，基于Manifest 的 App Shell 適用于在沒有網(wǎng)絡(luò)的情況下將一些初始 HTML 快速加載到屏幕上。

圖片

2.2 Service worker

Service worker是 web技術(shù)中worker 的一種，那么，什么是worker呢？

由于Javascript 的單線程特性，任何“重量”操作都會阻塞主線程。為了提升性能和體驗，現(xiàn)代瀏覽器使用worker 作為一種多線程機制，把原本的單線程應(yīng)用變成多線程運行?，F(xiàn)代瀏覽器中提供了 3 種 Worker，分別是：

• Web worker—— 包含專用 worker及共享 worker
• Service worker
• Worklet—— 包含PaintWorklet、AudioWorklet、AnimationWorklet、LayoutWorklet。其中，Worklet 與硬件交互設(shè)計相關(guān)且仍處于試驗狀態(tài)。Web worker 特別適用于后臺跑腳本?，F(xiàn)在的網(wǎng)頁都可以注冊多個 Worker，讓不同的任務(wù)在各自獨立的環(huán)境中完成。Service worker 相當于是瀏覽器在網(wǎng)頁和服務(wù)器通信中插入的一個“中間層”，本質(zhì)上充當代理，以編程方式攔截和處理來自頁面的網(wǎng)絡(luò)請求，甚至可以從各種來源產(chǎn)生全新的反應(yīng)并構(gòu)建HTML。

關(guān)于service worker 的主要內(nèi)容，下圖給出了核心提示：

圖片

在Service Worker安裝期間預(yù)加載文件。對于SPA，這通常包括我們之前討論的“應(yīng)用程序外殼”，而簡單的靜態(tài)網(wǎng)站可能會選擇預(yù)加載所有HTML、CSS和JavaScript，以確保離線時基本功能得到維護。處理推送通知，類似于本機應(yīng)用程序。這意味著網(wǎng)站可以獲得用戶的許可來發(fā)送通知，然后依靠Service Workers接收消息并執(zhí)行消息，即使瀏覽器關(guān)閉。.

2.3 基于Service worker 的Push、notification 和后臺服務(wù)

目前，不同的瀏覽器廠商使用了不同的Push Service，chrome使用了自家的FCM，firefox也是使用自家的服務(wù)，不同push服務(wù)遵循共同的Web Push協(xié)議，具有標準的調(diào)用方式。

圖片

其中，“UA”就是我們的用戶客戶端，也就是瀏覽器；“Application Server”是后端服務(wù)；“Push Service”作為中間代理商，扮演著核心角色。Push Service接收客戶端的消息訂閱，維護管理“客戶端url-公鑰”對的列表，并將訂閱和私鑰信息發(fā)送給服務(wù)器進行存儲；此外，它后續(xù)還得接收服務(wù)端的推送消息，校驗并發(fā)送給對象的客戶端進行展示。

Push Service還有一個非常重要的功能：當用戶離線時，可以幫我們保存消息隊列，直到用戶聯(lián)網(wǎng)后再發(fā)送給他們。

Notification通知的功能與消息push類似，但更為簡單，只要設(shè)置好通知消息，調(diào)用service worker的相同通知接口即可，甚至可以可以帶操作，

后臺同步也是Service Worker的一個子功能，用于在終端弱網(wǎng)或無王情況下同步后臺的數(shù)據(jù)或繼續(xù)前端的請求消息由于service worker在瀏覽器關(guān)閉后仍然運行著，所以即使用戶沒有網(wǎng)絡(luò)或關(guān)閉客戶端，service worker仍會存儲相應(yīng)的請求，并在有可用網(wǎng)絡(luò)連接時發(fā)起數(shù)據(jù)同步。

3. PWA 的應(yīng)用特性與功能特點

Google 給出的 PWA 應(yīng)用特性如下：

• 可靠：即使在互聯(lián)網(wǎng)連接不佳或沒有互聯(lián)網(wǎng)的情況下，也可以快速加載。當沒有互聯(lián)網(wǎng)連接時，PWA 會使用 Service Worker 來消除對Web服務(wù)器的依賴。
• 快速：流暢的動畫和交互效果，應(yīng)用程序擁有原生的體驗，沒有笨拙的網(wǎng)頁滾動。
• 參與感：能夠全屏運行（如果添加到手機桌面），并處理通知。

PWA 應(yīng)用主要功能特點如下：

• 漸進增強：在盡可能多的環(huán)境中運行，可以使用任何可用的服務(wù)，并在沒有服務(wù)的情況下優(yōu)雅地降級。
• 響應(yīng)式用戶界面：該應(yīng)用程序適應(yīng)各種輸入方式（觸摸、語音等）和輸出方式(不同的屏幕尺寸、振動、音頻、盲文顯示等）。
• 連接獨立性：該應(yīng)用程序在離線狀態(tài)下以及間歇性或低帶寬網(wǎng)絡(luò)連接下也能運行良好。
• App-like UI：應(yīng)用程序采用原生平臺的 UI 元素，能夠快速加載的用戶界面。
• 持續(xù)更新：Service Worker API 定義了一個將應(yīng)用程序自動更新到新版本的過程。
• 安全通信：通過 HTTPS 提供服務(wù)和通信，以防止窺探和攻擊。
• 應(yīng)用程序發(fā)現(xiàn)：即SEO友好，W3C 網(wǎng)絡(luò)應(yīng)用程序清單等元數(shù)據(jù)，使搜索引擎能夠找到網(wǎng)絡(luò)應(yīng)用程序。
• 推送交互：推送通知等功能可以主動讓用戶了解最新信息。
• 后臺加載：網(wǎng)頁關(guān)閉，PWA 仍然可以在后臺運行獲取數(shù)據(jù)更新（當然有限制）。
• 本機可安裝性：可以安裝 Web 應(yīng)用程序，無需通過本機應(yīng)用程序商店來進行。
• 可鏈接性：通過 URL 輕松共享應(yīng)用程序，無需顯示安裝即可運行。
• 可再次訪問，通過 URL 可以輕松分享應(yīng)用，不用復雜的安裝即可運行。
• 輕量級：web應(yīng)用更加輕量級，整個APP都在KB占用內(nèi)。

2.4 PWA開發(fā)工具與生態(tài)影響

漸進式web應(yīng)用程序（PWA）框架簡單可靠，開發(fā)人員可以使用不同的來開發(fā)PWA，常見的開發(fā)工具框架如下：

• VueJS：Vue是頂級的PWA框架庫之一，因為它簡化了編碼并提供了高速渲染。
• AngularJS：2009年由谷歌發(fā)布，是PWA應(yīng)用程序開發(fā)中最廣泛的流程之一。
• ReactJS：2013年由Facebook發(fā)布的React包含了一個廣泛的JavaScript庫，使用JSX呈現(xiàn)連接HTML結(jié)構(gòu)的函數(shù)來提供React PWA解決方案。
• Ionic：一個開源SDK，提供了一個龐大的插件庫，能夠在無需編碼的情況下訪問API
• Polymer：Polymer具有多種工具、組件和模板，使用純HTML、CSS或JavaScript的一個獨立框架
• Magento PWA Studio：提供創(chuàng)建、部署和管理PWA所需的一切，包括用于構(gòu)建用戶界面、管理數(shù)據(jù)和測試應(yīng)用程序的工具。
• Svelte：一個用于開發(fā)PWA的JavaScript框架，構(gòu)建了快速加載的小代碼包。

對于軟件生態(tài)而言，PWA確實對一些傳統(tǒng)的應(yīng)用軟件和開發(fā)方式帶來了一定的沖擊和改變。

對于一些開發(fā)商而言，PWA技術(shù)的出現(xiàn)意味著需要考慮在Web端進行應(yīng)用開發(fā)，并為用戶提供更好的Web應(yīng)用體驗。但同時，PWA的開發(fā)方式也使得他們可以更加靈活地進行應(yīng)用開發(fā)，并且減少了一些原生應(yīng)用的開發(fā)和發(fā)布成本。

PWA技術(shù)的出現(xiàn)可能會對應(yīng)用商店造成一定的沖擊，因為PWA可以通過瀏覽器直接訪問，不需要下載和安裝，這可能會導致一些應(yīng)用商店用戶流失。但是，應(yīng)用商店也可以通過采取措施，例如推出PWA應(yīng)用、提供更好的應(yīng)用變現(xiàn)機會等來應(yīng)對這種變化。

對于用戶而言，PWA技術(shù)的出現(xiàn)可能會提供更好的Web應(yīng)用體驗，例如離線訪問、桌面快捷方式、推送通知等功能，同時也可以減少一些應(yīng)用的下載和安裝成本。但是，用戶也需要考慮PWA應(yīng)用在一些方面可能相對于原生應(yīng)用和小程序存在的較多局限性和不足。

PWA技術(shù)對于應(yīng)用軟件開發(fā)商、應(yīng)用商店和用戶都可能會產(chǎn)生一定的影響，但是它并不會完全顛覆原有的開發(fā)和使用方式。PWA的優(yōu)點和缺點都是相對的，不同的應(yīng)用場景和開發(fā)需求會影響開發(fā)者對PWA和原生應(yīng)用的選擇。如果應(yīng)用的功能、性能和用戶體驗要求較高，可以考慮原生應(yīng)用；如果希望對開發(fā)和維護成本進一步降低，但又擁有app的一些特征，可以考慮使用PWA。

2.5 PWA 與小程序

各種類型的小程序都或多或少地繼承或借鑒了PWA的技術(shù)理念，可以認為PWA是各種小程序的源頭之一。

圖片

依托于超級App，微信、百度、支付寶等公司都推出了各自的小程序。歸納而言，小程序采用了輕量級的框架和組件，加載速度快，用戶可以迅速打開應(yīng)用程序。小程序能夠與設(shè)備的硬件功能（如攝像頭、定位、陀螺儀等）進行原生集成，提供更豐富的功能和用戶體驗。通過應(yīng)用商店進行分發(fā)，用戶可以方便地搜索、發(fā)現(xiàn)和安裝小程序。小程序開發(fā)使用統(tǒng)一的開發(fā)工具和語言，在一定程度上減少了開發(fā)者的學習成本。另外小程序可以共享用戶數(shù)據(jù)，提供更便捷的登錄和數(shù)據(jù)傳輸。

PWA可以在幾乎所有現(xiàn)代瀏覽器上運行，具有廣泛的設(shè)備和平臺支持。開發(fā)者可以充分利用現(xiàn)有的Web開發(fā)知識和工具，龐大的開發(fā)者社區(qū)來提供豐富的資源、工具和支持。小程序可以通過超級App作為流量入口，也可以運行在企業(yè)自有App中，任何企業(yè)的App只需要通過集成小程序運行時SDK,即可獲得小程序運行能力，讓小程序擁有了更多分發(fā)渠道。小程序生態(tài)系統(tǒng)提供了數(shù)據(jù)分析和統(tǒng)計工具，幫助開發(fā)者了解用戶行為、應(yīng)用性能和使用情況。開發(fā)者可以通過這些工具獲取關(guān)鍵指標和數(shù)據(jù)，進行數(shù)據(jù)驅(qū)動的優(yōu)化和改進。這些工具提供了可視化的報表和圖表，幫助開發(fā)者更好地理解用戶行為和應(yīng)用運行情況。

圖片

PWA和小程序都是當前移動應(yīng)用開發(fā)領(lǐng)域的熱門技術(shù)方案，各具特色。從開發(fā)者的角度來看，PWA具有廣泛的瀏覽器支持、跨平臺能力和成熟的Web開發(fā)生態(tài)系統(tǒng)。小程序則在流量入口、應(yīng)用商店支持和與硬件集成方面表現(xiàn)突出。

2.6 小結(jié)

PWA 是一種先進的理念和技術(shù)探索，但理念并不能直接演變成競爭優(yōu)勢?，F(xiàn)在是2023年了，推廣和應(yīng)用成本更低的PWA仍然活在小程序陰影下，看起來仍然沒法撼動應(yīng)用開發(fā)的現(xiàn)狀。除了國內(nèi)各平臺的強勢影響力和平臺審核因素外，PWA仍然存在一些明顯缺點。PWA是一個基于瀏覽器的web端技術(shù)，相較于native APP的各項系統(tǒng)級功能明顯不足，比如無法做硬件層面的調(diào)用；在動畫、渲染等方面性能也明顯弱于native APP；大計算量處理和音視頻方面也都是弱項。

那么，如果PWA 要獲得更加廣泛的應(yīng)用，優(yōu)先級最高的突破點在哪里呢？

【參考資料與關(guān)聯(lián)閱讀】

• Dean Hume，Manning，“Progressive Web Apps”
• https://web.dev/blog
• https://segmentfault.com/a/1190000041729491
• https://developer.mozilla.org/zh-CN/docs/Web/Progressivewebapps
• https://zhuanlan.zhihu.com/p/598814908
• https://blog.51cto.com/u_15147537/5631116
• https://blog.bitsrc.io/what-is-a-pwa-and-why-should-you-care-388afb6c0bad
• https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
• http://blueskyawen.com/2019/02/15/PWA-and-service-worker-in-angular/
• https://developers.google.com/web/progressive-web-apps/
• https://www.w3.org/TR/push-api/
• https://w3c.github.io/manifest/
• https://html.spec.whatwg.org/multipage/#dom-worker
• https://www.w3.org/TR/service-workers/