Progressive web app

Progressive web apps are built on three essential technologies: service workers, web app manifests, and HTTPS. Service workers are JavaScript files that run in the background, enabling offline caching and background sync. The web app manifest is a JSON file that defines metadata such as app name, icons, and theme color, allowing the PWA to be installed on the user's device. HTTPS is required to ensure secure communication and to enable service workers. These technologies combine to deliver the core characteristics of a PWA: progressive enhancement, responsive design, connectivity independence, and installability.

PWAs are designed to work for every user, regardless of browser or device, and they adapt to different screen sizes. They can be added to the home screen without an app store, and they can send push notifications to re-engage users. The combination of these features makes PWAs a compelling alternative to native apps, especially for businesses seeking to reduce development costs and increase reach.

Major companies have adopted PWAs to improve user experience and business metrics. Twitter's PWA, Twitter Lite, saw a 65% increase in pages per session and a 75% increase in Tweets sent. Pinterest rebuilt its mobile web experience as a PWA, resulting in a 60% increase in core engagements and a 44% increase in user-generated ad revenue. Starbucks created a PWA that allows customers to browse the menu and place orders offline, leading to a 2x increase in daily active users.

PWAs have also been embraced by emerging markets where data costs and device storage are limited. For example, Flipkart's PWA, Flipkart Lite, reduced data usage by 40% and saw a 70% increase in conversions. These case studies demonstrate that PWAs can deliver significant business value while providing a seamless user experience.

Beyond the well-known features, PWAs have several niche aspects. One is the ability to use the Web Share API and Web Bluetooth API, enabling integration with native device capabilities. Another is the concept of 'app shells' — the minimal HTML, CSS, and JavaScript required to power the user interface, which is cached to ensure instant loading. PWAs can also work with the Payment Request API to streamline checkout processes.

Historically, the term 'progressive web app' was coined by Alex Russell and Frances Berriman in 2015, but the underlying technologies date back earlier. For instance, service workers were first proposed in 2014, and the concept of offline-first web apps was explored in academic research. PWAs also have a role in accessibility, as they can be built with semantic HTML and progressive enhancement to ensure they work for users with disabilities.

Despite their advantages, PWAs face challenges. One is the lack of full support for some features on iOS Safari, such as background sync and certain push notification behaviors. Another is the discoverability issue, as PWAs are not listed in app stores, making them harder for users to find. Additionally, some developers argue that PWAs cannot fully replace native apps for complex tasks like advanced graphics or hardware access.

Future developments include the integration of PWAs with app stores, as seen with the Microsoft Store and Google Play Store, which now accept PWAs. The WebAssembly technology is also expanding the capabilities of PWAs, allowing them to run high-performance applications. As browser support improves and new APIs emerge, PWAs are likely to become even more powerful and widespread.

Service worker

A script that runs in the background, enabling offline caching, push notifications, and background sync.

Web app manifest

A JSON file that provides metadata about the app, such as name, icons, and theme color, enabling installation.

HTTPS

Secure HTTP protocol that encrypts data between the browser and server, required for service workers.

App shell

The minimal HTML, CSS, and JavaScript needed to render the user interface, cached for instant loading.

Offline-first

A design approach where the app works without a network connection, using cached data.