跳至內容

漸進式網絡應用程式

維基百科，自由的百科全書
PWA 標誌

漸進式網頁應用程式（PWA，亦作 progressive web app）是一種網頁應用程式，可以作為獨立的應用程式安裝於裝置上。[1] PWA 是透過裝置的網頁瀏覽器之離線快取機制進行安裝的。[2]

PWA 自 2016 年起被提出，作為原生（針對特定裝置開發）應用程式的替代方案，其優勢在於無需為不同平台分別打包或發佈。它們可在多種系統上使用，包括桌上型電腦與流動裝置。是否將其發佈至數位發行平台（例如 Apple App Store、Google Play 或 Windows 的 Microsoft Store）屬於使用者的選擇。[2]

由於 PWA 以網頁或網站形式呈現，並使用常見之網頁技術建構，包括 HTML、CSS、JavaScript 及 WebAssembly，[3]因此它可以在任何支援 PWA 的瀏覽器之平台上運作。至 2021 年止，PWA 的功能已被若干主流瀏覽器不同程度地支援，包括 Google Chrome、Apple Safari、Brave、Firefox for Android 與 Microsoft Edge，[4][5]但尚未被Firefox 桌面版支援。[6]

歷史

[編輯]

前身

[編輯]

在 2007 年的 Apple 全球開發者大會上，Steve Jobs 宣布 iPhone 將「運行以 Web 2.0 互聯網標準所建立的應用程式」。[7] 此架構無需軟件開發套件（SDK），應用程式將透過 Safari 瀏覽器引擎完整整合於裝置之中。[8] 然而，該模式後來轉向透過 App Store 發佈，以安撫感到受限的開發者社群。[9] Jobs 於 2007 年 10 月宣布，隔年將推出 SDK。[8] 因此，雖然 Apple 持續支援網頁應用程式，但絕大多數 iOS 應用程式最終仍轉向 App Store 架構。

自 2010 年代初期起，動態網頁允許開發者使用網頁技術建立互動式的網頁應用程式。響應式網頁設計及其提供的彈性螢幕尺寸，使 PWA 開發變得更為可行。同時 HTML、CSS 及 JavaScript 的持續強化，讓網頁應用程式得以具備更高程度的互動性，進而實現類似原生應用程式的體驗。[10]

2013 年，Mozilla 發布了Firefox OS。該系統旨在成為一款開源的作業系統，可讓網頁應用程式以原生應用形式在流動裝置上執行。Firefox OS 以Gecko 排版引擎為基礎，並配備使用 HTML5 撰寫的 Gaia 使用者介面。Firefox OS 的開發於 2016 年結束，[11] 並於 2017 年完全終止，[12] 但其分支版本仍被用作 KaiOS 的基礎，該系統是一種功能型手機平台。[13]

初始引進

[編輯]

在2015年，設計師 Frances Berriman 與 Google Chrome 工程師 Alex Russell 創造了「漸進式網頁應用程式」（Progressive Web Apps，簡稱 PWA）這個詞彙，[14] 用以描述利用現代瀏覽器所支援的新功能（包含 服務工作者 和 網頁應用程式清單）的應用，讓使用者能夠將網頁應用程式升級為在原生 operating system（作業系統）中運行的漸進式網頁應用程式。接着，Google 對 Android 平台的 PWA 開發投入大量推廣工作。[15][16] Firefox 於2016年開始支援服務工作者，而 Microsoft Edge 與 Apple Safari 則於2018年跟進，[17][15] 使服務工作者可以在所有主要系統上工作。

到了2019年，部分瀏覽器的桌面版本開始支援 PWA，包括 Microsoft Edge[18]（在 Windows）以及 Google Chrome[19]（在 Windows、macOS、ChromeOS 及 Linux 上）。

