Progressive web applications

From HandWiki

Progressive web applications (PWAs) are a type of mobile app delivered through the web, built using common web technologies including HTML, CSS and JavaScript. They are intended to work on any platform that uses a standards-compliant browser. Functionality includes working offline, push notifications, and device hardware access, enabling creating user experiences similar to native applications on mobile devices. Since they are a type of webpage or website known as a web application, there is no requirement for developers or users to install the web apps via digital distribution systems like Apple App Store or Google Play.

While web applications have been available for mobile devices for as long as mobile devices have existed, they had generally lagged behind native apps in terms of speed, features, and user adoption, especially on mobile devices. Direct access to hardware and the ability to work offline, previously only available to native apps, allows PWAs to perform much faster and to provide more features in line with native apps.

PWAs 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 and 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 Apple Safari browsers, but more browsers may support the features needed in the future.[1][2]

Background

At the launch of 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 SDK was required, and the apps would be fully integrated into the device through the Safari browser engine.[3] This model was later switched for the App Store, as a means of preventing jailbreakers and of appeasing frustrated developers.[4] In October 2007 Jobs announced that an SDK would be launched the following year.[3] As a result, although Apple continued to support webapps, PWA compatibility for iOS was significantly reduced.

Beginning in the early 2010's 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, and therefore on PWAs.[5]

Firefox released FirefoxOS in 2013. It was intended to be an open-source operating system for running webapps as native apps on mobile devices, with Gaia built as its HTML5 interface. Development ended in 2016.

In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term "progressive web apps"[6] 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.[7][8] With Apple's introduction of service worker support for Safari in 2017,[7] PWAs were now supported on the two most commonly-used mobile OS - Android and iOS.

By 2019, PWAs were widely adopted throughout the industry. Advantages included faster load times, smaller application sizes, and higher audience engagement.[9][10]

Characteristics

Progressive web apps are designed to work on any browser that is compliant with web standards. As a result, developers should be able to build cross-platform apps more easily than they would with native apps.[7] According to Google Developers,[6][11][12] the characteristics of a PWA are:

  • Progressive — Works for every user, regardless of browser choice, using progressive enhancement principles.
  • Responsive — Fits any form factor: desktop, mobile, tablet, or forms yet to emerge.
  • Connectivity independent — Service workers allow offline uses, or on low quality networks.
  • App-like — Feels like an app to the user with app-style interactions and navigation.
  • Fresh — Always up-to-date due to the service worker update process.
  • Safe — Served via HTTPS to prevent snooping and ensure content hasn't been tampered with.
  • Discoverable — Identifiable as an “application” by manifest.json[13] and service worker registration, and discoverable by search engines.
  • Re-engageable — Ability to use push notifications to maintain engagement with the user.
  • Installable — Provides homescreen icons without the use of an App Store.
  • Linkable — Can easily be shared via a URL, and does not require complex installation.

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:[14]

  • 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.

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

Technologies

There are many commonly used technologies to create progressive web apps. All PWAs require at minimum a service worker and a manifest.[17][18][19]

Manifest

The web app manifest is a W3C specification defining a JSON-based manifest (usually labelled manifest.json)[13] 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.

Service workers

A service worker is a JavaScript file that operates as a type of web worker. They work separately from the main browser thread to handle push notifications, synchronize data in the background, cache or retrieve resource requests, intercept network requests and receive centralized updates.[20] Service workers are used in an attempt to give progressive web apps the ability to provide the high performance and rich experience of native mobile apps, with the low storage space, real-time updates and improved search engine visibility of traditional web apps.[21]

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

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

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).[23]

WebAssembly

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

Database libraries

Indexed Database API is a W3C standard API for interacting with a NoSQL database. The API is supported by modern browsers and enables storage of JSON objects and any structures representable as a string.[25] It is most commonly used with the idb wrapper around it.

Some other database libraries that can be used with PWAs include:

  • RxDB - Build on top of PouchDB, offers this database functional-reactive capabilities to applications.


AppCache (obsolete)

Main page: Cache manifest in HTML5

Application Cache - or AppCache or HTML5 cache manifest - is an earlier technology that allowed the application to cache content in advance for later use when the device is offline.[26] It works adequately for single-page applications which it was designed for, but fails in problematic ways for multi-page applications like wikis.[27] As of May 2019, the technology is supported by major browsers and in use for years by some sites, but it is already deprecated in favor of service workers and will eventually be removed.

