Progressive web apps (PWA): What they are and how they work

Unknowingly, Steve Jobs hinted at a preliminary version of this concept when presenting the iPhone. He considered that Safari would be enough to satisfy the mobile users’ needs, as it would provide a great experience regardless of the device. In the following year, Apple launched the App Store, investing in native apps and proving Jobs wrong. Back then, apps seemed to be the future of mobile, and though they were, further optimization of mobile pages remained a concern for Big Tech.

In 2015, Google’s engineer Alex Russell and designer Frances Berriman coined the term “progressive applications” (“web” was originally left out). They weren’t creating anything new, beyond suggesting a naming convention for apps that were acting on the necessity to address mobile users’ pains.

Too big to ignore

A MindSea's study shows that 50% of smartphone users in the United States download zero mobile apps per month, highlighting how urgent it is to find alternatives that appeal to those users. Tech companies are aware of this, as it’s shown in Gartner’s latest Enterprise Multiexperience survey, which states that 93% of respondents wish to have PWAs either deployed or in development by the end of 2020.

Progressive web apps enable increased adoption and retention rates by providing users a frictionless experience when accessing a brand through mobile channels. They reduce the gap between the web and mobile versions of a page. To understand how a PWA achieves this ultimate goal, let’s break it down into its essential parts and cover each one in detail.

Progressive web apps features

PWAs can be seen as mobile-optimized versions of web pages that you can install on your phone through your browser. They are similar to regular applications, minus the inconvenience of having to be downloaded from an app store. But let’s move on from high-level definitions, and dive deeper into PWAs key features to understand everything that they’re capable of.

Progressive web apps benefits

• Offline availability: perhaps, the most recognizable feature of PWAs: they are available even when offline or under weak network conditions. When you enable the web app, it’ll download a few essential elements that’ll let you use it at all times. This means PWAs are more reliable and much faster.
• High-performance: since the PWA caches several elements when you first open it, all the following uses will load faster and you’ll get an overall smoother experience across all screens. Google states that, on average, 53% of users will abandon a mobile website if it takes more than 3 seconds to load, so you can see why it’s important to optimize page speed as much as possible.
• Discoverability: similar to native mobile apps, PWAs will also be available on your home screen after you install them. In some way, you can see it as a portable web page that you access with a single click (or tap), with no need to open a browser. Additionally, as Google pushes the adoption of progressive web apps, the SEO value they bring is also considerable. Unlike native apps, PWAs are ranked on search engines and are commonly seen as snippet cards at the top of the first results pages when doing mobile searches.
• Responsiveness: PWAs are not a synonym of responsive applications, but they are responsive by nature. They will adapt to any screen size, and their behavior will be similar, regardless of the device you’re using.
• Connectivity: PWAs can make use of your device hardware features, such as the camera, GPS and file systems. You’ll also be able to make payments through built-in payment systems–Apple Pay or Google Pay– like you would with a native app. Additionally, the codebase PWAs share with their web counterparts allows them to update over-the-air, with no need to download new versions from the store.
• Re-engaging: PWAs allow higher user engagement through features like push notifications, even when the application isn’t open. Thus, it’s possible to prioritize information, raising the app’s perceived value, and add touchpoints that may be used to personalize the user journey.

The number of sub-features, and different namings, are as numerous as the number of web searches you’re willing to make. The ones stated above are, however, those that best define what PWAs are and how they can potentially improve the user journey. The list may be extensive, but it’s also abstract, so let’s get practical and see how a progressive web app can perform and what it can do in specific business scenarios.

What can a progressive web app do?

We’re now witnessing mass adoption of PWAs, after skepticism and enduring resistance from browser advocates like Apple that reigned in its early days. They became hard to ignore and some market leaders have already taken action. The reason why? On top of the already mentioned usage benefits, they also deliver a lengthy list of business perks:

Web app user benefits

• Reduced development and maintenance costs: you have multiple platforms that are supported by a single codebase.
• Easy deployment: there’s no need to go through the process of distributing through the app stores.
• User engagement: it’s easier to re-engage with the customer even after the app is closed.
• No store fees: application stores keep around 30% of the revenue.
• Smaller size: PWAs are often under 1MB, downloading in a fraction of the time.
• Larger reach: PWAs have increased reach when compared with regular native apps, given the higher discoverability and SEO impact. Their smaller size also makes them more accessible in remote areas where the network speed is slower.
• Higher conversion rate: there are significant increases in conversion rates when using PWAs.