在2020年12月，Firefox 桌面版放棄了 PWA 的實作（特別是移除了作為實驗性功能存在的「site-specific browser」原型設定）。一名 Firefox 架構師指出：「我希望我們傳達的訊號是，PWA 支援短期內不會來到桌面版 Firefox。」[6] Mozilla 仍支援 Android 平台的 PWA，並計劃繼續支持。[20][21]


瀏覽器支援統整表格

[編輯]
瀏覽器 支援情況 備註
Windows macOS Linux Android iOS & iPadOS
基於 Chromium 的瀏覽器 是 是 是 是 不適用 包含 Google Chrome、Microsoft Edge、[18] Brave、Opera、Vivaldi，[22] 以及其他 基於 Chromium 的瀏覽器。
Firefox 否 [6] 否 [6] 否 [6] 部份 否
Safari 不適用 部份 [23] 不適用 不適用 部份 [24]


特色

[編輯]

漸進式網頁應用程式（PWA）都設計成能在任何符合適當網頁標準的瀏覽器上運作。與其他跨平台解決方案相同，目標是幫助開發者比起建立原生應用程式更輕鬆地建立跨平台應用程式。[15] 漸進式網頁應用程式採用漸進式增強的網頁開發策略。

有些漸進式網頁應用程式採用一種稱為應用殼模型（App Shell Model）的架構方法。[25] 在此模型中，開發者會將 響應式網頁設計 應用程式的基本使用者介面或稱「殼層」存放在瀏覽器的離線快取中。此模型允許 PWA 在有無網絡連線時皆維持類似原生應用的使用體驗。這可透過提供一個「初始靜態框架」（initial static frame，一種能夠讓內容逐步以及動態地載入的架構）來加快載入的速度。[26]

技術標準

[編輯]

Russell 在2016年描述了網站要被視為漸進式網頁應用程式（並可被瀏覽器安裝）所需的技術基準條件，[27] 並隨後持續更新：[28][29]

  • 起源必須為安全來源。必須透過 TLS 服務且沒有混合內容。PWA 必須使用 HTTPS 以確保用戶私隱、安全性與內容真實性。
  • 必須註冊一個帶有 fetch 處理器的服務工作者。PWA 必須利用服務工作者建立可程式化的內容快取。不同於一般 HTTP web cache（在首次使用後快取內容，並用各種啟發式方法判斷內容何時不再需要），可程式化快取能在內容首次使用「之前」明確地預取內容，且在不再需要時明確丟棄。[30] 這個要求有助於頁面在離線或低品質網絡狀態下仍可使用。
  • 必須參考網頁應用程式 清單。清單至少要包含五個關鍵屬性：name 或 short_name、start_url、display（值為 standalone、fullscreen 或 minimal-ui）、以及 icons（包含192 px與512 px兩種尺寸版本）。清單中的資訊使 PWA 可透過 URL 輕鬆分享、可被搜尋引擎發現，並簡化複雜的安裝程序（但 PWA 仍可能被列在第三方app store中）。[31] 此外，PWA 支援類原生應用的互動和導航，包括可加入主畫面、顯示啟動畫面等功能。

技術

[編輯]

建立漸進式網頁應用程式常用許多技術。若一個網頁應用符合安裝標準，能離線運作並能被加入裝置主畫面，即可視為 PWA。要符合這些定義，所有 PWA 最少需要有清單(manifest)與服務工作者(service worker)。[32][33][34] 其他技術則用來儲存資料、與伺服器通訊或執行程式碼。

Manifest

[編輯]

網頁應用程式清單（web app manifest）[35] 是由 萬維網聯盟（W3C）制定的一項規範，定義了一種基於 JSON 的清單格式（通常標示為 manifest.json）[31]，供服務工作者（Service worker）將與網頁應用程式相關的 元資料 集中管理，包含：

  • 網頁應用程式的名稱
  • 網頁應用程式圖示或圖片物件的連結
  • 啟動或開啟網頁應用程式的首選 URL
  • 網頁應用程式的設定資料
  • 網頁應用程式的預設畫面方向
  • 設定顯示模式的選項，例如全螢幕