See Also

References

  1. ↑ "Can I use pwa?". https://caniuse.com/#search=pwa. Retrieved 14 August 2018. 
  2. ↑ "Is Service Worker Ready?". Jake Archibald. https://jakearchibald.github.io/isserviceworkerready/. 
  3. ↑ 3.0 3.1 Ritchie, Rene (5 March 2018). "App Store Year Zero: Unsweet web apps drove iPhone to an SDK" (in en). https://www.imore.com/history-app-store-year-zero. Retrieved 23 May 2019. 
  4. ↑ "Jobs’ original vision for the iPhone: No third-party native apps". 21 October 2011. https://9to5mac.com/2011/10/21/jobs-original-vision-for-the-iphone-no-third-party-native-apps/. Retrieved 22 May 2019. 
  5. ↑ 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. 
  6. ↑ 6.0 6.1 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. 
  7. ↑ 7.0 7.1 7.2 Evans, Jonny (26 January 2018). "Apple goes back to the future with web apps" (in en). https://www.computerworld.com/article/3251173/apple-goes-back-to-the-future-with-web-apps.html. Retrieved 23 May 2019. 
  8. ↑ Ladage, Aaron (17 April 2018). "Progressive Web Apps Are Here and They’re Changing Everything". https://www.degdigital.com/insights/progressive-web-apps/. Retrieved 23 May 2019. 
  9. ↑ INDIA, SPEC (1 November 2018). "Progressive Web App: Here’s Everything You Need To Know About PWA". https://medium.com/quick-code/progressive-web-app-heres-everything-you-need-to-know-about-pwa-cf2fefcbf24e. Retrieved 22 May 2019. 
  10. ↑ Gazdecki, Andrew (9 March 2018). "Why Progressive Web Apps Will Replace Native Mobile Apps" (in en). https://www.forbes.com/sites/forbestechcouncil/2018/03/09/why-progressive-web-apps-will-replace-native-mobile-apps/#5e169a702112. Retrieved 23 May 2019. 
  11. ↑ "Your First Progressive Web App | Web Fundamentals - Google Developers". https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/?hl=en. 
  12. ↑ 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. 
  13. ↑ 13.0 13.1 W3C “Web App Manifest”, Working Draft, retrieved 12 September 2016
  14. ↑ 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. 
  15. ↑ "The App Shell Model". https://developers.google.com/web/fundamentals/architecture/app-shell. 
  16. ↑ Osmani, Addi. "The App Shell Model | Web Fundamentals" (in en). https://developers.google.com/web/fundamentals/architecture/app-shell. Retrieved 23 May 2019. 
  17. ↑ "Discoverable" (in en-US). https://developer.mozilla.org/en-US/Apps/Progressive/Discoverable. 
  18. ↑ "Network independent" (in en-US). https://developer.mozilla.org/en-US/Apps/Progressive/Network_independent. 
  19. ↑ "Instant Loading Web Apps with an Application Shell Architecture" (in en). https://developers.google.com/web/updates/2015/11/app-shell. 
  20. ↑ 20.0 20.1 "Introduction to Service Worker | Web" (in en). 1 May 2019. https://developers.google.com/web/ilt/pwa/introduction-to-service-worker. Retrieved 23 May 2019. 
  21. ↑ "Learn Everything About Progressive Web Apps". http://www.htmlpanda.com/blog/learn-everything-about-progressive-web-apps/. 
  22. ↑ Kataria, Saransh (18 June 2019). "How to use a Service Worker to create Progressive Web Applications?". https://www.wisdomgeek.com/development/web-development/service-worker-progressive-web-applications/. Retrieved 18 June 2019. 
  23. ↑ "Web Storage API". https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API. Retrieved 14 August 2018. 
  24. ↑ "WebAssembly Concepts". https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts. Retrieved 14 August 2018. 
  25. ↑ "Concepts behind IndexedDB". https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB. Retrieved 14 August 2018. 
  26. ↑ "Using the application cache". Mozilla. https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache. Retrieved 14 August 2018. 
  27. ↑ "Application Cache is a Douchebag". https://alistapart.com/article/application-cache-is-a-douchebag. Retrieved 14 August 2018. 




Retrieved from "https://handwiki.org/wiki/index.php?title=Progressive_web_applications&oldid=83977"