“Should I Consider PWA?” All The Possibilities of Progressive Web Apps

Have you heard about progressive Web apps? Of course you have. The whole Internet seems to be discussing them right now. And the subject got even hotter after Google I/O 18’ and a long-awaited confirmation that PWAs are coming to desktop for Chrome OS 67 in early June. Work is already under way for Windows and Mac.

But let’s take a step back here… You probably already know this, but the term was coined by two Google engineers, Alex Russell and Frances Berriman, back in 2015. The concept, however, seems to be coming into its own only in 2018.

The popularity of PWA is peaking in 2018 (source: Google Trends)

It is indeed a fascinating concept. PWA allows you to build a website that looks and behaves like a native application across different platforms.

We’ve already seen many examples of companies trying to achieve app-like experience, including offline operation, the ability to add an app to the home screen, push notifications, etc. Do you remember concepts like Windows Store Apps, Electron, and Chrome Packaged Applications? They all did just that, but at the same time abandoned the Web. After all, if you can’t link to something, it’s not the Web.

Progressive Web Apps are a different thing. Instead of deploying native-like applications to all stores at once, like in the case of other cross-platform technologies, the chief objective of PWAs is to reuse existing code to provide a mobile experience. It’s a kind of revolution that’s taking place in modern browsers.

PWAs provide the experience of an app without abandoning the Web. They’re basically websites built with modern technologies and providing a whole new experience to the user:

• they’re installable—if a user visits your website for the second, third, or fourth time, they get the option of adding it to their home screen. After that, it’s still linkable and therefore shareable via URL.
• they’re indexable—your app is visible in the browsers and so it’s searchable for users.
• they work offline—once you download it to your device, you can consume content from the app without an Internet connection. Your users will never see the running downasaur :)
• they can send push notifications—once a new article/product/piece of news shows up, your users will be notified.
• they cut down page load times—as proved by housing.com, PWAs can significantly reduce page load times and thus improve overall UX.
• they’re progressive—they will work for any user on any device, even with a poor Internet connection.

Additionally, PWAs follow the core tenets of a positive Web experience—they’re fast, integrated, reliable, and engaging.

A slide from Google I/O 18’ the speech by Jenny Gove and Pete LePage

This Is How Progressive Web Apps Work

Let me use a cool gif from the example by Paul Kinlan and Matt Gaunt: the Chrome Dev Summit Site.

This is what’s happening:

1. It all starts in a tab. A user visits Chrome Dev Summit for the second (third, fourth…) time. That’s a sign they might be interested in future content from this page and the browser is able to check whether they meet the frequency criteria. To avoid spam, nothing happens on the first load.
2. The user gets an invitation from the browser to keep the website saved as an app on their home screen thanks to the power of Web App Manifest.
3. The app install banner can be canceled or made to reappear at a more convenient time if the user doesn’t want to add the app immediately. If they do install it, the banner won’t appear anymore.
4. The user can revisit the app any time now. It will work offline (with some limitations, of course), stay responsive, fast, and keep all the PWA magic.

Note, that the capabilities of PWAs are now also extend to desktop, so very soon users will be able to get the app to their computers.

When Should I Consider Developing a PWA

The thing about PWAs is that they’re not visible in app stores (apart from Microsoft Store), so choosing this approach will close that particular specific traffic channel for you. Can your business handle that? Choosing the PWA approach can also make little sense if your users don’t visit your website on a regular basis because they can be prompted to download the app to their home screens only while visiting the site in a browser. On the other hand—if you don’t have frequent visitors, building a mobile app makes even less sense… What I’m trying to say is that PWA is definitely part of the future of apps, but the approach is not flawless. At least yet.

The questions below and their answers will help you decide whether PWAs are a solution you should take a closer look at:

1. Is reducing customer acquisition cost one of your key objectives?

Apologies if you felt somewhat manipulated into answering in the affirmative, but PWA actually does reduce CAC. User acquisition is hard and really expensive for native apps and some companies out there have already announced that their acquisition costs shrank by as much as 10 times after introducing PWAs. The more time and barriers that can be removed from acquisition process, the better, so PWAs are definitely a winner here.

2. Do your users download your app via app stores? Or would they?

If you’re developing an app for managing home budgets, there’s high chance that your prospective users are browsing app stores using keywords like “budget management,” “home budgeting,” and the like. If you’re Spotify (well, are you?!), your users are much more likely to download your app directly by visiting the app store rather than by visiting spotify.com. But don’t take my word for it—that’s actually just my presumption.

And just so you know, Spotify actually has a PWA. You can check out the simple demonstration of its launching on Chrome OS, desktop.

3. Does your app require considerable processing powers?

PWAs will work perfectly for e-commerce platforms, event websites, education-oriented portals, and the like. Also keep in mind that with PWAs they can be accessed offline only in a limited version. On the other hand, some apps may actually benefit greatly from running directly on the device and having direct access to its resources.

