Progressive web app

Last updated
PWA logo Progressive Web Apps Logo.svg
PWA logo

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. [1] PWAs are installed using the offline cache of the device's web browser. [2]

Contents

PWAs were introduced from 2016 as an alternative to native (device-specific) applications, with the advantage that they do not require separate bundling or distribution for different platforms. They can be used on a range of different systems, including desktop and mobile devices. Publishing the app to digital distribution systems like the Apple App Store or Google Play is optional. [2]

Because a PWA is delivered in the form of a webpage or website built using common web technologies including HTML, CSS, JavaScript, and WebAssembly, [3] it can work on any platform with a PWA-compatible browser. As of 2021, PWA features are supported to varying degrees by Google Chrome, Apple Safari, Firefox for Android, and Microsoft Edge [4] [5] but not by Firefox for desktop. [6]

History

Predecessors

At Apple's Worldwide Developers Conference in 2007, Steve Jobs announced that the iPhone would "run applications created with Web 2.0 Internet standards". [7] No software development kit (SDK) was required, and the apps would be fully integrated into the device through the Safari browser engine. [8] This model was later switched to the App Store, as a means of appeasing frustrated developers. [9] In October 2007 Jobs announced that an SDK would be launched the following year. [8] 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 pages allowed web technologies to be used to create interactive web applications. 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. [10]

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 rendering engine with a user interface called Gaia, written in HTML5. The development of Firefox OS ended in 2016, [11] and the project was completely discontinued in 2017, [12] although a fork of Firefox OS was used as the basis of KaiOS, a feature phone platform. [13]

Initial introduction

In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term "progressive web apps" [14] to describe apps taking advantage of new features supported by modern browsers, including service workers and 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. [15] [16] Firefox introduced support for service workers in 2016, and Microsoft Edge and Apple Safari followed in 2018, [17] [15] making service workers available on all major systems.

By 2019, PWAs were supported by desktop versions of most browsers, including Microsoft Edge [18] (on Windows) and Google Chrome [19] (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." [6] Mozilla still plans to support PWAs on Android. [20]

Browser support

BrowserSupportComment
Windows macOS Linux Android iOS & iPadOS
Chromium-basedYesYesYesYes—Includes Google Chrome, Microsoft Edge, [18] Brave, Opera, Vivaldi, [21] and others.
Firefox No [6] No [6] No [6] PartialNo
Safari —Partial [22] ——Partial [23]

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. [15] Progressive web apps employ the progressive enhancement web development strategy.

Some progressive web apps use an architectural approach called the App Shell Model. [24] In this model, service workers store the Basic User Interface or "shell" of the responsive web design web application in the browser's offline 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. [25]

Technical criteria

The technical baseline criteria for a site to be considered a progressive web app and therefore capable of being installed by browsers were described by Russell in 2016 [26] and updated since: [27] [28]

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, thus can work offline and can be added to the device's home screen. To meet this definition, all PWAs require at minimum a manifest and a service worker. [31] [32] [33] Other technologies may be used to store data, communicate with servers or execute code.

Manifest

The web app manifest [34] is a World Wide Web Consortium (W3C) specification defining a JSON-based manifest (usually labelled manifest.json) [30] to provide developers with a centralized place to put metadata associated with a web application including:

This metadata is crucial for an app to be added to a home screen or otherwise listed alongside native apps.

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. [35] [36]

Service workers

A service worker is a web worker that implements a programmable network proxy that can respond to web/HTTP requests from the main document. It is able to check the availability of a remote server, 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. [37]

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. [37]

WebAssembly

WebAssembly allows precompiled code to run in a web browser, at near-native speed. [38] Thus, libraries written in languages such as C can be added to web apps. Announced in 2015 and first released in March 2017, WebAssembly became a W3C recommendation on December 5, 2019 [39] [40] [41] and it received the Programming Languages Software Award from ACM SIGPLAN in 2021. [42]

Data storage

Progressive Web App 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 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). [43]
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. [44] The Indexed Database API can be used with a wrapper library providing additional constructs around it.

Comparison with native apps

In 2017, Twitter released Twitter Lite, a PWA alternative to the official native Android and iOS apps. According to Twitter, Twitter Lite consumed only 1–3% of the size of the native apps. [45] 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. [46]

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%. [47] 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. [48]

Release via app stores

