Submitted Successfully!
To reward your contribution, here is a gift for you: A free trial for our video production service.
Thank you for your contribution! You can also upload a video entry or images related to this topic.
Version Summary Created by Modification Content Size Created at Operation
1 handwiki -- 1506 2022-11-15 01:42:20 |
2 format corrected. -248 word(s) 1258 2022-11-15 03:57:08 |

Video Upload Options

Do you have a full video?

Confirm

Are you sure to Delete?
Cite
If you have any further questions, please contact Encyclopedia Editorial Office.
HandWiki. Progressive Web Apps. Encyclopedia. Available online: https://encyclopedia.pub/entry/34521 (accessed on 20 April 2024).
HandWiki. Progressive Web Apps. Encyclopedia. Available at: https://encyclopedia.pub/entry/34521. Accessed April 20, 2024.
HandWiki. "Progressive Web Apps" Encyclopedia, https://encyclopedia.pub/entry/34521 (accessed April 20, 2024).
HandWiki. (2022, November 15). Progressive Web Apps. In Encyclopedia. https://encyclopedia.pub/entry/34521
HandWiki. "Progressive Web Apps." Encyclopedia. Web. 15 November, 2022.
Progressive Web Apps
Edit

Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications. PWAs are an emerging technology that combine the open standards of the web offered by modern browsers to provide benefits of a rich mobile experience.

web applications pwas web pages

1. Background

Since around 2005 web development technologies have shifted from static to dynamic documents driven by server (PHP, ASP.NET) client side (e.g. Ajax[1]) tools, and responsive web design.[2] Despite an early push for web-based apps based on these technologies on devices such as the 2007 iPhone, attempts at web apps failed by comparison to native apps. Native apps provided a better user experience and booted faster compared to having to load in a browser at runtime. Packaged resources and direct access to hardware allowed native apps to perform much faster to provide more features. By mid 2010, however, continued enhancements in HTML5, CSS3, and JavaScript, significantly more capable and standards compliant web browsers, along with powerful processors such as the A10 and Snapdragon 821 made performant hybrid-apps a viable alternative.

2. Characteristics

In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term "progressive web apps"[3] 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). According to Google Developers,[3][4][5] these characteristics are:

  • Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
  • Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
  • Connectivity independent - Service workers allow work offline, or on low quality networks.
  • App-like - Feel like an app to the user with app-style interactions and navigation.
  • Fresh - Always up-to-date thanks to the service worker update process.
  • Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
  • Discoverable - Are identifiable as “applications” thanks to W3C manifests[6] and service worker registration scope allowing search engines to find them.
  • Re-engageable - Make re-engagement easy through features like push notifications.
  • Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
  • Linkable - Easily shared via a URL and do not require complex installation.

Progressive web apps are an enhancement of existing web technology. As such, they do not require separate bundling or distribution. Publication of a progressive web app is as it would be for any other web page. PWAs **work** in any browser, but "app-like" features such as being independent of connectivity, install to home screen & push messaging depend on browser support. As of April 2018, those features are supported to varying degrees by the Microsoft Edge, Google Chrome, Mozilla Firefox and Safari browsers, but more browsers may support the features needed in the future.[7][8]

The technical baseline criteria for a site to be considered a progressive web app by browsers were described by Russell in a follow-up post:[9]

  • Originate from a secure origin. Served over TLS and green padlock displays (no active mixed content).
  • Load while offline (even if only a custom offline page). By implication, this means that progressive web apps require service workers.
  • Reference a web app manifest with at least the four key properties: name, short_name, start_url, and display (with a value of standalone or fullscreen)
  • An icon at least 144×144 large in png format. E.g.: "icons": [ { "src": "/images/icon-144.png", "sizes": "144x144", "type": "image/png" } ]

3. Technologies

Commonly used technologies serve to create progressive web apps in the broad sense[10][11][12] are the following:

3.1. Manifest

The web app manifest is a W3C specification defining a JSON-based manifest[6] 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 for a number of characteristics
  • Declaration for default orientation of the web app
  • Enables 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.

3.2. AppCache (Obsolete)

An earlier technology to support offline use of the web. [13] It works adequately for the use case it was designed for (single-page application), but fails in problematic ways for wikis and other multi-page apps.[14] Currently supported by major browsers and in use for years by some sites, but will eventually be removed.

3.3. Service Workers

Native mobile apps deliver rich experiences and high performance, purchased at the expense of storage space, lack of real-time updates, and low search engine visibility. Traditional web apps suffer from the inverse set of factors: lack of a native compiled executable, along with dependence on unreliable and potentially slow web connectivity. Service workers are used in an attempt to give progressive web apps the best of both these worlds.[15]

Technically, service workers provide a scriptable network proxy in the web browser to manage the web/HTTP requests programmatically. The service workers lie between the network and device to supply the content. They are capable of using the cache mechanisms efficiently and allow error-free behavior during offline periods.

