Progressive Web Apps
Get Progressive Web Apps essential facts below. View Videos or join the Progressive Web Apps discussion. Add Progressive Web Apps to your PopFlock.com topic list for future reference or share this resource on social media.
Progressive Web Apps
PWA logo

A progressive web application (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.

Since a progressive web app is a type of webpage or website known as a web application, they do not require separate bundling or distribution. Developers can just publish the web application online, ensure that it meets baseline "installability requirements", and users will be able to add the application to their home screen. Publishing the app to digital distribution systems like Apple App Store or Google Play is optional.[1]

As of 2021, PWA features are supported to varying degrees by Google Chrome, Apple Safari, Firefox for Android, and Microsoft Edge[2][3] but not by Firefox for desktop.[4]

Browser support

Browser Support Comment
Windows Linux macOS Android iOS
Chromium-based Yes Yes Yes Yes No Includes Google Chrome, Microsoft Edge,[5] Brave, Opera, and others.
Firefox No[4] No[4] No Partial No
Safari N/A N/A Yes N/A Yes
(iOS 11.3+)[6]

History

Predecessors

At the launch of 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 browser engine.[7] This model was later switched for the App Store, as a means of preventing jailbreakers and of appeasing frustrated developers.[8] In October 2007 Jobs announced that an SDK would be launched the following year.[7] As a result, although Apple continued to support webapps, the vast majority of iOS applications shifted towards 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, 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.[9]

In 2013, Mozilla released Firefox OS. It was intended to be an open-source operating system for running webapps 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,[] and the project was completely discontinued in 2017,[10] although a fork of Firefox OS was used as the basis of KaiOS, a feature phone platform.[11]

Initial introduction

In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term "progressive web apps"[12] 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.[13][14] Firefox introduced support for service workers in 2016, and Microsoft Edge and Apple Safari followed in 2018,[15][13] making service workers available on all major systems.

By 2019, PWAs were available on desktop browsers Microsoft Edge[5] (on Windows) and Google Chrome[16] (on Windows, macOS, Chrome OS and Linux).

In December 2020, Firefox for desktop abandoned 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."[4] Mozilla still plans to support PWAs on Android.[17]

App stores

Since a progressive web app is a type of webpage or website known as a web application, they do not require separate bundling or distribution. In particular, there is no requirement for developers or users to install the web apps via digital distribution systems like Apple App Store, Google Play, Microsoft Store or Samsung Galaxy Store. To varying degrees, the major app stores support PWAs, allowing them to be found in app stores.[1] Google Play, Microsoft Store,[18] and Samsung Galaxy Store support PWAs, but Apple App Store does not. Microsoft Store publishes some qualifying PWAs automatically (without app authors' request) after discovering them via Bing indexing.[19]

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

Some progressive web apps use an architectural approach called the App Shell Model.[20] 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.[21]

Installability criteria

The technical baseline criteria for a site to be considered a progressive web app and therefore "installable" by browsers were described by Russell in a follow-up post[22] and updated since:[23][24]

  • Originate from a secure origin. Served over TLS and green padlock displays (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's used for the first time and explicitly discard it when it is no longer needed.[25] This requirement helps pages to be accessible offline or on low quality networks.
  • Reference a web app manifest. The manifest must contain at least the five key properties: name or short_name, start_url, and display (with a value of standalone, fullscreen or minimal-ui), and icons (with 192px and a 512px versions). Due to existence of manifest, PWAs can be easily shared via a URL, discovered by a search engine, and do not require complex installation (but can be listed in a third-party app store).[26] Furthermore, PWAs support native app-style interactions and navigation, including being added to home screen, displaying splashscreens, etc.

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.[27] In July 2019 Twitter started serving all website users to Twitter Lite by default.[28] On June 1, 2020, Twitter deactivated the legacy website layout, leaving the progressive web app version as the only option.[29]

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

Several businesses highlight significant improvements in a wide variety of key performance indicators after PWA implementation, like increased time spent on page, conversions, or revenue.[]

Technologies

There are many commonly used technologies to create progressive web apps. A web application is considered a PWA if it satisfies "installability criteria" and thus can work offline and can be added to device home screen. To meet this definition, all PWAs require at minimum a service worker and a manifest.[31][32][33]

Manifest

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

  • The name of the web application
  • Links to the web app icons or image objects
  • The preferred URL to launch or open the web app
  • The web app configuration data
  • Default orientation of the web app
  • The option to set the display mode, e.g. full screen

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]

WebAssembly

WebAssembly allows precompiled code to run in a web browser, at near-native speed.[37] Thus, libraries written in languages such as C can be added to web apps. Due to the cost of passing data from JavaScript to WebAssembly, near-term uses will be mainly number-crunching (such as voice recognition and computer vision), rather than whole applications.

Data storage

Progressive Web App execution contexts get unloaded whenever possible, so progressive web apps need to store majority of 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).[38]

Service workers

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

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 webapp, or if there is an update to the service worker. Activation occurs when all of the PWAs 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.[39]

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.[40] Indexed Database API can be used with a wrapper library providing additional constructs around it.

AppCache (obsolete)

Application Cache (or AppCache or HTML5 cache manifest) is an earlier technology that allowed web applications to cache content in advance for later use when the device is offline.[41] It was sufficient for single-page applications which it was designed for, but fails in problematic ways for multi-page applications like wikis.[42] As of May 2021, AppCache is no longer widely available. It was removed from Firefox 85,[43] and disabled by default in Chrome 85 (with complete removal planned for Chrome 93).[44]

See also

References

  1. ^ a b "Progressive Web Apps | Software AG". techradar.softwareag.com. Retrieved .
  2. ^ "Can I use pwa?". CanIUse. Retrieved 2021.
  3. ^ "Is Service Worker Ready?". Jake Archibald.
  4. ^ a b c d Newman, Jared (2021-01-26). "Firefox just walked away from a key piece of the open web". Fast Company. Retrieved .
  5. ^ a b "Progressive Web Apps on Windows overview". Microsoft Edge Documentation. 13 March 2021. Retrieved 2021.
  6. ^ Firtman, Maximiliano (2020-08-18). "Progressive Web Apps on iOS are here ?". Medium. Retrieved .
  7. ^ a b Ritchie, Rene (5 March 2018). "App Store Year Zero: Unsweet web apps drove iPhone to an SDK". iMore. Retrieved 2019.
  8. ^ "Jobs' original vision for the iPhone: No third-party native apps". 9to5Mac. 21 October 2011. Retrieved 2019.
  9. ^ Marcotte, Ethan. "Responsive Web Design". A List Apart. Retrieved 2010.
  10. ^ Hoffman, Chris; PCWorld | (2016-09-28). "Mozilla is stopping all commercial development on Firefox OS". PCWorld. Retrieved .
  11. ^ "KaiOS, a feature phone platform built on the ashes of Firefox OS, adds Facebook, Twitter and Google apps". TechCrunch. Retrieved .
  12. ^ Russell, Alex. "Progressive Web Apps: Escaping Tabs Without Losing Our Soul". Retrieved 2015.
  13. ^ a b c Evans, Jonny (26 January 2018). "Apple goes back to the future with web apps". Computerworld. Retrieved 2019.
  14. ^ Ladage, Aaron (17 April 2018). "Progressive Web Apps Are Here and They're Changing Everything". DEG. Retrieved 2019.
  15. ^ "Can I use... Support tables for HTML5, CSS3, etc". caniuse.com. Retrieved .
  16. ^ LePage, Pete (4 June 2019). "Progressive Web Apps on Desktop". Google Developers. Retrieved 2019.
  17. ^ agi90 (19 December 2020). "Comment". Reddit. We have no plans of sunsetting PWAs on mobile that I know of.
  18. ^ MSEdgeTeam. "Publish your Progressive Web App to the Microsoft Store - Microsoft Edge Development". docs.microsoft.com. Retrieved .
  19. ^ "The first batch of Windows 10 Progressive Web Apps is here". Windows Central. 2018-04-07. Retrieved .
  20. ^ "The App Shell Model".
  21. ^ Osmani, Addi. "The App Shell Model | Web Fundamentals". Google Developers. Retrieved 2019.
  22. ^ Russell, Alex. "What, Exactly, Makes a Progressive Web App". Retrieved 2016.
  23. ^ "What does it take to be installable?". web.dev. Retrieved .
  24. ^ Google Developers. "Progressive Web App". Retrieved 2015.
  25. ^ "Service worker caching and HTTP caching". web.dev. Retrieved .
  26. ^ a b W3C "Web App Manifest", Working Draft, retrieved 12 September 2016
  27. ^ "How we built Twitter Lite". blog.twitter.com. Retrieved .
  28. ^ "Twitter Starts Rolling Out Updated Website With New Design". MacRumors.
  29. ^ "Twitter warns of legacy site theme shutting down on June 1". BleepingComputer.
  30. ^ "12 Best Examples of Progressive Web Apps (PWAs) in 2021". SimiCart. 2021-02-22. Retrieved .
  31. ^ "Discoverable". Mozilla Developer Network. Retrieved .
  32. ^ "Network independent". Mozilla Developer Network. Retrieved .
  33. ^ "Instant Loading Web Apps with an Application Shell Architecture". Google Developers. Retrieved .
  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. ^ "WebAssembly Concepts". MDN. Retrieved 2018.
  38. ^ "Web Storage API". MDN. Retrieved 2018.
  39. ^ a b "Introduction to Service Worker | Web". Google Developers. 1 May 2019. Retrieved 2019.
  40. ^ "Concepts behind IndexedDB". MDN. Retrieved 2018.
  41. ^ "Using the application cache". MDN. Mozilla. Retrieved 2018.
  42. ^ "Application Cache is a Douchebag". A List Apart. Retrieved 2018.
  43. ^ "Using the application cache - HTML: HyperText Markup Language | MDN". developer.mozilla.org. Retrieved .
  44. ^ "Preparing for AppCache removal". web.dev. Retrieved .

External links


  This article uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.

Progressive_Web_Apps
 



 



 
Music Scenes