Progressive web application
A progressive web application 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. Functionality includes working offline, push notifications, and device hardware access, enabling creating user experiences similar to native applications on desktop and mobile devices. Since a progressive web app is 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 from the start, they have generally been slower, have had fewer features, and been less used than native apps. But with the ability to work offline, previously only available to native apps, PWAs running on mobile devices can perform much faster and provide more features, closing the gap with native apps, in addition to being portable across both desktop and mobile platforms.
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 Mozilla Firefox, Google Chrome, Apple Safari, and Microsoft Edge browsers, but more browsers may support the features needed in the future. 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.
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 software development kit was required, and the apps would be fully integrated into the device through the Safari browser engine. This model was later switched for the App Store, as a means of preventing jailbreakers and of appeasing frustrated developers. In October 2007 Jobs announced that an SDK would be launched the following year. 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, and therefore on PWAs.
Firefox released Firefox OS 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. The development of Firefox OS ended in 2016.
In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term "progressive web apps" 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. Google then put significant efforts into promoting PWA development for Android. With Apple's introduction of service worker support for Safari in 2017, PWAs were now supported on the two most commonly-used mobile operating systems, Android and iOS.
By 2019, PWAs were available on desktop browsers Microsoft Edge and Google Chrome.
Characteristics
Progressive web apps are 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.According to Google Developers, 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.
- Faster after initial loading - After the initial loading has finished, the same content and page elements do not have to be re-downloaded each time.
- * Ordinary websites often already made use of the browser cache to avoid re-downloading the same data redundantly. But on progressive web applications, the same elements do not need to be re-rendered again.
- 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 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.
- Originate from a secure origin. Served over TLS and green padlock displays.
- Load while offline. 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
- An icon at least 144×144 large in PNG format.
- Use of vector graphics that are indefinitely scalable and require smaller file sizes.
Technologies
There are many commonly used technologies to create progressive web apps. All PWAs require at minimum a service worker and a manifest.Manifest
The web app manifest is a W3C specification defining a JSON-based manifest 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
iOS support
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. The APIs for new technologies have lagged behind Google's Android WebView implementation, although iOS 12.2 and 13 have caught up somewhat.WebAssembly
allows precompiled code to run in a web browser, at near-native speed.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, 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 in one of the following mannersWeb Storage
Web Storage is a W3C standard API that enables key-value storage in modern browsers. The API consists of two objects, sessionStorage and localStorage.Service workers
Service workers is a web worker that implements a programmable network proxy that can respond to web/HTTP requests of the main document. They are able to check availability of a remote server and cache content when 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 document is not loaded. Service workers enable progressive web apps 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.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.