Jump to content

Progressive web app

From Wikipedia, the free encyclopedia

This is an old revision of this page, as edited by Chstdu (talk | contribs) at 17:35, 22 August 2017 (Moved the list of PWAs into a separate list article). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

Progressive Web App (PWA), in general, is a term used to denote web apps that use the latest web technologies. As such, this year's PWAs will be average web apps in a few years.

Specifically, though, Progressive Web Apps, also known as Installable Web Apps or Hybrid Web Apps, are regular web pages (or websites) but can appear to the user like traditional applications or (native) mobile applications. This new application type attempts to combine features offered by most modern browsers with the benefits of mobile experience. This specific use of the term is the subject of this article.

Progressive Web Apps are enabled by the Application Manifest and Service Workers standards by W3C.

Background

Since around 2005 web development technologies have shifted from static to dynamic documents driven by server (PHP, ASP.NET) and 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 and to provide more features. By the mid 2010s, 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.

Hybrid Apps

Hybrid apps mimic the native mobile UX, and need an App store download. As such they consume storage. The combination of markup, styling sheets, and scripts enabled custom interactive page elements without use of closed systems such as Flash. Partially running in a mobile browser, hybrids did not have a URL, supported a rich User interface and access to system capabilities. Newly released CSS3 and JavaScript frameworks allowed new design patterns such as the box model followed by grids and flex, accompanied by translations, transformations, animations.

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 described by Shoaib in a follow-up post:[7] 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. As of 2017, Progressive Web Apps are supported by the Chrome browser, but more browsers may support the features needed in the future.

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

  • 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" } ]

Technologies

Commonly used technologies used to create progressive web apps[9][10][11] are the following:

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

By setting and manipulating the metadata for the web manifest file, developers enable user agents to create seamless native-like mobile experiences through the Progressive Web App.

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

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 supplement 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 the resource requests originate elsewhere
  • Receive centralized updates

Application Shell Architecture

For rapid loading, service workers store the Basic User Interface or "shell" of the RWD 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. Technically, the shell is a code bundle stored locally in the browser cache of the mobile device.[13]

Cost of a Progressive Web App

For an app publisher, the biggest advantage is the cost saving in terms of app development and maintenance. It costs 10 times lesser than a native application. [14]

Progressive Web App Examples

Further information: List of Progressive Web Apps

Progressive web app development

References

  1. ^ Garrett, Jesse James. "Ajax: A New Approach to Web Applications". Retrieved February 18, 2005. {{cite web}}: |archive-date= requires |archive-url= (help)
  2. ^ Marcotte, Ethan. "Responsive Web Design". Retrieved May 25, 2010. {{cite web}}: |archive-date= requires |archive-url= (help)
  3. ^ a b Russell, Alex. "Progressive Web Apps: Escaping Tabs Without Losing Our Soul". Retrieved June 15, 2015. {{cite web}}: |archive-date= requires |archive-url= (help)
  4. ^ "Your First Progressive Web App | Web Fundamentals - Google Developers". Your First Progressive Web App | Web Fundamentals - Google Developers. Retrieved 2016-07-17.
  5. ^ Google Developers. "Progressive Web App". Retrieved June 15, 2015. {{cite web}}: |archive-date= requires |archive-url= (help); |last1= has generic name (help)
  6. ^ a b W3C “Web App Manifest”, Working Draft, retrieved 12 September 2016
  7. ^ "Is It Right Time to Go for Progressive App Development". Retrieved Feb 20, 2016.
  8. ^ Russell, Alex. "What, Exactly, Makes a Progressive Web App". Retrieved October 18, 2016.
  9. ^ "Discoverable". Mozilla Developer Network. Retrieved 2017-04-24.
  10. ^ "Network independent". Mozilla Developer Network. Retrieved 2017-04-24.
  11. ^ "Instant Loading Web Apps with an Application Shell Architecture". Google Developers. Retrieved 2017-04-24. {{cite web}}: Cite has empty unknown parameter: |dead-url= (help)
  12. ^ "Learn Everything About Progressive Web Apps". {{cite web}}: Cite has empty unknown parameter: |dead-url= (help)
  13. ^ "Progressive Web Apps – a Quality Mix of Web and Mobile". {{cite web}}: Cite has empty unknown parameter: |dead-url= (help)
  14. ^ "Why Progressive Web Apps (PWA) is not good news for Native and Hybrid app developers". Techathlon. 2017-06-14. Retrieved 2017-06-24.
Retrieved from "https://en.wikipedia.org/w/index.php?title=Progressive_web_app&oldid=796720009"