早在2015年,設計師弗朗西斯·貝里曼和Google Chrome的工程師亞歷克斯·羅素提出“PWA(漸進式網絡應用程序)”概念,將網絡之長與應用之長相結合,其核心目標就是提升 Web App 的性能,改善 Web App以媲美Native的流暢體驗。
PWA 不是一個框架或工具集,而是一個概念,是開發人員需要在應用程序中實現的一組功能,以便將應用程序的用戶體驗提升到一個新的水平上。如果說某網站在某種程度上是 PWA,那它滿足的 PWA 功能清單中的特性越多,它就越接近這個概念。
PWA是一類Web應用程序的統稱,通過高級Web功能使Web應用程序的行為和表現像本地應用程序一樣。PWA 可以通過一個代碼庫在多個平臺和多個設備上運行,像一個特定平臺的應用程序那樣,可以安裝在設備上,可以離線和在后臺運行,并且可以與設備和其他已安裝的應用程序集成。
PWA能夠重用現有代碼以提供服務體驗。基于其他的跨平臺技術,往往需要一次性將適配于各種設備和平臺的應用程序部署到所有商店,PWA與之有極大的不同,本質上是提供類似于原生應用程序的用戶體驗的網站。PWA受歡迎的原因之一是它能夠滿足所有面向移動網絡的設備需求,同時節省了應用創建和維護的投資成本。
簡單而言,一個 PWA 應用首先是一個網頁, 是通過 Web 技術編寫出的一個網頁應用,隨后通過App Shell 架構添加上 Manifest 實現添加至設備主屏幕, 在通過 Service Worker 來實現離線緩存和消息推送等功能。
圖片
歸納而言,PWA 應用中有兩項關鍵技術:基于Manifest的App Shell 架構和Service worker運行機制。
App Shell 架構是構建 PWA 應用的一種方式,能即時可靠且地將PWA加載到用戶屏幕上,從而與本機應用相似。
作為一種PWA的構建方式,App Shell架構提供了一個最基本的 Web App 框架,包括應用的頭部、底部、菜單欄等結構。App Shell 架構通常使用JavaScript框架(如React或Angular)來實現,可以是一種構建單頁面應用(SPA)的方法,它將邏輯與實際內容分離開來。
App Shell 架構涉及緩存靜態資源,然后使用JavaScript動態加載實際內容,是一個能夠支持用最小化HTML/CSS/JS用戶界面集合的可緩存UI框架。如果有離線緩存,可確保在用戶重復訪問時提供即時、可靠的良好性能。這樣一來,用戶重復打開應用時就能迅速地看到 Web App 的基本界面,只需要從網絡中請求、加載必要的內容。這也意味著并不是每次用戶訪問時都要從網絡加載 App Shell,而只需要從網絡中加載必要的內容。???App Shell 是通過瀏覽器中的Web runtime?完成的web 應用與當前設備平臺的交互,尤其是在當前設備的屏幕上增加應用的啟動入口。?Web Application Manifest,即通過一個清單文件向瀏覽器暴露 web 應用的元數據,包括名稱、icon 的 URL 等,以備瀏覽器使用,比如在添加至主屏或推送通知時暴露給操作系統,從而增強 web 應用與操作系統的集成能力。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應用程序時,瀏覽器會按照manifest.json文件的內容對應用程序進行注冊與安裝,以便隨時在離線狀態下訪問。
對于使用包含大量 JavaScript 的架構的單頁面應用來說,基于Manifest 的 App Shell 適用于在沒有網絡的情況下將一些初始 HTML 快速加載到屏幕上。
圖片
Service worker是 web技術中worker 的一種,那么,什么是worker呢?
由于Javascript 的單線程特性,任何“重量”操作都會阻塞主線程。為了提升性能和體驗,現代瀏覽器使用worker 作為一種多線程機制,把原本的單線程應用變成多線程運行。現代瀏覽器中提供了 3 種 Worker,分別是:
關于service worker 的主要內容,下圖給出了核心提示:
圖片
在Service Worker安裝期間預加載文件。對于SPA,這通常包括我們之前討論的“應用程序外殼”,而簡單的靜態網站可能會選擇預加載所有HTML、CSS和JavaScript,以確保離線時基本功能得到維護。處理推送通知,類似于本機應用程序。這意味著網站可以獲得用戶的許可來發送通知,然后依靠Service Workers接收消息并執行消息,即使瀏覽器關閉。.
目前,不同的瀏覽器廠商使用了不同的Push Service,chrome使用了自家的FCM,firefox也是使用自家的服務,不同push服務遵循共同的Web Push協議,具有標準的調用方式。
圖片
其中,“UA”就是我們的用戶客戶端,也就是瀏覽器;“Application Server”是后端服務;“Push Service”作為中間代理商,扮演著核心角色。Push Service接收客戶端的消息訂閱,維護管理“客戶端url-公鑰”對的列表,并將訂閱和私鑰信息發送給服務器進行存儲;此外,它后續還得接收服務端的推送消息,校驗并發送給對象的客戶端進行展示。
Push Service還有一個非常重要的功能:當用戶離線時,可以幫我們保存消息隊列,直到用戶聯網后再發送給他們。
Notification通知的功能與消息push類似,但更為簡單,只要設置好通知消息,調用service worker的相同通知接口即可,甚至可以可以帶操作,
后臺同步也是Service Worker的一個子功能,用于在終端弱網或無王情況下同步后臺的數據或繼續前端的請求消息由于service worker在瀏覽器關閉后仍然運行著,所以即使用戶沒有網絡或關閉客戶端,service worker仍會存儲相應的請求,并在有可用網絡連接時發起數據同步。
Google 給出的 PWA 應用特性如下:
PWA 應用主要功能特點如下:
漸進式web應用程序(PWA)框架簡單可靠,開發人員可以使用不同的來開發PWA,常見的開發工具框架如下:
對于軟件生態而言,PWA確實對一些傳統的應用軟件和開發方式帶來了一定的沖擊和改變。
對于一些開發商而言,PWA技術的出現意味著需要考慮在Web端進行應用開發,并為用戶提供更好的Web應用體驗。但同時,PWA的開發方式也使得他們可以更加靈活地進行應用開發,并且減少了一些原生應用的開發和發布成本。
PWA技術的出現可能會對應用商店造成一定的沖擊,因為PWA可以通過瀏覽器直接訪問,不需要下載和安裝,這可能會導致一些應用商店用戶流失。但是,應用商店也可以通過采取措施,例如推出PWA應用、提供更好的應用變現機會等來應對這種變化。
對于用戶而言,PWA技術的出現可能會提供更好的Web應用體驗,例如離線訪問、桌面快捷方式、推送通知等功能,同時也可以減少一些應用的下載和安裝成本。但是,用戶也需要考慮PWA應用在一些方面可能相對于原生應用和小程序存在的較多局限性和不足。
PWA技術對于應用軟件開發商、應用商店和用戶都可能會產生一定的影響,但是它并不會完全顛覆原有的開發和使用方式。PWA的優點和缺點都是相對的,不同的應用場景和開發需求會影響開發者對PWA和原生應用的選擇。如果應用的功能、性能和用戶體驗要求較高,可以考慮原生應用;如果希望對開發和維護成本進一步降低,但又擁有app的一些特征,可以考慮使用PWA。
各種類型的小程序都或多或少地繼承或借鑒了PWA的技術理念,可以認為PWA是各種小程序的源頭之一。
圖片
依托于超級App,微信、百度、支付寶等公司都推出了各自的小程序。歸納而言,小程序采用了輕量級的框架和組件,加載速度快,用戶可以迅速打開應用程序。小程序能夠與設備的硬件功能(如攝像頭、定位、陀螺儀等)進行原生集成,提供更豐富的功能和用戶體驗。通過應用商店進行分發,用戶可以方便地搜索、發現和安裝小程序。小程序開發使用統一的開發工具和語言,在一定程度上減少了開發者的學習成本。另外小程序可以共享用戶數據,提供更便捷的登錄和數據傳輸。
PWA可以在幾乎所有現代瀏覽器上運行,具有廣泛的設備和平臺支持。開發者可以充分利用現有的Web開發知識和工具,龐大的開發者社區來提供豐富的資源、工具和支持。小程序可以通過超級App作為流量入口,也可以運行在企業自有App中,任何企業的App只需要通過集成小程序運行時SDK,即可獲得小程序運行能力,讓小程序擁有了更多分發渠道。小程序生態系統提供了數據分析和統計工具,幫助開發者了解用戶行為、應用性能和使用情況。開發者可以通過這些工具獲取關鍵指標和數據,進行數據驅動的優化和改進。這些工具提供了可視化的報表和圖表,幫助開發者更好地理解用戶行為和應用運行情況。
圖片
PWA和小程序都是當前移動應用開發領域的熱門技術方案,各具特色。從開發者的角度來看,PWA具有廣泛的瀏覽器支持、跨平臺能力和成熟的Web開發生態系統。小程序則在流量入口、應用商店支持和與硬件集成方面表現突出。
PWA 是一種先進的理念和技術探索,但理念并不能直接演變成競爭優勢。現在是2023年了,推廣和應用成本更低的PWA仍然活在小程序陰影下,看起來仍然沒法撼動應用開發的現狀。除了國內各平臺的強勢影響力和平臺審核因素外,PWA仍然存在一些明顯缺點。PWA是一個基于瀏覽器的web端技術,相較于native APP的各項系統級功能明顯不足,比如無法做硬件層面的調用;在動畫、渲染等方面性能也明顯弱于native APP;大計算量處理和音視頻方面也都是弱項。
那么,如果PWA 要獲得更加廣泛的應用,優先級最高的突破點在哪里呢?
本文鏈接:http://www.tebozhan.com/showinfo-26-5721-0.html穿上App外衣,保持Web靈魂——PWA溫故
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 提升Go的HTTP路由器的提案
下一篇: 提高虛擬機游戲性能指南