這些元資料對於應用程式能夠加入主畫面或被列為與原生應用程式並列的項目至關重要。

iOS 支援

[編輯]

iOS Safari 瀏覽器對 manifest 不完全支援，但大部分的 PWA 元資料可以透過蘋果專用的 meta 標籤擴充定義。這些標籤允許開發者啟用全螢幕顯示、定義圖示與啟動畫面（splash screen）、並指定應用程式名稱。[36][37]

Service workers

[編輯]

服務工作者（service worker）是一種 web worker，實作了一個可程式化的網絡代理，可以回應主文件發出的網絡／HTTP 請求。它能夠檢查遠端伺服器的可用性，在伺服器可用時快取內容，並於後續提供給文件使用。服務工作者與主文件執行緒分離運作。服務工作者可處理 推播通知、背景資料同步、快取或取回資源請求、攔截網絡請求，並且能在註冊它們的文件尚未載入時獨立接收集中更新。[38]

服務工作者經歷三個階段的生命週期：註冊（Registration）、安裝（Installation）與啟用（Activation）。註冊是告訴瀏覽器服務工作者的位置，為安裝做準備。安裝發生在瀏覽器尚無此服務工作者，或發現服務工作者有更新時。啟用發生在 PWA 的所有頁面都關閉後，以避免舊版本與新版本衝突。此生命週期設計也有助於保持版本切換的一致性，因為同一網域同時只能有一個活動中的服務工作者。[38]

WebAssembly

[編輯]
主條目：WebAssembly

WebAssembly 允許 預編譯 的程式碼在瀏覽器中以近乎原生的速度執行。[39] 因此，像是 C 這類語言寫成的函式庫可以被加入網頁應用程式中。WebAssembly 於 2015 年宣布，2017 年 3 月首次釋出，並於 2019 年 12 月 5 日成為 W3C 推薦標準（W3C Recommendation）。[40][41] 並於 2021 年獲得 程式語言軟件獎（Programming Languages Software Award），該獎項由 美國計算機協會（ACM）SIGPLAN 頒發。[42]


資料儲存

[編輯]

漸進式網頁應用程式（Progressive Web App，PWA）的執行環境可能會在某些情況下被卸載，因此 PWA 需要以以下其中一種方式來儲存大部分的長期內部狀態（使用者資料、動態載入的應用資源）：

網頁儲存 (Web Storage)：Web Storage 是 W3C 的標準 API，允許在現代瀏覽器中進行鍵值儲存。此 API 包含兩個物件，sessionStorage（提供只在會話期間有效，瀏覽器會話結束時清除的儲存空間）和 localStorage（提供跨會話持久儲存空間）。[43]

索引資料庫 API (Indexed Database API)：Indexed Database API 是一個 W3C 標準的資料庫 API，在所有主要瀏覽器中都可使用。此 API 受現代瀏覽器支援，能夠儲存 JSON 物件及任何可表示為字串的結構。[44] Indexed Database API 也可以搭配封裝庫（wrapper library）使用，以提供更多結構化功能。

與原生應用程式的比較

[編輯]

2017 年，Twitter 推出 Twitter Lite，一款作為官方原生 Android 和 iOS 應用程式的 PWA 替代方案。根據 Twitter 表示，Twitter Lite 的大小僅佔原生應用程式的 1–3%。[45] Starbucks 提供的 PWA 比其 iOS 應用程式小了 99.84%。部署 PWA 後，Starbucks 在線訂單數量增加了一倍，桌面使用者的訂單率約與手機應用程式使用者相同。[46]

2018 年由 Forbes 發表的評論發現，Pinterest 的 PWA 使用者在網站上的停留時間比之前的行動網站多了 40%。廣告收益率也提升了 44%，核心互動量增加了 60%。[47] Flipkart 發現有 60% 卸載原生應用程式的用戶會回來使用 Flipkart PWA。Lancôme 的 PWA 讓頁面可互動的時間縮短了 84%，轉換率提升了 17%，iOS 流動裝置上的瀏覽量增加了 53%。[48]