Properties of service workers:

  1. Trigger and keep alive by the relationship to the events, not by the documents.
  2. Generic in nature
  3. Event-driven with time limit scripting contexts and running at the origin
  4. With natural endpoints for a wide range of runtime services
  5. Have a state
  6. With a script URL
  7. Containing registration
  8. Allocated ID or UUID
  9. With lifecycle events
  10. Have script resource map
  11. Can skip waiting for the flags

Benefits of service workers:

  • Capable of handling the push notification easily
  • Synchronise data in the background
  • Capable of responding to resource requests originating elsewhere
  • Receive centralized updates

3.4. WebWorkers

Allows a web app to run multiple threads of (JavaScript) code simultaneously[16] Thus, long activities can be moved off the user-interface thread, keeping responses snappy. They have a close relationship with Service Workers, but are more widely supported.

3.5. WebAssembly

Allows precompiled code to run in a web browser, at near-native speed. [17] 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.

3.6. Indexed Database (IDB)

A NoSQL database built into modern browsers[18] Allows a PWA to immediately display content, regardless of connection status or speed.

3.7. LocalStorage & SessionStorage

Key-Value stores that largely make cookies obsolete.[19]

3.8. Application Shell Architecture

Some progressive web apps use an architectural approach called the App Shell Model.[20] For rapid loading, service workers store the Basic User Interface or "shell" of the responsive web design web application. This shell provides an initial static frame, a layout or architecture into which content can be loaded progressively as well as dynamically, allowing users to engage with the app despite varying degrees of web connectivity. The shell can be stored locally in the browser cache of the mobile device.[21]

4. Directories and Examples

  • PWA Directory is a moderated list that allows searching by keyword or Lighthouse score[22].
  • The Microsoft Store contains "PWAs" packaged for Windows 10, but does not appear to contain links to actual on-line PWAs. It's not clear that it can list web apps separate from Windows apps.

References

  1. Garrett, Jesse James. "Ajax: A New Approach to Web Applications". Archived on January 29, 2016. Error: If you specify |archivedate=, you must also specify |archiveurl=. http://adaptivepath.org/ideas/ajax-new-approach-web-applications/. Retrieved February 18, 2005. 
  2. Marcotte, Ethan. "Responsive Web Design". Archived on January 29, 2016. Error: If you specify |archivedate=, you must also specify |archiveurl=. http://alistapart.com/article/responsive-web-design. Retrieved May 25, 2010. 
  3. Russell, Alex. "Progressive Web Apps: Escaping Tabs Without Losing Our Soul". Archived on January 29, 2016. Error: If you specify |archivedate=, you must also specify |archiveurl=. https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/. Retrieved June 15, 2015. 
  4. "Your First Progressive Web App | Web Fundamentals - Google Developers". https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/?hl=en. 
  5. Google Developers. "Progressive Web App". Archived on January 29, 2016. Error: If you specify |archivedate=, you must also specify |archiveurl=. https://developers.google.com/web/progressive-web-apps. Retrieved June 15, 2015. 
  6. W3C “Web App Manifest”, Working Draft, retrieved 12 September 2016 https://www.w3.org/TR/appmanifest/
  7. "Error: no |title= specified when using {{Cite web}}". https://caniuse.com/#search=pwa. Retrieved 14 August 2018.
  8. "Is Service Worker Ready?". Jake Archibald. https://jakearchibald.github.io/isserviceworkerready/. 
  9. Russell, Alex. "What, Exactly, Makes a Progressive Web App". https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/. Retrieved October 18, 2016. 
  10. "Discoverable" (in en-US). https://developer.mozilla.org/en-US/Apps/Progressive/Discoverable. 
  11. "Network independent" (in en-US). https://developer.mozilla.org/en-US/Apps/Progressive/Network_independent. 
  12. "Instant Loading Web Apps with an Application Shell Architecture" (in en). https://developers.google.com/web/updates/2015/11/app-shell. 
  13. "Using the application cache". Mozilla. https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache. Retrieved 14 August 2018. 
  14. "Application Cache is a Douchebag". https://alistapart.com/article/application-cache-is-a-douchebag. Retrieved 14 August 2018. 
  15. "Learn Everything About Progressive Web Apps". http://www.htmlpanda.com/blog/learn-everything-about-progressive-web-apps/. 
  16. "Worker". https://developer.mozilla.org/en-US/docs/Web/API/Worker. Retrieved 14 August 2018. 
  17. "WebAssembly Concepts". https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts. Retrieved 14 August 2018. 
  18. "Concepts behind IndexedDB". https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB. Retrieved 14 August 2018. 
  19. "Web Storage API". https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API. Retrieved 14 August 2018. 
  20. "The App Shell Model". https://developers.google.com/web/fundamentals/architecture/app-shell. 
  21. "Progressive Web Apps – a Quality Mix of Web and Mobile". https://indylogix.com/progressive-web-apps/. 
  22. "Lighthouse - Google Developers". https://developers.google.com/web/tools/lighthouse/. 
More
Information
Contributor MDPI registered users' name will be linked to their SciProfiles pages. To register with us, please refer to https://encyclopedia.pub/register :
View Times: 396
Entry Collection: HandWiki
Revisions: 2 times (View History)
Update Date: 15 Nov 2022
1000/1000