A few years ago, the concept of Progressive Web Applications (PWAs) was born. This new development allowed the web to do things that were previously limited to native apps, like working offline, sending push notifications, or being installed to the home screen. These advances have simplified the process of cross-platform development while still allowing for the production of robust apps.
In this article, I’ll explain the difference between Progressive Web Apps and the more traditional native/hybrid apps, before going on to explore the underlying tech that make PWAs possible. The reality is that there are many potential benefits to using PWAs, either as a way to enhance an existing website or app or as a complete cross-platform strategy – it’s not an all-or-nothing commitment.
Progressive Web Apps are comprised of a suite of evolving technologies that expand the boundaries of what constitutes a “web application,” creating the potential for an enhanced user experience. I’ll provide insight into the world of PWAs and unpack the main factors that make the concept exciting and useful, empowering you to determine which techniques may best serve you or your organization.
What Are Progressive Web Apps?
Progressive Web Apps are the latest step in the evolution of “apps” as a whole. Their core ideology is “develop once, use everywhere,” meaning they can be run in-browser as a website or web app, on the desktop, and mobile devices – all driven from a single codebase. These features make PWAs attractive to modern development teams that may be resource-limited or looking to get to market quickly.
Progressive Web Apps are arguably more accessible to users than traditional store-based apps since they can be run directly through a web browser, and then optionally installed to the device from there. This may mean users are more likely to initially try your app since they don’t have to install it on their device right away, and thus not worry about things like permissions and background activity.
These benefits come with few trade-offs due to the current state of device APIs, when compared against competing architectures:
Native Apps
- “Traditional” apps written to run on a specific platform
- Require separate codebases and related overhead
- Can make full use of a device’s native capabilities and hardware
Hybrid Apps
- Rely on frameworks like Ionic, Cordova, Phonegap, React Native, etc.
- Share (at least partially) codebase in most scenarios
- Can make use of most of a device’s native capabilities and hardware
Progressive Web Apps
- Modern web apps (typically Angular and React) configured to support installation and utilize common device resource API
- A single codebase for all platforms (web, mobile, desktop
- Robust access to a device’s native capabilities, less than native/hybrid apps, but enough for most use cases
Given their apparent benefits, it’s worth exploring the technology and principles that define PWAs.
Digging Into the Benefits of a Progressive Web App
The core of the Progressive Web App ideology can be summed up with the acronym “FIRE,” meaning that the apps must be Fast, Integrated (with the underlying devices), Reliable (stable and secure), and Engaging. Breaking down each point will show how Progressive Web Applications are leveraging recent advances in web technology and device APIs to create a new standard for app development.
Fast (Instant)
Google research shows that “53% of mobile users abandon sites that take over 3 seconds to load.” Furthermore, SOASTA’s research shows that “a one-second delay in mobile load times can impact conversion rates by up to 20%,” which means that if you want to increase your reach and revenue, your site’s First Meaningful Paint should be under 2 seconds. Remember: time is money, even during simple web browsing.
The goal of creating a faster service for website users has been approached from different angles like optimization, lazy loading, Single Page Applications (SPAs), Accelerated Mobile Pages (AMPs), and more recently with PWAs and their Service Workers.
A Service Worker is a programmable network proxy that acts as a broker for your application’s resource requests. It can implement various strategies to control the loading of cached resources, resource updates, and refresh operations as triggered by the server. Service Workers can also handle resource requests relative to network availability and gracefully fall back to cached content in offline states or through communication failures. These capabilities mean that a Progressive Web App can load up quickly, keep its content from becoming stale, and continue functioning without depending on access to the server.
Following this principle, the App Shell is the architecting practice of caching the minimal HTML, CSS, and JavaScript that forms the structure of the app (header, menu, logo, core services, etc.) for display to the user while resources are being loaded from the network. To improve the “perceived speed,” placeholder content is used while the final images or texts are downloaded.
You can take this further with different caching strategies. For instance:
- Caching the dynamic content as well
- Creating your own database on the client with IndexedDB
- Rendering the first page load on the server to speed it up and then caching it
Service Workers speed up not only the initial load but also the computation, taking advantage of JavaScript’s multithreading capabilities. Intensive scripts can be sent to the background while the UI remains fast and responsive – so you can say goodbye to frozen UIs!
Integrated
A differentiating factor for Progressive Web Apps is their ability to integrate with a device’s underlying capabilities and sensors when compared to traditional web apps. The following slides, taken from a presentation on Progressive Web Apps the most recent Google IO conference, illustrate the clear line that separated the web from native apps before the PWA age:
And now the capabilities provided by PWAs:
After accessing a PWA via the web, it can be installed to the user’s underlying device (mobile or desktop) through “Add to Home / Desktop” actions or via an install button in the URL bar in browsers such as Chrome, pictured below:
Give this a try for a site like StackBlitz from your phone or desktop to get a feel for how it functions. You can remove the app afterward if you like (for Chrome, go open chrome://apps/).
Responsive design is a core principle of developing Progressive Web Apps, given the diverse ecosystem of target devices. Installation makes the app feel more integrated, removing browser framing and URL bar, essentially making it equivalent to a native app from the user’s perspective, providing them with a look and feel they’re familiar with.
For those looking for some Store presence, thanks to Trusted Web Activities, you can now upload your PWA to the Google Play Store. Progressive Web Apps extended this capability, allowing them to be directly installed on desktop and mobile without going through the stores, and the related approval/deployment process.
The steps for listing a PWA in Microsoft‘s and Apple’s stores are more challenging. You may need to wrap the apps and make use of additional frameworks to accomplish this goal. The related complexities that can arise arguably undermine some of the key benefits of PWAs: a single easy-to-manage codebase, and circumventing the cost and process of the stores. Still, it is possible to get a Progressive Web App into the major app stores, and – although it can be a hassle – in most cases, it will be less work than maintaining separate codebases for multiple traditional native apps (in Kotlin and Swift for example).
A common concern is that Progressive Web Apps lack the device integration capabilities of native apps, but for most use cases, what people need is already supported, and the list of supported hardware integrations is being expanded. The incoming Payment Request API simplifies and standardizes payments across platforms, Webassembly allows running languages like C/C++ and Rust on the browser, Native Filesystem API allows access to the file system, and Contact Picker API, Web Bluetooth, and WebGPU API are all examples of the APIs that are making the web a much more powerful and integrated place.
Take a look at these W3C roadmaps to see what features are upcoming, as well as Chrome’s related roadmap for 2019:
Reliable
Progressive Web App’s design principles encourage an offline-first approach that leverages Service Workers for content caching, along with the App Shell architecture and IndexedDB to allow the use of the app without Internet connectivity. From there, the BackgroundSync API can be used to defer operations until an internet connection is present, so offline actions are guaranteed to be executed in the cloud the next time the user goes online.
Security is enforced through HTTPS, which is necessary in order to use Service Workers. Progressive Web Applications cannot be delivered without an SSL certificate, a requirement that is helping to build a more secure Internet. Services such as Let’s Encrypt can be used to fulfill this need at no cost, as well as the more traditional paid certificate authorities if you want to pay more for that.
Furthermore, the Web Authentication API can be used to enforce strong authentication with public key cryptography, which opens the door to start using two-factor and biometric authentication right in the browser or installed PWA.
Engaging
One of the largest benefits of Progressive Web Apps is how well they integrate with the web; they are indexable (important for SEO), searchable, linkable, and easily shareable like a typical website. The ability for installation right from the browser – bypassing app stores – enhances accessibility and smooths user acquisition, helping to bridge the gap between discovery via the web and the leap to adoption.
User experience is further enhanced through the Web Share API, which allows the sharing of content to and from the web and native apps (such as WhatsApp), as well as the Push Notifications API to facilitate continued engagement, even after the user has left your app.
Built into all this is the full capability of modern web browsers, and their ability to delight the user with smooth animations and transitions, touch gestures, splash screens, and all the other bells and whistles possible in native apps, providing the user a familiar and engaging experience.
Industry Backing
Choosing whether to adopt an emerging technology can be a hard decision for an organization. It’s important to note that Progressive Web Apps seem to be receiving strong backing from Google and Microsoft in terms of developer support. Recent iOS updates have made the PWA experience on Apple devices more seamless, indicating they too are jumping on the bandwagon. Scaffolding tools such as angular-cli and create-react-app make it easy to bootstrap a project that is PWA-ready out of the gate.
An app’s Manifest File follows set standards to ensure a consistent experience between devices. This file specifies parameters such as theme color, icons, and other metadata that is required to achieve seamless integration on different platforms.
Below is a list of organizations who have embraced Progressive Web Applications:
- Uber
- Tinder
- Google Maps
- Stackblitz
- And many other examples via the Appscope directory
Limitations and Strategies
Although Progressive Web Apps and their related technologies are a growing force on the web, there are a few cases where native (and to a lesser extent, hybrid) apps still have an advantage:
- You have a highly resource-demanding or graphical app where performance is key.
- You need access to device APIs that are not already available to the browser, such as file access, NFC, the phone contacts, or SMS.
- You are targeting old mobile browsers such as those used in legacy environments or developing markets.
- Your target audience is on Google Play or the App Store instead of the Web, App Store presence is a business requirement, or you are looking for the store-centric model of monetization (purchasing the app).
In the case of performance, native is the clear choice. As stated by the Ionic team, “the use of the webview may introduce a degree of overhead compared to native (mostly in basic devices)… For demanding graphical applications such as 3D games and other performance-intensive applications, a hybrid [or PWA] solution may not be the best choice.”
To address the remaining points, you could go with a native app, but you could also opt for the hybrid path. Electron could be used to target desktops. Packaging your app with a hybrid framework like Cordova or Ionic would let you target all mobiles and their markets (App Store, Google Play, etc.). This method would accomplish your goals with fewer code repositories (compared to native), potentially streamlining development.
A key factor in making this choice is budget. Do you have the capacity to maintain multiple codebases with their own specialized developers? Would you get significant benefits from having separate native apps? How many of your users would benefit?
As always, it will depend on your specific requirements and on your user base, but as an overview, we can say that the browsers that support most of the Progressive Web App core features on desktop are the 87% of the market (Chrome (71%), Firefox (9.52%), Edge (4.6%) and Opera (2.4%)). On mobile devices, it decreases to 71.75% of the market (Chrome (62%), Samsung Internet (6.45%), Opera (2.72%), and Android (0.58%)).
Therefore, if you opt for a progressive web app today, around 13% of your desktop users, and 29% of your mobile users won’t be able to install the app, work offline, receive push notifications, or make use of the other advantages of an installed Progressive Web App. However, in most cases, they will still be able to make use of it as a traditional web application.
These considerations should be taken into account when debating whether or not to invest in developing a PWA.
Final Thoughts
With their growing support and adoption, Progressive Web Apps appear to be an attractive choice for new projects. An app that can initially be discovered and accessed via the web before being seamlessly installed on mobile or desktop has great potential to improve conversion rates. The added benefit of a single codebase and core language (JavaScript) allows for easier project management and team building, resulting in lower costs. If your project requirements fit the robust capabilities of PWAs, it’s clear that they’re a technology worth considering.
Are you looking for help with your next software project?
You’ve come to the right place, every Scalable Path developer has been carefully handpicked by our technical recruitment team. Contact us and we’ll have your team up and running in no time.