A brief elaboration on Progressive Web Apps (PWA)

Progressive web apps seem to be the latest buzzword, but what does it mean? We’ll elaborate on what a progressive web app is, why it matters, and how you can build one. In this article, we’ll cover the key concepts of a progressive web app and how you can get started. So let’s jump in.

Web development has changed a lot over the years. When Ajax transformed the web from static pages into dynamic interactive experiences, users’ expectations went from clicking on the side of a map and waiting seconds for it to scroll to something like the Google Maps experience, with live panning and zooming. You don’t have to live with that horrible click and wait for user experience. Unfortunately, the improvements we’ve seen on the desktop web haven’t translated as well to the mobile web. Consider this — if I asked you to open Google Maps on your phone, would you do it using the native app or through the browser?

Chances are you’d use the native app. Mobile is the key factor driving this revolution.

The growth of mobile

We now use mobile devices more than desktop computers. And depending on which stats you look at, it’s been this way for more than two years. On mobile, users spend most of their time in native apps rather than on the web.

In fact, they spend 87% of their time in native apps versus only 13% of their time on the mobile web. When asked why users often say that apps are more predictable. They’re easy to find on the home screen and feature push notifications that bring them back. So should we abandon the web and go build native apps? Of course not.

There’s a flip side to native app usage. App usage is highly concentrated, and users tend to only install and use a few apps. If you’re not one of those chosen apps, too bad. Users have told us that they see native apps as a big commitment in space, time, and cost. According to a recent study, the average user installs zero apps per month — zero.

None. By contrast, mobile users visit over 100 websites every month. This is the power of URLs and the ephemerality of the web. One way to think about the difference between native and web apps is on the capability axis. When you tap on their icon, native apps start quickly.

They tend to work offline. They can show notifications, sync in the background, and have access to sensors like cameras and microphones. But the reach is somewhat limited, requiring a different version for each platform. The web is safer, and its permission model is more respectful of your privacy. But without some of the same capabilities, it doesn’t matter how many people can use it.

Best of Both worlds

We want to combine the capabilities and experience users are used to in native apps with the reach of the web. We want the best of both worlds. A progressive web app is simply that — a great user experience that feels integrated and earns a place on my home screen without having to give up the reach to get it. The term “progressive web apps” really just means radically improving the quality of your end-to-end user experience. In order to do that, we need to focus on four things — making the app fast, making the experience more integrated, ensuring that it works reliably, and keeping users engaged.

Let’s take a look at each of these properties in a little bit more depth.

Users expect apps to load quickly and to have smooth scrolling. Unfortunately, the web has a bad name for this, especially on mobile. For now, let’s focus on load performance, which means making sure that your web app loads fast. Now, this isn’t just esoteric.

We all know that time is money. This chart shows just how true that is. 20% of users will abandon a site if it takes more than three seconds to load. Now, I could make a joke about kids today and short attention spans, but I’m guilty of this, too.

Other studies show even worse results.

After three seconds, 53% of users will abandon a site.

In short, speed kills. Users shouldn’t have to reach through a browser tab to access your app. In fact, the user shouldn’t even think about the fact that they’re on the web. Instead, they should be able to interact with it in the same way that they interact with all of the other apps on their device.

They expect to launch it from the same place they launch all of their other apps. They expect to see it in the task list. They expect it to have all of the capabilities and hardware access that other apps have. Web payments — something that we’ll cover in a future article — is a good example of keeping a user in your flow.

Instead of requiring the user to fill out a complex checkout form, the Payment Request API simplifies it down to a few taps and can even integrate with other payment apps like PayPal or Android Pay.

Another good example is media playback. With the Media Session API, you can provide metadata about what’s currently playing and even handle media-related events from the user. If the screen is locked, the user can quickly see what song is playing and maybe skip to the next song.

It works offline, do users know this?

Users don’t expect the web to work without a network connection. And often, they don’t even bother to try when it’s a slow or intermittent connection.

We need to change that perception. Web apps must be reliable. When the user taps on a home screen icon, they expect it to load instantly and reliably. Apps launched from the home screen should never show the Dinosaur. Thinking back to the ’90s when the web grew up, this is how we got online.

Going online meant putting the whole house into online mode. I remember having to yell upstairs, don’t pick up the phone. And if someone did, it would kill my connection. We used to know when we were online. But now, in the broadband era, we don’t even think about it.

Desktop connectivity is just always there. We’ve become used to always being online.

And when we’re not and we see this cute little Dinosaur, it’s a disaster. Mobile phones aren’t always online. Maybe you’ve turned on airplane mode or your subway stop doesn’t have service.

