Instead of starting this article with the definition of a PWA, I’ll begin by jumping into what most web apps look like these days. And it’s not very pretty. If you’ve used pretty much any website recently, you probably noticed that the vast majority of sites and apps perform rather poorly on mobile, especially when you have a bad 3G connection.
You’re not alone. Over the last few years desktop clients have become the minority, with mobile devices getting more than half of the web’s market share. In some emerging markets this is even more dramatic, with an overwhelming 80%+ of users using their phones to access the web.
There’s a problem, though. While responsive sites are all nice and pretty, the engineering side of things hasn’t really caught up with the needs of mobile devices. Most teams still build products for desktop and then try to shoehorn them into a phone with no regard for the limitations of the device, which means that the user experience ends up being hindered by a pile of misguided technical decisions.
Luckily for us, Google, the official gatekeeper of the web, has taken notice of this problem and is headlining one of the most valuable initiatives we’ve seen in the last few years: the push for Progressive Web Apps (PWAs), incentivizing developers all over the world to build products taking phones as first-class devices.
This not only helps get better engagement metrics, as users overwhelmingly prefer leaner, faster products, but also helps pave the road for the future of the web.
Today, I’m going to share with you the main reasons why you should start thinking of building a PWA for your next product. Since this is Google we are talking about, most of these reasons are heavily backed by data. Also, if you want to discuss building a PWA for your next product, you'll be able to book a call with us at the end of this article.
A PWA is a web app that feels just as great as a native app, with the objective of filling the gap between the ease of access of the web and the sheer utility of applications downloaded from the app stores. As you can imagine, this is more of a product play than an engineering one, but the core idea is to deliver amazing user experiences on the mobile web.
And Google is actually placing some pretty tantalizing incentives in front of us. It not only prioritizes fast mobile-friendly sites in its search results, but now, if you build a solid PWA, Google will prompt users to install your web app to its home screen. This is amazing from an engagement standpoint, especially since a good PWA is nearly indistinguishable from a native app downloaded from the Play Store.
At Aerolab we’ve been pushing PWAs for the last year or so because we honestly believe they help companies focus on building truly great products for the web. Whether you’re wondering if the development effort is worth it or you just want to learn more about why everyone is talking about this topic, here are the five main reasons we believe a PWA should be your Plan A if you’re building a product for the next decade.
[caption id="attachment_1222" align="aligncenter" width="700"] Forbes’ PWA effectively doubled engagement on mobile[/caption]
The strongest argument in favor of building a Progressive Web App is that PWAs ask you be on top of your game and build products according to the best practices in the industry. And while this sounds like a nice-to-have, one of the things we’ve seen time and time again is that focusing relentlessly on quality can help you deliver some pretty astonishing results.
Google has some very good case studies featured on its developers site, but if you want to skip straight to the best examples, PWAStats showcases case studies for the best PWAs for both big and small companies, and there are some pretty amazing gems in there.
One of the crowd favorites is Forbes’ success story, where building one of the best Progressive Web Apps in the media industry got Forbes a 20% increase in ad views with engagement metrics effectively doubling, going up by more than 100%. Along the same lines, there’s also Twitter Lite, a lightweight PWA aimed at emerging markets, which raised metrics dramatically, netting 65% more pages per visit, almost doubling the number of tweets on mobile, and dropping bounce rates by 20%.
On the ecommerce side of things, results are even more dramatic: Housing.com improved its conversion rate by an impressive 38%, which even pales in comparison with Alibaba, who got an insane 76% increase in conversion on mobile. All of these metrics have a direct impact in the bottom line of these companies, and they clearly prove just how much users prefer fast, mobile-friendly products.
Simply put, the biggest advantage of a PWA is sheer speed, which is one of the most effective predictors of user engagement on mobile. This has been known for a while, but the best datapoint on the topic is a study by Google that tells us that half of your users will leave your site if it doesn’t load within three seconds. Needless to say, making your product faster will help you recover a huge chunk of users that you could otherwise lose.
This effect is only being amplified on a mobile-first world. The biggest reason that we need PWAs, Google’s AMP, and Facebook’s Instant Articles is that most companies are building incredibly slow products for mobile. While people demanding faster products sounds like a pet peeve from a very anxious engineer, the reality is that most users tend to be insanely impatient and demanding when on their phones (especially when they are out and about instead of chilling out in their living room).
This is particularly important in industries where competition is fierce, like media, where it’s possible for people to change their minds halfway through a loading process and simply click on some other link instead. And what’s more, since news and media sites have a very large chunk of incoming traffic from social media (usually Facebook), these higher abandonment metrics will effectively tell the news feed engine that your content is low quality and make the recommender choose stories from a faster-loading competitor instead.
One of the biggest challenges of launching a mobile app is getting users to actually use it, which is a lot harder than it seems. For starters, most users are reluctant to install unnecessary apps, especially since quite a few apps end up pestering them with useless notifications or just take up a ton of valuable storage space.
What’s worse, installing an app usually takes half a dozen clicks (and sometimes even a password), which is a pretty significant time investment for a product that is probably going to end up sitting unused somewhere in the home screen.
PWAs make the install process a lot smoother. Since they can be added to the home screen with a single tap on Android (no Play Store involved), the conversion rates for PWAs are also insane.
PWAs get 5-6x more installs than regular native apps and perform extremely well in emerging markets since they tend to be lightweight and compatible with the low-end devices that are the norm in those markets.
On Android this will also grant you some extra features, like offline support and notifications, which in our experience are the two biggest reasons for building a native app. This helps provide some extra comfort for your users, as well as improving engagement through the use of well-designed notifications.
[caption id="attachment_1227" align="aligncenter" width="500"] No context, but this seems strangely relevant.[/caption]
A few years ago, when developers started blurring the line between apps and websites, most sites had trouble being indexed by Google and other social networks. This led people to believe that with a web app you lost a ton of SEO and sharing capabilities.
Nowadays, all PWAs can have great SEO and sharing capabilities, thanks to the fact that the underlying technologies have matured significantly. First of all, all major search engines can read and index web apps, and for the few cases that don’t (Linkedin, Twitter, Pocket, and a few others), we can take advantage of something called Server Side Rendering, which helps servers deliver your web app as plain HTML with all the content and meta tags properly preloaded. While it doesn’t sound enticing on paper, this makes it surprisingly easy for bots to understand and index your site, which directly leads to solid SEO and sharing capabilities.
Here’s the best part: it’s incredibly easy to add Server Side Rendering to a PWA. In fact, all the popular frameworks and starter kits provide it for free: Next.JS, Create React App, Preact CLI, and pretty much all others have clear guidelines for implementing this out of the box.
Adding Server Side Rendering can help you shave a few hundred milliseconds off your load times by delivering a version of the site that’s ready to be shown instantly on a phone, instead of having to wait for an app to boot up and do its thing. And faster load times are always a welcome addition.
There’s one more great feature as well: on Android you can take advantage of the Web Share API to integrate sharing capabilities natively with the operating system. Coupled with some smart usage of notifications, you can build some very engaging products just by taking advantage of the latest technologies.
[caption id="attachment_1225" align="aligncenter" width="600"] I’m like 90% sure that Sauron said something about PWAs[/caption]
Since a PWA fits somewhere between a website and a mobile app, it’s a great middle ground for launching a mobile-first product without going into the massive development and support costs that a native app entails.
We can have a single product that supports phones, tablets, and desktop computers and takes advantage of the better characteristics of each one. And because it’s a single codebase (hopefully built with modern technologies), you can have feature parity for all platforms with a single team.
There’s also some great engineering advantages of switching to React, which is our preferred UI library. Since React has support for pretty much everything, the knowledge you get by building your PWA in React can then be applied to your native apps by building them with React Native, which shares the same underlying patterns and can let you share code across iOS, Android, and Web.
While React Native is way outside the scope of this article, there are some great tools like Expo that let you quickly try out the underlying technologies and see just how easy it is to build a native app with the same tech you’d use for a website. Even though React Native is not a perfect match for all use cases, it’s usually worth it to build a prototype to understand the tech a bit better and see if it fits your needs.
Even if you’re not going to apply every single feature behind Progressive Web Apps to all the products in your portfolio, the results and case studies speak for themselves: You need to focus relentlessly on mobile. If you aren’t doing this right now, you should probably consider setting it as your main priority from the product side of things.
We’ve been working on a few progressive web apps of our own as well for the last few months, and the differences in user experience have been nothing short of amazing. We’ve been working with the great Next.JS framework, and the sheer amount of plugins and examples made development a breeze. What’s more, by building with React, we’ve been able to meld our design and development processes together, helping our teams build products faster and iterate a lot quicker.
You can also check out a curated list of Progressive Web App examples like the Financial Times App (which was one of the first ones to launch), the Flipboard news aggregator, and even a small app to check the open source projects by NASA.
There’s many more examples on both PWAStats and PwaRocks and I encourage to check them out, either as inspiration or just because coding an online beer encyclopedia is a pretty fun example of how easy it is to build an offline-first web app.