4. Do you need platform-specific native features?

PWAs have one very important thing in common with native apps—push notifications. You can easily remind your users about your existence once you publish new content or add new products to your stack. BUT. If you plan on introducing features such as geofencing, mobile payments, and access to contact lists/calendars to your app, going with a native app would be a much better choice.

5. Are you okay with waiting for better support from Apple?

Support for PWAs is currently strongest on Android/Chrome, while the iOS/Safari user experience is still sub-par. Apple added PWA support in iOS 11.3, however the list of missing features is still quite long: no push notifications, no splash screen, lack of Web App Banner, lack of support for other browsers than Safari, and much more.

6. Do you already have a mobile-optimized website?

The cost of turning it into PWA will be relatively low, especially compared to developing a native app from the ground up. And you get all the PWA goodies in the package.

 If you’re still building your product and readying it for release, PWA and iOS will work together in most cases (thus giving you Web + iOS + Android versions). There’s a chance, however, that in the near future PWAs alone will do all the work.

Real-Life Cases

For those who are not yet convinced that PWAs are a thing now, Googlers have prepared loads of case studies outlining how the technology positively impacted businesses of different shapes and sizes—and there is an extremely high probability that you’ve already used one of the products that decided to redevelop their websites to follow this new approach as the list of businesses that have adopted it since its release now includes Forbes, Twitter, ele.me, Lancome, OLX, Guardian, AliExpress, and Flipkart. But the whole list is much, much longer.

Now let’s see how PWAs influenced some of those businesses. 

Twitter Lite

Twitter is one of the most popular social apps out there with 328M monthly active users. Given that 80% of them use Twitter on mobile, the devs wanted to enhance the mobile experience to be faster and more reliable. Making PWAs the default mobile experience in April 2017, they managed to: 

• Decrease bounce rate by 20%
• Increase number of Tweets sent by 75%
• Increase number of pages per session by 65%

Those are pretty stunning numbers. Lite users can also reduce the rate at which they’re burning through their data plans; a PWA is only 600kB, while the downloaded version weighs 23.5MB. For the Lite version, first load time on a 3G network is about 5 seconds. When the user returns, the app loads up in under 3 seconds.

According to Nicolas Gallagher, the Engineering Lead for Lite: “Twitter Lite is a client-side JavaScript application and a small, simple Node.js server. The server handles user authentication, constructs the initial state of the app, and renders the initial HTML application shell. Once loaded in the browser, the app requests data directly from the Twitter API.”

Read the full Twitter Lite case study.

MakeMyTrip.com

Over two-thirds of the incoming traffic to the website of India’s leading travel company comes from mobile devices. With 23M downloads of their native app, mobile is a indispensable channel for the company. Launching a PWA version significantly improved user experience and boosted revenue, it also:

• Tripled conversion rates
• Improved page loading time by 38%
• Increased the number of shopper sessions by 160%

Even when Web App Banner does not show up, MakeMyTrip.com encourages visitors to add their PWA to the home screen.

MakeMyTrip found it difficult to deliver flawless user experience to users with poor Internet connections. Moreover, the number of drop-offs and customer acquisition costs were unacceptable and developing a PWA turned out to be a great remedy for those problems. Ultimately, MakeMyTrip decided to stick to both native and PWA approaches, and they balance their strategy with both solutions in play.

Read the full MakeMyTrip.com case study.

Pinterest.com

This image-based platform serves a "catalog of ideas" that inspires over 200 million active users monthly. The dev team wanted to improve the overall user experience and strive for the better type of conversion than just installation of the app. Rewriting the mobile website from scratch as a PWA brought some impressive results:  

• Increase of weekly active users by 103%
• Increase of Pins seen by 401% 
• Increase of logins by 370% and new signups by 843%
• Decrease of the page payload from 490kb to 190kb

The new UX design enhances user engagement and offers smooth, intuitive navigation.

A PWA seemed to be a solution to changing engagement type as well, as the average session length increased by 296%. Through rewriting, Pinterest answered the most burning problems of the users. The app is now significantly faster, gives native experience and has a "night mode"—with subdued colors improving the comfort of your eyes. Since shipping the new experience, the platform managed to gain 800 thousand weekly users using the PWA like a native app (from their homescreen).

Read the full Pinterest.com case study.

More must-reads on PWA:

Betting on the Web - Why I build PWAs by Henrik Joreteg

Progressive Web Apps on iOS are her by Maximiliano Firtman

Why should you care about PWA? By Arfat Salman

PWAs: building bridges to mobile, desktop, and native (Google I/O '18)

A Tinder Progressive Web App Performance Case Study by Addy Osmani

A Pinterest Progressive Web App Performance Case Study by Addy Osmani