Progressive Web Apps (PWA) are web apps built and enhanced with modern APIs to provide enhanced capabilities while still reaching any web user on any device with a single codebase. They combine the broad reach of web apps with the rich capabilities of platform-specific apps to enhance the user experience.
The three pillars of PWA design
To make a PWA that feels as good to use as a platform-specific application, you must design it to be capable, reliable, and installable.
Capable
Web applications are more capable now than ever, and those capabilities are only growing. Recently, software for the web has begun to develop capabilities that were once accessible only to platform-specific apps. For example, you can now build a hyper-local video chat app using WebRTC, geolocation, and push notifications, then make that app installable and use WebGL and WebVR to allow conversations to move to virtual reality. The introduction of WebAssembly lets developers tap into other ecosystems, such as C, C++, and Rust, and bring decades of previously platform-specific features to the web. A great example of developers taking advantage of the web's new capabilities is Squoosh.app, a web-based image compressor.
Although some capabilities are still out of the web's reach, new and upcoming APIs are constantly expanding what the web can do with features like file system access, media controls, app badging, and full clipboard support. All these capabilities are built using the web's secure, user-centric permission model, keeping the user safe and making using new websites less intimidating.
Reliable
A reliable Progressive Web App feels fast and dependable regardless of the network. Users deserve apps that respond to interaction quickly, and an experience they can depend on.
Speed is critical for getting users to use your experience. In fact, as page
load times increase from one second to 10 seconds, the probability of
a user bouncing increases by 123%.
Performance concerns affect the entire user experience, not just the onload
event. A reliable experience never leaves users wondering whether or not any
interaction with the app was registered. Scrolling and animation must feel
smooth. Users need to perceive your app as performing well just as much as they
need it to actually perform well.
Reliable apps also need to be usable regardless of network connection. Users expect apps to load quickly on slow or flaky network connections, or even when offline. They expect the most recent content they've interacted with, such as media tracks or tickets and itineraries, to be available and usable even if the app has issues with sending requests to your server. When a request isn't possible, they expect the app to tell them there's trouble, instead of silently failing or crashing.
Installable
Making your PWA installable moves it out of the browser and into a standalone window, transforming how users think about and interact with it. Installed PWAs are launchable from on the user's home screen, dock, taskbar, or shelf. The user can search for them on a device and jump between them with the app switcher, making them feel like part of the device they're installed on.
Installing a PWA also makes new capabilities available, including keyboard shortcuts, which are usually reserved in a browser. PWAs can also register to accept content from other applications, or to be the default application to handle certain file types.
Get results from PWAs
Launching a PWA doesn't just enhance the user experience. It also improves your metrics and increases the value you get from your service. Some prominent examples include:
- Twitter's PWA led to a 65% increase in pages per session, 75% more Tweets, and a 20% decrease in bounce rate, all while reducing the size of their app by over 97%.
- After switching to a PWA, Nikkei saw 2.3 times more organic traffic, 58% more subscriptions, and 49% more daily active users.
- Hulu replaced their platform-specific desktop experience with a PWA and saw a 27% increase in return visits.
For more information about the benefits of using PWAs, see How Progressive Web Apps can drive business success.