This article was first published on the web.dev By Richard, Sam, & LePage, P. (2020, June 6). What are progressive web apps?
A progressive web application (PWA),
Or progressive web app is a type of application software delivered through the web, built using common web technologies including HTML, CSS, JavaScript, and WebAssembly. It is intended to work on any platform with a standards-compliant browser, including desktop and mobile devices.
Since a progressive web app is a type of webpage or website known as a web application, it does not require separate bundling or distribution. Developers can simply publish the web application online, ensure that it meets baseline installation requirements, and that users will be able to add the application to their home screen. Publishing the app to digital distribution systems like Apple App Store or Google Play is optional.[1]
Capabilities vs. reach of platform-specific apps, web apps, and progressive web apps.
The web is an incredible platform. Its mix of ubiquity across devices and operating systems, its user-centered security model, and the fact that neither its specification nor its implementation is controlled by a single company makes the web a unique platform to develop software. Combined with its inherent linkability, it’s possible to search it and share what you’ve found with anyone, anywhere. Whenever you go to a website, it’s up-to-date, and your experience with that site can be as ephemeral or as permanent as you’d like. Web applications can reach anyone, anywhere, on any device with a single codebase.
Platform-specific applications are known for being incredibly rich and reliable. They’re ever-present, on home screens, docks, and taskbars. Work regardless of network connection. Launch in their own standalone experience. Can read and write files from the local file system, access hardware connected via USB, serial port, or Bluetooth, and even interact with data stored on your device, such as contacts and calendar events. In these applications, you can do things such as take pictures, see playing songs listed on the home screen, or control song playback while in another app. Platform-specific applications feel like part of the device they run on.
If you think about platform-specific apps and web apps in terms of capabilities and reach, platform-specific apps represent the best of capabilities whereas web apps represent the best of reach. So where do Progressive Web Apps fit in?
Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.
The three app pillars #
Progressive Web Apps are web applications that have been designed to be capable, reliable, and installable. These three pillars transform them into an experience that feels like a platform-specific application.
Capable #
The web is quite capable in its own right today. For example, you can build a hyper-local video chat app using WebRTC, geolocation, and push notifications. You can make that app installable and take its conversations virtual with WebGL and WebVR. With the introduction of WebAssembly, developers can tap into other ecosystems, such as C, C++, and Rust, and bring decades of work and capabilities to the web. Squoosh.app, for instance, uses this for its advanced image compression.
Until recently, only platform-specific apps could really lay claim to these capabilities. While some capabilities are still out of the web’s reach, new and upcoming APIs are looking to change that, expanding what the web can do with features like file system access, media controls, app badging, and full clipboard support. All of these capabilities are built with the web’s secure, user-centric permission model, ensuring that going to a website is never scary for users.
Between modern APIs, WebAssembly, and new and upcoming APIs, web applications are more capable than ever, and those capabilities are only growing.
Reliable #
A reliable Progressive Web App feels fast and dependable regardless of the network.
Speed is critical for getting users to use your experience. In fact, as page load times go from 1 second to 10 seconds, the probability of a user bouncing increases by 123%. Performance doesn’t stop after the onload event. Users should never wonder whether their interaction—for example, clicking a button—was registered or not. Scrolling and animation should feel smooth. Performance affects the entire user experience, from how they perceive your application to how it actually performs.
Finally, reliable applications need to be usable regardless of network connection. Users expect apps to start up 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 getting a request to your server is hard. When a request isn’t possible, they expect to be told there’s trouble instead of silently failing or crashing.
Users deserve apps that respond to interaction in the blink of an eye, and an experience they can depend on.
Installable #
Installed Progressive Web Apps run in a standalone window instead of a browser tab. They’re launchable from the user’s home screen, dock, taskbar, or shelf. It’s possible to 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. New capabilities open up after a web app is installed. Keyboard shortcuts, usually reserved when running in the browser, become available. Progressive Web Apps can register to accept content from other applications. Or to be the default application to handle different types of files.
When a Progressive Web App moves out of a tab and into a standalone app window, it transforms how users think about it and interact with it.
The best of both worlds #
At their heart, Progressive Web Apps are just web applications. Using progressive enhancement, new capabilities are enabled in modern browsers. Using service workers and a web app manifest, your web application becomes reliable and installable. If the new capabilities aren’t available, users still get the core experience.
The numbers don’t lie! Companies that have launched Progressive Web Apps have seen impressive results. For example, Twitter saw 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 its platform-specific desktop experience with a Progressive Web App and saw a 27% increase in return visits.
Progressive Web Apps provide you with a unique opportunity to deliver a web experience your users will love. Using the latest web features to bring enhanced capabilities and reliability.
What are Progressive Web Apps (PWAs)?
Progressive Web Apps (PWAs) are web applications designed to offer enhanced capabilities, reliability, and installability. They combine the reach of web apps with the rich features and experience of platform-specific applications. PWAs leverage modern APIs and technologies to provide an experience that feels like using a native app while being accessible across devices and platforms through a single codebase.
How do Progressive Web Apps differ from traditional web apps?
Unlike traditional web apps, PWAs prioritize delivering a more app-like experience. They intend to provide capabilities and performance comparable to platform-specific applications. PWAs ensure reliability even on slow or unreliable networks, guaranteeing users a smooth and consistent experience. Users can also install them on their devices, similar to how native apps are installed, and run them in a standalone window outside of the browser.
What benefits do Progressive Web Apps offer?
Progressive Web Apps offer several benefits:
- Enhanced Capabilities: PWAs leverage modern APIs, including WebAssembly, to provide advanced features like file system access, media controls, and app badging.
- Reliability: PWAs are designed to load quickly, provide smooth animations, and function well even on unreliable networks.
- Installability: PWAs can be installed on a user’s device, allowing for quick access from the home screen or app launcher. They offer an app-like experience with features like keyboard shortcuts and handling various file types.
- Cross-Platform: PWAs work across different devices and platforms, eliminating the need to develop separate apps for each platform.
- Improved User Experience: With capabilities like offline access, push notifications, and smooth interactions, PWAs enhance user engagement and satisfaction.
- Cost Efficiency: Developing a single PWA codebase can be more cost-effective than creating separate apps for different platforms.
