跳转到内容

渐进式网络应用程序

维基百科，自由的百科全书
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”