And even when you have four bars, you might not have a live connection. But it’s not just the no connection that breaks the user’s trust. It’s slow and intermittent connections that affect users just as much. Still, mobile apps never show the Dinosaur. Nothing on my home screen shows this. In order for a web app to earn its place on the home screen, we need to make them reliable, even when the network isn’t. An engaging app goes beyond functional and ensures that the whole experience is delightful, making it easy for the user to do what they need to do.

App functionality to the rescue

Using features like web push, it’s always up to date. Notifications keep the user informed. An engaging app uses the right capabilities at the right time in a beautiful way.

One example — push notifications. They’ve existed for a while, but I’m really excited that we finally have access to them as web developers, and they even work when the browser is closed. On mobile devices, notifications are a fundamental part of turning a monthly active user into a daily active user. So, enough exposition. Let’s take a look at Twitter Lite, a progressive web app designed to deliver a more robust experience with explicit goals for instant loading, increasing user engagement, and lower data consumption.

The Twitter Lite progressive web app combines the best of the modern web and native features. It became the default mobile web experience for all users in April of 2017. On the first load, it looks and behaves like any normal web app. This is a well-designed mobile experience — smooth scrolling, responsive design, all of the rest. When I revisit the site, Chrome prompts me with an “add to home screen” banner, making it easy for me to add it to my home screen.

When I click Add, a little toast pops up letting me know it’s been added to my home screen. In a future version of Chrome, progressive web apps will also be added to the task launcher. Let’s see how it looks. There it is on the home screen. Tapping the icon starts it immediately, showing a splash screen while things are loaded.

Then, it launches into a full-screen experience.

It feels like all of the other installed apps on my phone. Even clicking on the Task Manager shows it as a top-level app using the icon, app name, and colors defined in the manifest. Being in the user’s field of view is very important for reengagement. Shortly after launching Twitter Lite, they were seeing over 1 million launches from the home screen every single day.

The leaders setting the status quo

Twitter implemented web push notifications that work the same as those from their native app and arrive even if the user’s browser is closed. Users are prompted to enable notifications or can go into the settings and enable notifications there. Notifications appear on the locked home screen. And when I click on the notification, I’m taken directly to the relevant place, making it easy for me to reply, like, or retweet something. When tweeting, users have access to all the same features they expect. They can take pictures, attach photos they’ve already taken, and so forth.

It was pretty cool to see Twitter demo this at their launch event, where they posted a tweet with an image in about a second and got hundreds of likes, all while still on stage. Reaching a broad set of users is important for Twitter, especially those in emerging markets where lower download speeds and less powerful mobile devices are common. Twitter Lite helps reach this audience more effectively by making Twitter faster and easier to use on low-bandwidth connections.

Twitter Lite is only about 600k over the wire versus almost 24 megabytes to install the native Android app.

And for Twitter, which measures its success in the number of tweets and pages viewed per session, their progressive web app has been a flyaway success, with a 75% increase in tweets sent and 65% more page views. Today, Twitter Lite has more active users than any other Twitter client. Twitter Lite is fast. It launches as a full-screen app from my home screen. It’s reliable, working no matter what my network connection is, and it’s engaging.

Service Workers is one of the new platform APIs that’s behind many of the new capabilities that I’ve been talking about. The traditional web model requires the browser to go to the network for every single request. And if the network is down, everything fails, and you get that famous Dinosaur. But you don’t always need to traverse the network every single time. The Service Worker can cache all of the resources needed for your page.

It gives you full control to manage the cache and allows you to decide when to hit the cache and when to hit the network.

The advanced browser ‘workers’

Service Workers can handle more than just network requests. They can handle system-level notifications, like push messages. A push message is just another type of request that the Service Worker services. When a message comes in, it wakes up the service worker, then calls it on push handler.

Earlier this year, Lancome launched a new progressive web app. Compared to their previous mobile experience, time to interactive dropped by 84%, leading to a 15% decrease in their bounce rates. To reengage with users, Lancome added web push notifications, alerting users about exclusive promotions, product releases, and reconnecting with shoppers who have abandoned their carts. This strategy has delivered an 18% open rate on mobile, and conversion rates on abandoned carts have increased by 8%.

Cross-platform experience at the max

The new strategy also delivered a much better experience across platforms.

iOS is important to Lancome, and 65% of all users landing on their progressive web app are on iPhones.

With their new PWA, Lancome saw a 53% increase in session length and a 10% decrease in bounce rate among iPhone users, despite the fact that some features were unavailable to them.

