Progressive web app: Difference between revisions

Content deleted Content added
Browser support: Firefox supports many of the Technologies listed below on the page on all platforms
redundant and obvious
Tags: Visual edit Mobile edit Mobile web edit Advanced mobile edit
 
(65 intermediate revisions by 52 users not shown)
Line 1:
{{Short description|Specific form of single page web application}}
[[File:Progressive Web Apps Logo.svg|thumb|PWA logoLogo]]
A '''progressive web application''' ('''PWA'''), or '''progressive web app''', is a type of [[web app]] that can be installed on a device as a standalone [[application software|application]].<ref>{{Cite web |date=2024-01-18 |title=What are Progressive Web Apps? PWA Guide for Beginners |url=https://www.freecodecamp.org/news/what-are-progressive-web-apps-pwa-guide/ |access-date=2024-05-06 |website=freeCodeCamp.org |language=en}}</ref> PWAs are installed using the offline cache of the device's [[web browser]].<ref name=":0">{{Cite web|title=Progressive Web Apps {{!}} Software AG|url=https://techradar.softwareag.com/technology/progressive-web-apps/|access-date=2020-09-25|website=techradar.softwareag.com}}</ref>
A '''progressive web application''' ('''PWA'''), or '''progressive web app''', is a type of [[application software]] delivered through the [[World Wide Web|web]], built using common web technologies including [[HTML]], [[Cascading Style Sheets|CSS]], [[JavaScript]], and [[WebAssembly]]. It is intended to work on any platform with a standards-compliant [[web browser|browser]], including [[Desktop computer|desktop]] and [[mobile device]]s.
 
SincePWAs awere progressiveintroduced webfrom app2016 isas aan typealternative ofto [[webpageNative (computing)|native]] or(device-specific) [[website]]applications, knownwith asthe aadvantage [[web application]],that itthey doesdo not require separate bundling or distribution for different platforms. DevelopersThey can simplybe publishused theon weba applicationrange online,of ensuredifferent thatsystems, itincluding meets[[Desktop baseline installation requirementscomputer|desktop]] and that users will be able to add the application to their [[homemobile screendevice]]s. Publishing the app to digital distribution systems, likesuch as the [[App Store (iOS/iPadOS)|Apple App Store]] or, [[Google Play]], or the [[Microsoft Store]] on Windows, is optional.<ref name=":0"/>{{Cite web|title=Progressive Web Apps {{!}} Software AG|url=https://techradar.softwareag.com/technology/progressive-web-apps/|access-date=2020-09-25|website=techradar.softwareag.com}}</ref>
 
Because a PWA is delivered in the form of a [[webpage]] or [[website]] built using common web technologies including [[HTML]], [[Cascading Style Sheets|CSS]], [[JavaScript]], and [[WebAssembly]],<ref>{{Cite book |last=Ltd |first=Cybellium |url=https://books.google.com/books?id=xbbnEAAAQBAJ&dq=Progressive+web+app+is+intended+to+work+on+any+platform+with+a+standards-compliant+browser,+including+desktop+and+mobile+devices.&pg=PA273 |title=Mastering Front-end development |publisher=Cybellium Ltd |isbn=979-8-8668-4882-9 |pages=273 |language=en}}</ref> it can work on any platform with a PWA-compatible browser. As of 20212025, PWA features are supported to varying degrees by [[Google Chrome]], [[Safari (web browser)|Apple Safari]], [[Brave (web browser)|Brave]], [[Firefox for Android]], and [[Microsoft Edge]]<ref name="CanIUsePWA">{{cite web|last=|first=|date=|title=Can I use pwa?|url=https://caniuse.com/#search=pwa|url-status=live|archive-url=|archive-date=|access-date=27 January 2021|website=CanIUse}}</ref><ref name="IsServiceWorkerReady">{{cite web |title=Is Service Worker Ready? |url=https://jakearchibald.github.io/isserviceworkerready/ |publisher=Jake Archibald}}</ref> but not by [[Firefox]] for desktop.<ref name="firefox-desktop" />
 
==History==
=== Predecessors ===
At the launch ofApple's [[iPhone|theWorldwide iPhoneDevelopers Conference]] in 2007, [[Steve Jobs]] announced that web apps (developed inthe [[HTML5iPhone]] usingwould [[AJAX]]"run architecture)applications wouldcreated bewith theWeb standard2.0 formatInternet forstandards".<ref>{{Cite web|last1=Jobs|first1=Steve|last2=Apple|date=11 June 2007|title=iPhone appsto Support Third-Party Web 2.0 Applications|url=https://www.apple.com/newsroom/2007/06/11iPhone-to-Support-Third-Party-Web-2-0-Applications/|website=Apple|language=en}}</ref> No [[software development kit]] (SDK) was required, and the apps would be fully integrated into the device through the [[Safari (web browser)|Safari]] [[browser engine]].<ref name="iMore March 2019">{{cite web |last1=Ritchie |first1=Rene |title=App Store Year Zero: Unsweet web apps drove iPhone to an SDK |url=https://www.imore.com/history-app-store-year-zero |website=iMore |access-date=23 May 2019 |language=en |date=5 March 2018}}</ref> This model was later switched to the [[App Store (Apple)|App Store]], as a means of confounding [[IOS jailbreaking|jailbreakers]] and appeasing frustrated developers.<ref name="9to5Mac 2011">{{cite web |title=Jobs' original vision for the iPhone: No third-party native apps |url=https://9to5mac.com/2011/10/21/jobs-original-vision-for-the-iphone-no-third-party-native-apps/ |website=9to5Mac |access-date=22 May 2019 |date=21 October 2011}}</ref> In October 2007 Jobs announced that an SDK would be launched the following year.<ref name="iMore March 2019" /> As a result, although Apple continued to support web apps, the vast majority of iOS applications shifted toward the App Store.
 
Beginning in the early 2010s [[dynamic web page]]s allowed web technologies to be used to create interactive [[web application]]s. [[Responsive web design]], and the screen-size flexibility it provides, have made PWA development more accessible. Continued enhancements to HTML, CSS, and JavaScript allowed web applications to incorporate greater levels of interactivity, making native-like experiences possible on a website.<ref>{{cite web|url=http://alistapart.com/article/responsive-web-design|title=Responsive Web Design|ref=2|last1=Marcotte|first1=Ethan|access-date=May 25, 2010|archive-date=January 29, 2016|work=[[A List Apart]]|date=25 May 2010 }}</ref>
 
In 2013, Mozilla released [[Firefox OS]]. It was intended to be an [[open-source]] [[operating system]] for running web apps as native apps on mobile devices. Firefox OS was based on the [[Gecko (software)|Gecko]] rendering engine with a user interface called Gaia, written in HTML5. The development of Firefox OS ended in 2016,<ref>{{Cite web |date=2016-09-27 |title=Mozilla ends commercial Firefox OS development - gHacks Tech News |url=https://www.ghacks.net/2016/09/27/mozilla-ends-commercial-firefox-os-experiment/ |access-date=2022-05-05 |website=gHacks Technology News |language=en-US}}</ref> and the project was completely discontinued in 2017,<ref>{{Cite web|last1=Hoffman|first1=Chris|last2=PCWorld {{!}}|date=2016-09-28|title=Mozilla is stopping all commercial development on Firefox OS|url=https://www.pcworld.com/article/3124563/mozilla-is-stopping-all-commercial-development-on-firefox-os.html|access-date=2021-03-17|website=PCWorld|language=en}}</ref> although a fork of Firefox OS was used as the basis of [[KaiOS]], a [[feature phone]] platform.<ref>{{Cite web|title=KaiOS, a feature phone platform built on the ashes of Firefox OS, adds Facebook, Twitter and Google apps|url=https://social.techcrunch.com/2018/02/26/kaios-a-feature-phone-platform-built-on-the-ashes-of-firefox-os-adds-facebook-twitter-and-google-apps/|access-date=2021-03-17|website=TechCrunch|date=26 February 2018 |language=en-US}}</ref>
 
=== Initial introduction ===
In 2015, designer Frances Berriman and [[Google Chrome]] engineer Alex Russell coined the term "progressive web apps"<ref name="infrequently.org">{{cite web|last1=Russell|first1=Alex|title=Progressive Web Apps: Escaping Tabs Without Losing Our Soul|url=https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/|access-date=June 15, 2015|ref=4|archive-date=January 29, 2016}}</ref> to describe apps taking advantage of new features supported by modern browsers, including [[web worker|service workers]] and [[Manifest file|web app manifests]], that let users upgrade web apps to progressive web applications in their native [[operating system]] (OS). Google then put significant efforts into promoting PWA development for Android.<ref name="Evans Computerworld Jan 2018" /><ref name="Ladage 2018">{{cite web |last1=Ladage |first1=Aaron |title=Progressive Web Apps Are Here and They're Changing Everything |url=https://www.degdigital.com/insights/progressive-web-apps/ |website=DEG |access-date=23 May 2019 |date=17 April 2018}}</ref> Firefox introduced support for service workers in 2016, and Microsoft Edge and Apple Safari followed in 2018,<ref>{{Cite web|title=Can I use... Support tables for HTML5, CSS3, etc|url=https://caniuse.com/serviceworkers|access-date=2021-05-16|website=caniuse.com}}</ref><ref name="Evans Computerworld Jan 2018">{{cite web |last1=Evans |first1=Jonny |title=Apple goes back to the future with web apps |url=https://www.computerworld.com/article/3251173/apple-goes-back-to-the-future-with-web-apps.html |website=Computerworld |access-date=23 May 2019 |language=en |date=26 January 2018}}</ref> making service workers available on all major systems.
 
By 2019, PWAs were supported by desktop versions of mostsome browsers, including [[Microsoft Edge]]<ref name="edge">{{cite web |title=Progressive Web Apps on Windows overview |url=https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/ |website=Microsoft Edge Documentation |access-date=13 March 2021 |language=en |date=13 March 2021}}</ref> (on [[Microsoft Windows|Windows]]) and [[Google Chrome]]<ref>{{cite web |last1=LePage |first1=Pete |title=Progressive Web Apps on Desktop |url=https://developers.google.com/web/progressive-web-apps/desktop |website=Google Developers |access-date=13 September 2019 |language=en |date=4 June 2019}}</ref> (on Windows, [[macOS]], [[ChromeOS]], and [[Linux]]).
 
In December 2020, Firefox for desktop abandoned the implementation of PWAs (specifically, removed the prototype "[[site-specific browser]]" configuration that had been available as an experimental feature). A Firefox architect noted: "The signal I hope we are sending is that PWA support is not coming to desktop Firefox anytime soon."<ref name="firefox-desktop">{{Cite web|last=Newman|first=Jared|date=2021-01-26|title=Firefox just walked away from a key piece of the open web|url=https://www.fastcompany.com/90597411/mozilla-firefox-no-ssb-pwa-support|access-date=2021-01-27|website=Fast Company|language=en-US}}</ref> Mozilla stillsupports PWAs on Android and plans to supportkeep PWAssupporting on Androidit.<ref>{{Citecite web |last=agi90|datetitle=19eBay DecemberPWA 2020|title=Comment|url=https://wwwbugzilla.redditmozilla.comorg/r/firefox/comments/kg1jb5/firefox_giving_up_on_pwa_support/gge34eg/|url-statusshow_bug.cgi?id=live1933032 |archive-url=|archive-datepublisher=Mozilla |access-date=|website=[[Reddit]]|quote=We25 haveDecember no plans of sunsetting PWAs on mobile that I know of.2024}}</ref>
 
== Browser support ==
Line 26 ⟶ 41:
| {{Yes}}
| {{N/A}}
| Includes [[Google Chrome]], [[Microsoft Edge]],<ref name="edge" /> [[Brave (web browser)|Brave]], [[Opera (web browser)|Opera]], [[Vivaldi (web browser)|Vivaldi]],<ref>{{Cite web|date=2021-10-07|title=Get your PWA on|url=https://vivaldi.com/blog/vivaldi-gets-more-private-delivers-an-all-new-capture-pwa-support/|url-status=live|access-date=2021-10-11|website=Vivaldi Browser|language=en}}</ref> and [[Chromium (web browser)#Browsers based on Chromium|others]].
|-
| [[Firefox]]
| {{PartialYes}} <ref name="firefox-desktop" />
| {{PartialNo}} <ref name="firefox-desktop" />
| {{PartialNo}} <ref name="firefox-desktop" />
| {{Partial}}
| {{No}}
|
|-
| [[Safari (web browser)|Safari]]
| {{N/A}}
| {{Partial}} <ref>{{Cite web |last1=Angle |first1=Patrick |last2=Avenard |first2=Jean-Yves |last3=Caceres |first3=Marcos |last4=Cannon |first4=Ada Rose |last5=Carlson |first5=Eric |last6=Davidson |first6=Garrett |last7=Davis |first7=Jon |last8=Dubost |first8=Karl |last9=Eidson |first9=Brady |date=2023-06-06 |title=News from WWDC23: WebKit Features in Safari 17 beta |url=https://webkit.org/blog/14205/news-from-wwdc23-webkit-features-in-safari-17-beta/ |access-date=2023-06-14 |website=WebKit}}</ref>
| {{N/A}}
| {{N/A}}
| {{Partial}} <ref>{{Cite web |last1=Angle |first1=Patrick |last2=Caceres |first2=Marcos |last3=Caliman |first3=Razvan |last4=Davis |first4=Jon |last5=Eidson |first5=Brady |last6=Hatcher |first6=Timothy |last7=Niwa |first7=Ryosuke |last8=Simmons |first8=Jen |date=2023-03-27 |title=WebKit Features in Safari 16.4 |url=https://webkit.org/blog/13966/webkit-features-in-safari-16-4/ |access-date=2023-06-14 |website=WebKit}}</ref>
|
|}
 
==History==
 
=== Predecessors ===
At the launch of [[iPhone|the iPhone]] in 2007, [[Steve Jobs]] announced that web apps (developed in [[HTML5]] using [[AJAX]] architecture) would be the standard format for iPhone apps. No [[software development kit]] (SDK) was required, and the apps would be fully integrated into the device through the [[Safari (web browser)|Safari]] browser engine.<ref name="iMore March 2019">{{cite web |last1=Ritchie |first1=Rene |title=App Store Year Zero: Unsweet web apps drove iPhone to an SDK |url=https://www.imore.com/history-app-store-year-zero |website=iMore |access-date=23 May 2019 |language=en |date=5 March 2018}}</ref> This model was later switched to the App Store, as a means of confounding [[IOS jailbreaking|jailbreakers]] and appeasing frustrated developers.<ref name="9to5Mac 2011">{{cite web |title=Jobs' original vision for the iPhone: No third-party native apps |url=https://9to5mac.com/2011/10/21/jobs-original-vision-for-the-iphone-no-third-party-native-apps/ |website=9to5Mac |access-date=22 May 2019 |date=21 October 2011}}</ref> In October 2007 Jobs announced that an SDK would be launched the following year.<ref name="iMore March 2019" /> As a result, although Apple continued to support web apps, the vast majority of iOS applications shifted toward the App Store.
 
Beginning in the early 2010s [[dynamic web page]]s allowed web technologies to be used to create interactive [[web application]]s. [[Responsive web design]], and the screen-size flexibility it provides, made PWA development more accessible. Continued enhancements to HTML, CSS, and JavaScript allowed web applications to incorporate greater levels of interactivity, making native-like experiences possible on a website.<ref>{{cite web|url=http://alistapart.com/article/responsive-web-design|title=Responsive Web Design|ref=2|last1=Marcotte|first1=Ethan|access-date=May 25, 2010|archive-date=January 29, 2016|work=[[A List Apart]]|date=25 May 2010 }}</ref>
 
In 2013, Mozilla released [[Firefox OS]]. It was intended to be an [[open-source]] [[operating system]] for running web apps as native apps on mobile devices. Firefox OS was based on the [[Gecko (software)|Gecko]] rendering engine with a user interface called Gaia, written in HTML5. The development of Firefox OS ended in 2016,<ref>{{Cite web |date=2016-09-27 |title=Mozilla ends commercial Firefox OS development - gHacks Tech News |url=https://www.ghacks.net/2016/09/27/mozilla-ends-commercial-firefox-os-experiment/ |access-date=2022-05-05 |website=gHacks Technology News |language=en-US}}</ref> and the project was completely discontinued in 2017,<ref>{{Cite web|last1=Hoffman|first1=Chris|last2=PCWorld {{!}}|date=2016-09-28|title=Mozilla is stopping all commercial development on Firefox OS|url=https://www.pcworld.com/article/3124563/mozilla-is-stopping-all-commercial-development-on-firefox-os.html|access-date=2021-03-17|website=PCWorld|language=en}}</ref> although a fork of Firefox OS was used as the basis of [[KaiOS]], a feature phone platform.<ref>{{Cite web|title=KaiOS, a feature phone platform built on the ashes of Firefox OS, adds Facebook, Twitter and Google apps|url=https://social.techcrunch.com/2018/02/26/kaios-a-feature-phone-platform-built-on-the-ashes-of-firefox-os-adds-facebook-twitter-and-google-apps/|access-date=2021-03-17|website=TechCrunch|date=26 February 2018 |language=en-US}}</ref>
 
=== Initial introduction ===
In 2015, designer Frances Berriman and [[Google Chrome]] engineer Alex Russell coined the term "progressive web apps"<ref name="infrequently.org">{{cite web|last1=Russell|first1=Alex|title=Progressive Web Apps: Escaping Tabs Without Losing Our Soul|url=https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/|access-date=June 15, 2015|ref=4|archive-date=January 29, 2016}}</ref> to describe apps taking advantage of new features supported by modern browsers, including [[web worker|service workers]] and [[Manifest file|web app manifests]], that let users upgrade web apps to progressive web applications in their native [[operating system]] (OS). Google then put significant efforts into promoting PWA development for Android.<ref name="Evans Computerworld Jan 2018" /><ref name="Ladage 2018">{{cite web |last1=Ladage |first1=Aaron |title=Progressive Web Apps Are Here and They're Changing Everything |url=https://www.degdigital.com/insights/progressive-web-apps/ |website=DEG |access-date=23 May 2019 |date=17 April 2018}}</ref> Firefox introduced support for service workers in 2016, and Microsoft Edge and Apple Safari followed in 2018,<ref>{{Cite web|title=Can I use... Support tables for HTML5, CSS3, etc|url=https://caniuse.com/serviceworkers|access-date=2021-05-16|website=caniuse.com}}</ref><ref name="Evans Computerworld Jan 2018">{{cite web |last1=Evans |first1=Jonny |title=Apple goes back to the future with web apps |url=https://www.computerworld.com/article/3251173/apple-goes-back-to-the-future-with-web-apps.html |website=Computerworld |access-date=23 May 2019 |language=en |date=26 January 2018}}</ref> making service workers available on all major systems.
 
By 2019, PWAs were supported by desktop versions of most browsers, including [[Microsoft Edge]]<ref name="edge">{{cite web |title=Progressive Web Apps on Windows overview |url=https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/ |website=Microsoft Edge Documentation |access-date=13 March 2021 |language=en |date=13 March 2021}}</ref> (on [[Microsoft Windows|Windows]]) and [[Google Chrome]]<ref>{{cite web |last1=LePage |first1=Pete |title=Progressive Web Apps on Desktop |url=https://developers.google.com/web/progressive-web-apps/desktop |website=Google Developers |access-date=13 September 2019 |language=en |date=4 June 2019}}</ref> (on Windows, [[macOS]], [[ChromeOS]], and [[Linux]]).
 
In December 2020, Firefox for desktop abandoned the implementation of PWAs (specifically, removed the prototype "[[site-specific browser]]" configuration that had been available as an experimental feature). A Firefox architect noted: "The signal I hope we are sending is that PWA support is not coming to desktop Firefox anytime soon."<ref name="firefox-desktop">{{Cite web|last=Newman|first=Jared|date=2021-01-26|title=Firefox just walked away from a key piece of the open web|url=https://www.fastcompany.com/90597411/mozilla-firefox-no-ssb-pwa-support|access-date=2021-01-27|website=Fast Company|language=en-US}}</ref> Mozilla still plans to support PWAs on Android.<ref>{{Cite web|last=agi90|date=19 December 2020|title=Comment|url=https://www.reddit.com/r/firefox/comments/kg1jb5/firefox_giving_up_on_pwa_support/gge34eg/|url-status=live|archive-url=|archive-date=|access-date=|website=[[Reddit]]|quote=We have no plans of sunsetting PWAs on mobile that I know of.}}</ref>
 
== Stores ==
Since a progressive web app is a type of [[webpage]] or [[website]] known as a [[web applications|web application]], they do not require separate bundling or distribution. In particular, there is no requirement for developers or users to install web apps via digital distribution systems like [[App Store (iOS)|Apple App Store]], [[Google Play]], [[Microsoft Store]], or [[Samsung Galaxy Store]]. To varying degrees, the major app stores support the publication of PWAs.<ref name=":0" /> Google Play, Microsoft Store,<ref>{{Cite web|last=MSEdgeTeam|title=Publish your Progressive Web App to the Microsoft Store - Microsoft Edge Development|url=https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/microsoft-store|access-date=2021-05-16|website=docs.microsoft.com|language=en-us}}</ref> and Samsung Galaxy Store support PWAs, but Apple App Store does not. Microsoft Store publishes some qualifying PWA automatically (even without app authors' request) after discovering them via [[Microsoft Bing|Bing]] indexing.<ref>{{Cite web|date=2018-04-07|title=The first batch of Windows 10 Progressive Web Apps is here|url=https://www.windowscentral.com/first-batch-windows-10-progressive-web-apps-here|access-date=2021-05-16|website=Windows Central}}</ref>
 
==Characteristics==
 
Progressive web apps are all designed to work on any browser that is compliant with the appropriate [[web standards]]. As with other cross-platform solutions, the goal is to help developers build cross-platform apps more easily than they would with native apps.<ref name="Evans Computerworld Jan 2018" /> Progressive web apps employ the [[progressive enhancement]] web development strategy.
 
Some progressive web apps use an architectural approach called the App Shell Model.<ref>{{Cite web|url=https://developers.google.com/web/fundamentals/architecture/app-shell|title=The App Shell Model}}</ref> In this model, service workers store the Basic User Interface or "[[Shell (computing)|shell]]" of the [[responsive web design]] web application in the browser's offline [[Cache (computing)|cache]]. This model allows for PWAs to maintain native-like use with or without web connectivity. This can improve loading time, by providing an ''initial static frame'', a layout or architecture into which content can be loaded progressively as well as dynamically.<ref name="Osmani 2019">{{cite web |last1=Osmani |first1=Addi |title=The App Shell Model {{!}} Web Fundamentals |url=https://developers.google.com/web/fundamentals/architecture/app-shell |website=Google Developers |access-date=23 May 2019 |language=en}}</ref>
 
=== InstallationTechnical criteria ===
The technical baseline criteria for a site to be considered a progressive web app and therefore being capable of being installed by browsers were described by Russell in a follow-up post2016<ref>{{cite web |last1=Russell |first1=Alex |title=What, Exactly, Makes a Progressive Web App |url=https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/ |access-date=October 18, 2016 |ref=4}}</ref> and updated since:<ref>{{Cite web |title=What does it take to be installable? |url=https://web.dev/install-criteria/ |access-date=2021-05-19 |website=web.dev |language=en}}</ref><ref>{{cite web |last1website=web.dev |title=Progressive Web App |url=https://developers.google.com/web/progressive-web-apps|archive-date=January 29, 2016|access-date=June 15, 2015 |ref=3}}</ref>
* Originate from a secure origin. Served over [[Transport Layer Security|TLS]] and have no active mixed content. Progressive web apps must be served via [[HTTPS]] to ensure user privacy, security, and content authenticity.
* Register a service worker with a fetch handler. Progressive web apps must use service workers to create programmable content caches. Unlike regular HTTP [[web cache]], which caches content after the first use and then relies on various heuristics to guess when content is no longer needed, programmable caches can explicitly prefetch content in advance ''before'' it'sthey are used for the first time and, explicitly discarddiscarding it when it is no longer needed.<ref>{{Cite web |title=Service worker caching and HTTP caching |url=https://web.dev/service-worker-caching-and-http-caching/ |access-date=2021-05-19 |website=web.dev |language=en}}</ref> This requirement helps pages to be accessible offline or on low -quality networks.
* Reference a web app [[manifest file|manifest]]. The manifest must contain at least the five key properties: <code>name</code> or <code>short_name</code>, <code>start_url</code>, and <code>display</code> (with a value of <code>standalone</code>, <code>fullscreen</code> or <code>minimal-ui</code>), and <code>icons</code> (with 192px192&nbsp;px and a 512px512&nbsp;px versions). Information contained in the manifest makes PWAs easily shareable via a URL, discoverable by a search engines, and alleviates complex installation procedures (but PWAs stillmay canstill be listed in a third-party [[app store]]).<ref name="w3cmanifest">W3C [https://www.w3.org/TR/appmanifest/ "Web App Manifest", Working Draft], retrieved 12 September 2016.</ref> Furthermore, PWAs support native app-style interactions and navigation, including being added to the [[home screen]], displaying [[Splash screen|splash screens]], etc.
 
== Comparison with native apps ==
In 2017, [[Twitter]] released Twitter Lite, a PWA alternative to the official native [[Android (operating system)|Android]] and [[iOS]] apps. According to Twitter, Twitter Lite consumed only 1-3% of the size of the native apps.<ref>{{Cite web |last=Shankland |first=Stephen |date=30 July 2020 |title=Twitter's app is helping stop phones from strangling the web |url=https://www.cnet.com/tech/mobile/twitter-shows-why-web-apps-can-work-on-your-android-phone-or-iphone/ |access-date=11 February 2023 |website=CNET}}</ref> [[Starbucks]] provides a PWA that is 99.84% smaller than its equivalent iOS app. After deploying its PWA, Starbucks doubled the number of online orders, with desktop users ordering at about the same rate as mobile app users.<ref>{{Cite web|date=2021-02-22|title=12 Best Examples of Progressive Web Apps (PWAs) in 2021|url=https://www.simicart.com/blog/progressive-web-apps-examples/|url-status=live|access-date=2021-05-16|website=SimiCart|language=en-US}}</ref>
 
A 2018 review published by [[Forbes]], found that users of [[Pinterest]]'s PWA spent 40% more time on the site compared to the previous mobile website. Ad revenue rates also increased by 44%, and core engagements by 60%.<ref>{{Cite web |last=Osmani |first=Addy |date=30 November 2017 |title=A Pinterest Progressive Web App Performance Case Study |url=https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154 |access-date=10 February 2023 |website=ChromiumDev team}}</ref> [[Flipkart]] saw 60% of customers who had uninstalled their native app return to use the Flipkart PWA. [[Lancôme]] saw an 84% decrease in time until the page is interactive, leading to a 17% increase in conversions and a 53% increase in mobile sessions on iOS with their PWA.<ref>{{Cite web |last=Gazdecki |first=Andrew |date=9 March 2018 |title=Why Progressive Web Apps Will Replace Native Mobile Apps |url=https://www.forbes.com/sites/forbestechcouncil/2018/03/09/why-progressive-web-apps-will-replace-native-mobile-apps/?sh=154c9d2a2112 |access-date=10 February 2023 |website=Forbes}}</ref>
 
==Technologies==
There are many technologies commonly used to create progressive web apps. A web application is considered a PWA if it satisfies the installation criteria and, thus can work offline and can be added to the device's home screen. To meet this definition, all PWAs require at minimum a service workermanifest and a manifestservice worker.<ref>{{Cite web|url=https://developer.mozilla.org/en-US/Apps/Progressive/Discoverable|title=Discoverable|website=Mozilla Developer Network|language=en-US|access-date=2017-04-24}}</ref><ref>{{Cite web|url=https://developer.mozilla.org/en-US/Apps/Progressive/Network_independent|title=Network independent|website=Mozilla Developer Network|language=en-US|access-date=2017-04-24}}</ref><ref>{{Cite web|url=https://developers.google.com/web/updates/2015/11/app-shell|title=Instant Loading Web Apps with an Application Shell Architecture|website=Google Developers|language=en|access-date=2017-04-24}}</ref> Other technologies may be used to store data, communicate with servers or execute code.
 
===Manifest===
The web app manifest<ref>{{cite web|title=Web Manifest Docs on MDN|url=https://developer.mozilla.org/en-US/docs/Web/Manifest|website=MDN Web Docs}}</ref> is a [[World Wide Web Consortium|W3C]] (W3C) specification defining a [[JSON]]-based manifest (usually labelled manifest.json)<ref name="w3cmanifest" /> to provide developers with a centralized place to put [[metadata]] associated with a web application including:
 
* The name of the web application
Line 90 ⟶ 88:
====iOS support====
[[iOS]] Safari partially implements manifests, while most of the PWA metadata can be defined via Apple-specific extensions to the meta tags. These tags allow developers to enable full-screen display, define icons and splash screens, and specify a name for the application.<ref>{{cite web |title=What's new on iOS 12.2 for Progressive Web Apps |url=https://medium.com/@firt/whats-new-on-ios-12-2-for-progressive-web-apps-75c348f8e945 |website=Medium |date=27 March 2019}}</ref><ref>{{cite web |title=Configuring Web Applications |url=https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html |website=Safari Web Content Guide}}</ref>
 
===Service workers===
A service worker is a [[web worker]] that implements a programmable network proxy that can respond to web/HTTP requests offrom the main document. It is able to check the availability of a remote server and to, cache content when that server is available, and serve that content later to the document later. Service workers, like any other web workers, work separately from the main document context. Service workers can handle [[push notifications]] and synchronize data in the background, cache or retrieve resource requests, intercept network requests and receive centralized updates independently of the document that registered them, even when that document is not loaded.<ref name="Google Devs May 2019">{{cite web |title=Introduction to Service Worker {{!}} Web |url=https://developers.google.com/web/ilt/pwa/introduction-to-service-worker |website=Google Developers |access-date=23 May 2019 |language=en |date=1 May 2019}}</ref>
 
Service workers go through a three-step lifecycle of Registration, Installation and Activation. Registration involves telling the browser the ___location of the service worker in preparation for installation. Installation occurs when there is no service worker installed in the browser for the web app, or if there is an update to the service worker. Activation occurs when all of the PWA's pages are closed, so that there is no conflict between the previous version and the updated one. The lifecycle also helps maintain consistency when switching among versions of a service worker since only a single service worker can be active for a ___domain.<ref name="Google Devs May 2019" />
 
===WebAssembly===
{{Main|WebAssembly}}
WebAssembly allows [[Precompiler|precompiled]] code to run in a web browser, at near-native speed.<ref name="WebAssembly">{{cite web |title=WebAssembly Concepts |url=https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts |website=MDN |access-date=14 August 2018}}</ref> Thus, libraries written in languages such as [[C (programming language)|C]] can be added to web apps. DueAnnounced toin the2015 costand offirst passingreleased datain fromMarch JavaScript2017, to [[WebAssembly]] became a W3C recommendation on December 5, near-term2019<ref>{{cite usesweb will|author1=World beWide mainlyWeb numberConsortium |title=WebAssembly Core Specification |url=https://www.w3.org/TR/wasm-crunchingcore-1/ |access-date=2024-05-06 |website=World Wide Web Consortium (suchW3)}}</ref><ref>{{Cite asweb voice|title=WebAssembly recognition1.0 Becomes a W3C Recommendation and computerthe vision),Fourth ratherLanguage thanto wholeRun applicationsNatively in Browsers |url=https://www.{{dubiousinfoq.com/news/2019/12/webassembly-w3c-recommendation/ |access-date=February2024-05-06 2022|website=InfoQ |language=en}}</ref> and it received the [[SIGPLAN|Programming Languages Software Award]] from [[Association for Computing Machinery|ACM]] [[SIGPLAN]] in 2021.<ref>{{citationCite web needed|title=Programming Languages Software Award |url=https://www.sigplan.org/Awards/Software/ |access-date=February2024-05-06 2022|website=www.sigplan.org}}</ref>
 
=== Data storage ===
Progressive Webweb Appapp execution contexts get unloaded whenever possible, so progressive web apps need to store the majority of their long-term internal state (user data, dynamically loaded application resources) in one of the following manners:
 
;Web Storagestorage: [[Web storage]] is a W3C standard API that enables key-valuekey–value storage in modern browsers. The API consists of two objects, <code>sessionStorage</code> (that enables session-only storage that gets wiped upon browser session end) and <code>localStorage</code> (that enables storage that persists across sessions).<ref name="WebStorage">{{cite web |title=Web Storage API |url=https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API |website=MDN |access-date=14 August 2018}}</ref>
==== Web Storage ====
{{Main|Web storage}}
Web Storage is a W3C standard API that enables key-value storage in modern browsers. The API consists of two objects, sessionStorage (that enables session-only storage that gets wiped upon browser session end) and localStorage (that enables storage that persists across sessions).<ref name="WebStorage">{{cite web |title=Web Storage API |url=https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API |website=MDN |access-date=14 August 2018}}</ref>
 
;Indexed Database API: [[Indexed Database API]] is a W3C standard database API available in all major browsers. The API is supported by modern browsers and enables storage of [[JSON]] objects and any structures representable as a string.<ref name="IDB">{{cite web |title=Concepts behind IndexedDB |url=https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB |website=MDN |access-date=14 August 2018}}</ref> The Indexed Database API can be used with a [[wrapper library]] providing additional constructs around it.
====Indexed Database API====
{{Main|Indexed Database API}}
Indexed Database API is a W3C standard database API available in all major browsers. The API is supported by modern browsers and enables storage of [[JSON]] objects and any structures representable as a string.<ref name="IDB">{{cite web |title=Concepts behind IndexedDB |url=https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB |website=MDN |access-date=14 August 2018}}</ref> Indexed Database API can be used with a wrapper library providing additional constructs around it.
 
== Comparison with native apps ==
===Service workers===
In 2017, [[Twitter]] released Twitter Lite, a PWA alternative to the official native [[Android (operating system)|Android]] and [[iOS]] apps. According to Twitter, Twitter Lite consumed only 1-31–3% of the size of the native apps.<ref>{{Cite web |last=Shankland |first=Stephen |date=30 July 2020 |title=Twitter's app is helping stop phones from strangling the web |url=https://www.cnet.com/tech/mobile/twitter-shows-why-web-apps-can-work-on-your-android-phone-or-iphone/ |access-date=11 February 2023 |website=CNET}}</ref> [[Starbucks]] provides a PWA that is 99.84% smaller than its equivalent iOS app. After deploying its PWA, Starbucks doubled the number of online orders, with desktop users ordering at about the same rate as mobile app users.<ref>{{Cite web|date=2021-02-22|title=12 Best Examples of Progressive Web Apps (PWAs) in 2021|url=https://www.simicart.com/blog/progressive-web-apps-examples/|url-status=live|access-date=2021-05-16|website=SimiCart|language=en-US}}</ref>
A service worker is a [[web worker]] that implements a programmable network proxy that can respond to web/HTTP requests of the main document. It is able to check the availability of a remote server and to cache content when that server is available, and serve that content later to the document. Service workers, like any other web workers, work separately from the main document context. Service workers can handle [[push notifications]] and synchronize data in the background, cache or retrieve resource requests, intercept network requests and receive centralized updates independently of the document that registered them, even when that document is not loaded.<ref name="Google Devs May 2019">{{cite web |title=Introduction to Service Worker {{!}} Web |url=https://developers.google.com/web/ilt/pwa/introduction-to-service-worker |website=Google Developers |access-date=23 May 2019 |language=en |date=1 May 2019}}</ref>
 
A 2018 review published by [[Forbes]], found that users of [[Pinterest]]'s PWA spent 40% more time on the site compared to the previous mobile website. Ad revenue rates also increased by 44%, and core engagements by 60%.<ref>{{Cite web |last=Osmani |first=Addy |date=30 November 2017 |title=A Pinterest Progressive Web App Performance Case Study |url=https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154 |access-date=10 February 2023 |website=ChromiumDev team}}</ref> [[Flipkart]] saw 60% of customers who had uninstalled their native app return to use the Flipkart PWA. [[Lancôme]] saw an 84% decrease in time until the page is interactive, leading to a 17% increase in conversions and a 53% increase in mobile sessions on iOS with their PWA.<ref>{{Cite web |last=Gazdecki |first=Andrew |date=9 March 2018 |title=Why Progressive Web Apps Will Replace Native Mobile Apps |url=https://www.forbes.com/sites/forbestechcouncil/2018/03/09/why-progressive-web-apps-will-replace-native-mobile-apps/?sh=154c9d2a2112 |access-date=10 February 2023 |website=Forbes}}</ref>
Service workers go through a three-step lifecycle of Registration, Installation and Activation. Registration involves telling the browser the ___location of the service worker in preparation for installation. Installation occurs when there is no service worker installed in the browser for the web app, or if there is an update to the service worker. Activation occurs when all of the PWA's pages are closed, so that there is no conflict between the previous version and the updated one. The lifecycle also helps maintain consistency when switching among versions of service worker since only a single service worker can be active for a ___domain.<ref name="Google Devs May 2019" />
 
== SeeRelease alsovia app stores ==
Since a progressivePWA webdoes appnot isrequire aseparate type of [[webpage]]bundling or [[website]]distribution knownfor asdifferent aplatforms [[weband applications|webis application]],available theyto dousers notvia requirethe separate bundling or distribution. In particularweb, thereit is nonot requirementnecessary for developers or users to installrelease webit apps viaover digital distribution systems like the [[App Store (iOS)|Apple App Store]], [[Google Play]], [[Microsoft Store]], or [[Samsung Galaxy Store]]. To varying degrees, theThe major app stores support the publication of PWAs to varying degrees.<ref name=":0" /> Google Play, Microsoft Store,<ref>{{Cite web|last=MSEdgeTeam|title=Publish your Progressive Web App to the Microsoft Store - Microsoft Edge Development|url=https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/microsoft-store|access-date=2021-05-16|website=docs.microsoft.com|language=en-us}}</ref> and Samsung Galaxy Store support PWAs, but Apple App Store does not. Microsoft Store publishes some qualifying PWAPWAs automatically (even without app authors' requestrequests) after discovering them via [[Microsoft Bing|Bing]] indexing.<ref>{{Cite web|date=2018-04-07|title=The first batch of Windows 10 Progressive Web Apps is here|url=https://www.windowscentral.com/first-batch-windows-10-progressive-web-apps-here|access-date=2021-05-16|website=Windows Central}}</ref>
 
== StoresSee also ==
* [[Google Lighthouse]], an open-source audit tool for PWAs developed by Google
* [[StencilJS]], a JavaScript compiler developed by the [[Ionic (mobile app framework)]] team to build PWAs
 
==References==