透過應用程式商店發佈

[編輯]

由於 PWA 不需要針對不同平台分別打包或發佈，且使用者可以透過網頁直接取得，因此開發者不需要透過像 Apple App Store、Google Play、Microsoft Store 或 Samsung Galaxy Store 等數位發行平台來發佈。主要的應用商店對於 PWA 的支援程度各有不同。[2] Google Play、Microsoft Store、[49] 和 Samsung Galaxy Store 支援 PWA，但 Apple App Store 不支援。Microsoft Store 會自動（甚至未經應用程式作者申請）發佈部分符合條件的 PWA，這是透過 Bing 索引所發現的結果。[50]

參見

[編輯]

參考資料

[編輯]
  1. ^ What are Progressive Web Apps? PWA Guide for Beginners. freeCodeCamp.org. 2024-01-18 [2024-05-06] （英語）. 
  2. ^ 2.0 2.1 2.2 Progressive Web Apps | Software AG. techradar.softwareag.com. [2020-09-25]. 
  3. ^ Ltd, Cybellium. Mastering Front-end development. Cybellium Ltd. : 273. ISBN 979-8-8668-4882-9 （英語）. 
  4. ^ Can I use pwa?. CanIUse. [27 January 2021]. 
  5. ^ Is Service Worker Ready?. Jake Archibald. 
  6. ^ 6.0 6.1 6.2 6.3 6.4 Newman, Jared. Firefox just walked away from a key piece of the open web. Fast Company. 2021-01-26 [2021-01-27] （美國英語）. 
  7. ^ Jobs, Steve; Apple. iPhone to Support Third-Party Web 2.0 Applications. Apple. 11 June 2007 （英語）. 
  8. ^ 8.0 8.1 Ritchie, Rene. App Store Year Zero: Unsweet web apps drove iPhone to an SDK. iMore. 5 March 2018 [23 May 2019] （英語）. 
  9. ^ Jobs' original vision for the iPhone: No third-party native apps. 9to5Mac. 21 October 2011 [22 May 2019]. 
  10. ^ Marcotte, Ethan. Responsive Web Design. A List Apart. 25 May 2010 [May 25, 2010]. 
  11. ^ Mozilla ends commercial Firefox OS development - gHacks Tech News. gHacks Technology News. 2016-09-27 [2022-05-05] （美國英語）. 
  12. ^ Hoffman, Chris; PCWorld |. Mozilla is stopping all commercial development on Firefox OS. PCWorld. 2016-09-28 [2021-03-17] （英語）. 
  13. ^ KaiOS, a feature phone platform built on the ashes of Firefox OS, adds Facebook, Twitter and Google apps. TechCrunch. 26 February 2018 [2021-03-17] （美國英語）. 
  14. ^ Russell, Alex. Progressive Web Apps: Escaping Tabs Without Losing Our Soul. [June 15, 2015]. 
  15. ^ 15.0 15.1 15.2 Evans, Jonny. Apple goes back to the future with web apps. Computerworld. 26 January 2018 [23 May 2019] （英語）. 
  16. ^ Ladage, Aaron. Progressive Web Apps Are Here and They're Changing Everything. DEG. 17 April 2018 [23 May 2019]. 
  17. ^ Can I use... Support tables for HTML5, CSS3, etc. caniuse.com. [2021-05-16]. 
  18. ^ 18.0 18.1 Progressive Web Apps on Windows overview. Microsoft Edge Documentation. 13 March 2021 [13 March 2021] （英語）. 
  19. ^ LePage, Pete. Progressive Web Apps on Desktop. Google Developers. 4 June 2019 [13 September 2019] （英語）. 
  20. ^ eBay PWA. Mozilla. [25 December 2024]. 
  21. ^ agi90. Comment. Reddit. 19 December 2020. We have no plans of sunsetting PWAs on mobile that I know of. 
  22. ^ Get your PWA on. Vivaldi Browser. 2021-10-07 [2021-10-11] （英語）. 
  23. ^ Angle, Patrick; Avenard, Jean-Yves; Caceres, Marcos; Cannon, Ada Rose; Carlson, Eric; Davidson, Garrett; Davis, Jon; Dubost, Karl; Eidson, Brady. News from WWDC23: WebKit Features in Safari 17 beta. WebKit. 2023-06-06 [2023-06-14]. 
  24. ^ Angle, Patrick; Caceres, Marcos; Caliman, Razvan; Davis, Jon; Eidson, Brady; Hatcher, Timothy; Niwa, Ryosuke; Simmons, Jen. WebKit Features in Safari 16.4. WebKit. 2023-03-27 [2023-06-14]. 
  25. ^ The App Shell Model. 
  26. ^ Osmani, Addi. The App Shell Model | Web Fundamentals. Google Developers. [23 May 2019] （英語）. 
  27. ^ Russell, Alex. What, Exactly, Makes a Progressive Web App. [October 18, 2016]. 
  28. ^ What does it take to be installable?. web.dev. [2021-05-19] （英語）. 
  29. ^ Progressive Web App. web.dev. [June 15, 2015]. 
  30. ^ Service worker caching and HTTP caching. web.dev. [2021-05-19] （英語）. 
  31. ^ 31.0 31.1 W3C "Web App Manifest", Working Draft, retrieved 12 September 2016.
  32. ^ Discoverable. Mozilla Developer Network. [2017-04-24] （美國英語）. 
  33. ^ Network independent. Mozilla Developer Network. [2017-04-24] （美國英語）. 
  34. ^ Instant Loading Web Apps with an Application Shell Architecture. Google Developers. [2017-04-24] （英語）. 
  35. ^ Web Manifest Docs on MDN. MDN Web Docs. 
  36. ^ What's new on iOS 12.2 for Progressive Web Apps. Medium. 27 March 2019. 
  37. ^ Configuring Web Applications. Safari Web Content Guide. 
  38. ^ 38.0 38.1 Introduction to Service Worker | Web. Google Developers. 1 May 2019 [23 May 2019] （英語）. 
  39. ^ WebAssembly Concepts. MDN. [14 August 2018]. 
  40. ^ World Wide Web Consortium. WebAssembly Core Specification. World Wide Web Consortium (W3). [2024-05-06]. 
  41. ^ WebAssembly 1.0 Becomes a W3C Recommendation and the Fourth Language to Run Natively in Browsers. InfoQ. [2024-05-06] （英語）. 
  42. ^ Programming Languages Software Award. www.sigplan.org. [2024-05-06]. 
  43. ^ Web Storage API. MDN. [14 August 2018]. 
  44. ^ Concepts behind IndexedDB. MDN. [14 August 2018]. 
  45. ^ Shankland, Stephen. Twitter's app is helping stop phones from strangling the web. CNET. 30 July 2020 [11 February 2023]. 
  46. ^ 12 Best Examples of Progressive Web Apps (PWAs) in 2021. SimiCart. 2021-02-22 [2021-05-16] （美國英語）. 
  47. ^ Osmani, Addy. A Pinterest Progressive Web App Performance Case Study. ChromiumDev team. 30 November 2017 [10 February 2023]. 
  48. ^ Gazdecki, Andrew. Why Progressive Web Apps Will Replace Native Mobile Apps. Forbes. 9 March 2018 [10 February 2023]. 
  49. ^ MSEdgeTeam. Publish your Progressive Web App to the Microsoft Store - Microsoft Edge Development. docs.microsoft.com. [2021-05-16] （美國英語）. 
  50. ^ The first batch of Windows 10 Progressive Web Apps is here. Windows Central. 2018-04-07 [2021-05-16]. 

外部連結

[編輯]
取自 "https://zh.wikipedia.org/w/index.php?title=渐进式网络应用程序&oldid=87617886"