Since a PWA a does not require separate bundling or distribution for different platforms and is available to users via the web, it is not necessary for developers to release it over digital distribution systems like the Apple App Store, Google Play, Microsoft Store, or Samsung Galaxy Store. The major app stores support the publication of PWAs to varying to degrees. [2] Google Play, Microsoft Store, [49] and Samsung Galaxy Store support PWAs, but Apple App Store does not. Microsoft Store publishes some qualifying PWAs automatically (even without app authors' requests) after discovering them via Bing indexing. [50]

See also

Related Research Articles

<span class="mw-page-title-main">Web browser</span> Software used to access websites

A web browser is an application for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used on a range of devices, including desktops, laptops, tablets, and smartphones. By 2020, an estimated 4.9 billion people had used a browser. The most-used browser is Google Chrome, with a 66% global market share on all devices, followed by Safari with 18%.

<span class="mw-page-title-main">Favicon</span> Icon associated with a particular web site

A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons associated with a particular website or web page. A web designer can create such an icon and upload it to a website by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.

<span class="mw-page-title-main">Browser wars</span> Competition between web browsing applications for share of worldwide usage

A browser war is a competition for dominance in the usage share of web browsers. The "first browser war" (1995–2001) consisted of Internet Explorer and Netscape Navigator, and the "second browser war" (2004-2017) between Internet Explorer, Firefox, and Google Chrome.

This is a comparison of both historical and current web browsers based on developer, engine, platform(s), releases, license, and cost.

Netscape Plugin Application Programming Interface (NPAPI) is a deprecated application programming interface (API) for web browser plugins, initially developed for Netscape Navigator 2.0 in 1995 and subsequently adopted by other browsers.

A browser extension is a software module for customizing a web browser. Browsers typically allow users to install a variety of extensions, including user interface modifications, cookie management, ad blocking, and the custom scripting and styling of web pages.

<span class="mw-page-title-main">Web development tools</span> Software used to test the UI of a website or web application

Web development tools allow web developers to test, modify and debug their websites. They are different from website builders and integrated development environments (IDEs) in that they do not assist in the direct creation of a webpage, rather they are tools used for testing the user interface of a website or web application.

<span class="mw-page-title-main">Site-specific browser</span> Software application for browsing a particular website

A site-specific browser (SSB) is a software application that is dedicated to accessing pages from a single source (site) on a computer network such as the Internet or a private intranet. SSBs typically simplify the more complex functions of a web browser by excluding the menus, toolbars and browser GUI associated with functions that are external to the workings of a single site. These applications are typically started by a desktop icon which is usually a favicon.

<span class="mw-page-title-main">Google Chrome</span> Web browser developed by Google

Google Chrome is a web browser developed by Google. It was first released in 2008 for Microsoft Windows, built with free software components from Apple WebKit and Mozilla Firefox. Versions were later released for Linux, macOS, iOS, iPadOS, and also for Android, where it is the default browser. The browser is also the main component of ChromeOS, where it serves as the platform for web applications.

Web storage, sometimes known as DOM storage, is a standard JavaScript API provided by web browsers. It enables websites to store persistent data on users' devices similar to cookies, but with much larger capacity and no information sent in HTTP headers. There are two main web storage types: local storage and session storage, behaving similarly to persistent cookies and session cookies respectively. Web Storage is standardized by the World Wide Web Consortium (W3C) and WHATWG, and is supported by all major browsers.

<span class="mw-page-title-main">WebGL</span> JavaScript bindings for OpenGL in web browsers

WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. WebGL is fully integrated with other web standards, allowing GPU-accelerated usage of physics, image processing, and effects in the HTML canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

The Web Open Font Format (WOFF) is a font format for use in web pages. WOFF files are OpenType or TrueType fonts, with format-specific compression applied and additional XML metadata added. The two primary goals are first to distinguish font files intended for use as web fonts from fonts files intended for use in desktop applications via local installation, and second to reduce web font latency when fonts are transferred from a server to a client over a network connection.

The Indexed Database API is a JavaScript application programming interface (API) provided by web browsers for managing a NoSQL database of objects. It is a standard maintained by the World Wide Web Consortium (W3C).

The cache manifest in HTML5 was a software storage feature which provided the ability to access a web application even without a network connection. It became part of the W3C Recommendation on 28 October 2014.

WebRTC is a free and open-source project providing web browsers and mobile applications with real-time communication (RTC) via application programming interfaces (APIs). It allows audio and video communication and streaming to work inside web pages by allowing direct peer-to-peer communication, eliminating the need to install plugins or download native apps.

<span class="mw-page-title-main">Firefox OS</span> Mobile operating system by Mozilla (2014–2017)

Firefox OS is a discontinued open-source operating system made for smartphones, tablet computers, smart TVs, and dongles designed by Mozilla and external contributors. It is based on the rendering engine of the Firefox web browser, Gecko, and on the Linux kernel. It was first commercially released in 2014.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

HTML audio is a subject of the HTML specification, incorporating audio input, playback, and synthesis, as well as speech to text, all in the browser.

WebXR Device API is a Web application programming interface (API) that describes support for accessing augmented reality and virtual reality devices, such as the HTC Vive, Oculus Rift, Meta Quest, Google Cardboard, HoloLens, Apple Vision Pro, Magic Leap or Open Source Virtual Reality (OSVR), in a web browser. The WebXR Device API and related APIs are standards defined by W3C groups, the Immersive Web Community Group and Immersive Web Working Group. While the Community Group works on the proposals in the incubation period, the Working Group defines the final web specifications to be implemented by the browsers.

<span class="mw-page-title-main">Firefox Focus</span> Free and open-source privacy-focused web browser by Mozilla

Firefox Focus is a free and open-source privacy-focused mobile browser by Mozilla, based on Firefox. It is available for Android and iOS smartphones and tablets. Its predecessor, Focus by Firefox, was released in December 2015 as a tracker-blocking application which worked only in conjunction with the Safari mobile browser on iOS. It was developed into a minimalist web browser in 2016 but retained this background blocking functionality. The Android version of the browser was first released in June 2017 and was downloaded over one million times in the first month. As of January 2017, it was available in 27 languages. The version released for German-speaking countries has telemetry disabled and is named Firefox Klar to avoid ambiguity with the German news magazine FOCUS.

References

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