“But haven’t you just shown me abstract metrics and not industry-proven facts again?” No.

Starbucks, for instance, claims to have doubled their daily and monthly active users after moving to a PWA. During a technical session at Google I/O ‘18, the company stated that they’ve managed to raise orders from mobile users by 20%. The reason why they’ve achieved such impressive numbers? The “great, fast, integrated, reliable and engaging experience” that they’ve provided since switching from a native app to a PWA.

Another good example is that of Nikkei, the Japanese holding company focused on newspaper businesses. They saw value in this alternative to native mobile apps and, in 2017, made the shift to a PWA. In a case study shared by Google, the performance gains and business impact that came from this change are clear. From faster loading times to increased traffic and conversions, it was a game-changing decision.

As the influence of PWAs on mobile development grows, several other examples become available, making them a clear upward trend. But is it the best fit for your business?

When should you use PWAs?

Given their nature, PWAs are most often used in B2C businesses where app usage is sporadic and the consumer doesn’t want to go through the search and installation process to connect with the brand. Consumers may simply be browsing for more information, and not ready to make a purchase.

For instance, imagine that you’re at the airport and want to confirm your boarding gate through the airport application. It would be easier to move to the nearest screen than to go through the app store on limited broadband to download a heavy application that would offer the same information while paying hefty roaming charges. In this case, a native app seems more like a compromise than a solution.

Now, if you were dealing with a PWA, you could just scan the QR code* on your boarding pass or simply go to the airline’s website to install the app icon on your home screen, which would happen as quickly as browsing that same page. If suddenly the flight changes, the PWA would get that info to you instantly through push notifications.

However, if we’re talking about B2E, it’s harder to tell which option is best. On the one hand, PWA’s are easier to distribute, since business owners have a hard time getting approval for submitting their internal applications to the app store, but on the other hand, a native app allows a more natively integrated experience–potentially providing richer use cases–to the employee that will probably be using the app daily.

If the app needs to provide employees access to features such as timesheet input, directories or even CRM functionalities, PWAs are a great fit. However, it gets trickier when employees also need to integrate with specific printers or telephone services (access to sim card or NFC) where native integrations are required.

On B2B, a native app is often the best option. Given the nature of these businesses, customers expect more capabilities across any browser and device. While PWAs cover most scenarios, there are still some compatibility issues that, for instance, don’t allow them to enable NFC or Touch ID, which may be valuable for more deeply integrated use cases. For specific B2B businesses, a PWA can still be a great fit, but this is where they more frequently show some limitations.

Progressive web apps are progressive because they remove friction from user journeys, making the first contact and onboarding easier, allowing for a much lower investment from the user and increasing retention rate. PWA success cases are only possible because companies mapped their users’ and customers’ journeys, identified their needs and picked the best possible solution to address them.

Starbucks opted for a PWA because they wanted their users to have offline access to the digital menu, while Nikkei wanted to address their need for high page loading speeds. These decisions were made on top of substantiated requirements and not because there’s an option that fits all scenarios.

There’s no right or wrong path in mobile development, just the one that suits your customers best.

PWAs vs native apps

We’re at a point in which tech leaders, such as Google and Microsoft, are pushing PWAs to the spotlight, focusing on the benefits they have over native apps. Even if other companies, such as Apple, are still assessing how they can optimize their PWA experience, there’s no questioning their value. Undoubtedly, something is already changing in mobile app development.

What will happen is that each type of application–native and PWA–will find their place and secure it as they are recognized as the best option for specific business models. The same way a web page is best optimized for desktop and a mobile page for mobile, a native mobile app will be optimized for a specific target and PWAs for another. While this may seem trivial, if we think that since the launch of the App Store in 2008 there was no real alternative to the conventional application concept, it’s actually huge.

Is one going to overshadow the other? No, but PWAs have found their market and are making an impact, catching the attention of everyone in the field. They’re not something that can be ignored at this point.

If you want to get a better understanding of all the benefits of PWAs, why don't you try OutSystems by scheduling a demo?

*QR CODE is a registered trademark of Denso Wave Incorporated.

Learn the fundamentals of modern development

Frequently asked questions