All told, the progressive web app has been a tremendous success, driving a 17% increase in conversions. Lyft also launched its new mobile site as a progressive web app, with the needs of emerging market users in mind. In emerging markets where you can’t take bandwidth or even connectivity for granted, it’s even harder for your audience to get into your app.

Instead of making a simple landing page that asks the user to install something, their progressive web app is a feature-complete version of Lyft, just without the install step. Remember, the goal isn’t to get the user to install your app, it’s to get them to use your service. The word “progressive” in progressive web apps isn’t there accidentally. Focusing on the end-to-end user experience will have a dramatic impact on your business, even for users who can’t experience the full power of progressive web apps because they’re on a device that doesn’t fully support Service Workers.

A progressive web app doesn’t have to be a huge undertaking

So how do you get started? Well, first and foremost, you need security. That means serving your site from a secure origin. Everything must be served via HTTPS. It’s like table stakes for your progressive web app.

In fact, for many new and even some old powerful web APIs like geolocation, it now requires a secure origin. You may know the green lock from the URL bar. The green lock indicates that there’s a secure connection between the site and the user. Having a secure connection really means three things. The user can trust that the site is actually you, they can be assured that no one has tampered with the page and that no one is listening in on the connection.

The web has tremendous reach, and it’s frictionless, so keeping users safe is hugely important. Once you’re serving everything from a secure origin, you’re ready to begin your journey of building a progressive web app.

There are plenty of ways to get started, but they can be summarized in these three approaches 1. building from the ground up

2. starting with a simple version, and focusing on a single feature

3. Each of these makes sense in a different scenario.

Starting from the ground up makes the most sense when a site is about to go through a redesign. If you’re starting from scratch anyway, it makes sense to build in progressive web happiness from the beginning. This approach enables you to easily use the app shell pattern and take advantage of the power of Service Workers. OLX is one of the largest online destinations for classified ads in India, providing communities and high-growth markets with a vibrant online marketplace. They looked to progressive web app technologies to provide a faster loading, immersive, and app-like experience. After launching their progressive web app, the time until the page becomes interactive fell by 23%, with a corresponding 80% drop in bounce rates. OLX also wanted to reengage mobile users, just as they would on their mobile app. This meant taking advantage of capabilities like push notifications and add to the home screen. These two updates increased engagement by 250%.

Monetization also improved. With ads loading faster, the click-through rate has increased by 146%. Of course, not everyone can take this approach. Starting from scratch often isn’t realistic. The second approach is to build a simple version of the site — the light or mobile version — and choose to optimize around a specific section or user journey. An example of this approach is Air Berlin.

Their schedule and demands didn’t make it possible to start from scratch, so instead, they focused on the post-booking experience.

Their user journey is one you might be familiar with. You’re at the airport, and you want quick access to your itinerary details, destination information, and above all else, the boarding pass. Their progressive web app heavily leverages caching to ensure that it loads super fast and works reliably. From the time the user taps on the home screen icon until the boarding pass is up is less than a second, and it works even without an internet connection. The final strategy is to define a specific feature to focus on.

Pick one feature where you can have a high impact, and focus on that. This is frequently the approach needed at large companies, where you may not have the backing to start from scratch or even build a separate simple version. For example, The Weather Company has been interested in progressive web app technologies for quite some time, but they needed to prioritize based on what they believed would be the highest impact for their users and their business.

Notifications for the win

They decided that the most impactful feature was notifications. They decided to focus on a single feature with web push, and they went big, rolling out notifications globally in over 60 languages.

Users on their mobile web app can subscribe to multiple types of notifications, just like on their native app. This success sets them up on their journey to build a full progressive web app experience. In the first three months of rolling out a web push, Weather saw over a million opt-ins. Web push notifications allow Weather to reach a whole new audience with the same set of notifications as their native app users.

As you think about your journey, do what makes sense for your users, your site, and your company.

Speaking of, we’ve been so excited to see the incredible momentum on progressive web apps around the world. Large companies, such as Wego, Expedia, Outlook, ZiggoTV, and Trivago have all rolled out successful progressive web apps. Publishers like Infobae and Forbes have launched progressive web apps, and Forbes has seen a doubling of user engagement since their launch. E-commerce sites such as Fandango, Alibaba, and Rakuten have all invested in progressive web apps. Even new services, like ride-sharing companies, that we might think of as app-only are getting in on the action.

Lyft rolled out their progressive web app last fall, and Ola Cabs, the largest ride-sharing service in India, has just launched their progressive web app. This is just a sample of some of the folks who are shipping or actively working on progressive web apps. Every one of these companies has had its own path for how they’re investing in the mobile web and starting down the path of progressive web apps.