June 8, 2018

7 Best Progressive Web Apps Examples

Digital Experience

PWAs — progressive web apps — are rising in importance. But what are some examples of progressive web apps? Here we cover the best PWA examples.

What Are the Best Progressive Web Apps Examples?

The best progressive web apps examples include Starbucks, Twitter, and Flipkart PWA. Keep reading to learn more.

It seems as if development teams have taken the new rebirth/relaunch of PWAs — (finally iOS 11.3!!!) as an opportune time to start with a fresh, clean slate.

In fact, all 7 mentions on our PWA apps list actually got a jump before iOS/Safari had PWA support. They are all now well-positioned and realizing real benefits in user experience with their PWAs.

What Successful PWA Apps Have in Common

What these companies seem to have in common is taking this (PWA) opportunity to use create the lowest bandwidth, friendliest-to-2G, fastest possible performing app without all the feature/code ~~bloat~~ evolution that can happen when you’ve been building off the same codebase for 10 years.

Impressive PWAs are being built as incredibly small and efficient apps. Teams appear to be in a race to build the leanest possible version of their native apps in PWA form and are using new highly-optimized libraries (e.g. react, redux, webpack) while utilizing PWA caching tools to overcome connectivity issues.

For users, this means a faster-launching, snappier-feeling app that's less fickle about connectivity and offers users a better overall experience. Which would you rather fire up to get your morning coffee — a 50MB or a 233kb app? Coffee faster? Yes, please! Faster than you can say, "Add to Home Screen."

Top Progressive Web Apps Examples to Learn From

Here are the top PWA examples from companies that got it right:

Instagram PWA
Twitter PWA
Starbucks PWA
Tinder PWA
Pinterest PWA
Uber PWA
Flipkart PWA

Explore the in-depth PWA apps list below to learn more about the best progressive web apps.

1. Instagram PWA

Before the PWA, if you visited instagram.com in your browser, you could really only look at your timeline and your profile (plus other people's profiles). Now, the (progressive) web app looks very similar to the native app and has new Search and Activity tabs.

You can upload pictures, but you can't tag users, add a location, or share the picture to other social networks at the same time. You also can't receive notifications through the app, send and receive direct messages, or use Instagram Stories.... yet.

2. Twitter PWA

There are several barriers to using Twitter, including slow mobile networks, expensive data plans, or lack of storage on mobile devices. While smartphone adoption grew to 3.8 billion connections by the end of 2016, 45% of mobile connections are still on slower 2G networks, according to GSMA.

With the Twitter Lite (PWA version), you will see a preview of images and videos before choosing which ones to fully load. This can reduce your data usage by up to 70%, making it more affordable for you to use Twitter in areas where mobile data is expensive.

Some Limitations:

No swipe gestures. This one can be a deal breaker if you love swiping between the tabs.
No night mode.
No multiple accounts.
Yes to emojis. If you can't have gestures at least you can use a laughing face.
No drafts with lite version — better get it right the first time!

3. Starbucks PWA

The PWA had a lot of positive results beyond the main scope of the project. By virtue of the specific requirements of a PWA, the final version of the PWA clocked in at 233KB, 99.84% smaller than the 148MB size of the mobile iOS app. The PWA is also faster than Starbucks’ existing iOS app, making the web app a favorite amongst its users.

Test PWAs With Perfecto — Start Your Free Trial Today

4. Tinder PWA

Tinder took 3 months to build and implement their MVP PWA based on React and Redux. The result of their efforts is delivering the core Tinder experience in 10% of the data-investment costs for someone in a data-costly or data-scarce market. That's a reduction from a 30MB native app to a 2.8MB PWA — which is downright impressive. Additionally, Tinder cut load times from ~12 sec to ~4.5 sec. Swipe right on the Tinder development team!!!

*special thanks to Addy Osmani with an excellent write-up on Medium

5. Pinterest PWA

With previous mobile web app Users often had to wait 23 seconds before any UI was usable at all, Pinterest set out (much like our other examples) to create a fast, light experience that would ultimately lead to better engagement and conversion. The Pinterest team reduced the 'Time to Interactive' a staggering 75% from 23s to 5.6s.

6. Uber PWA

The core Uber PWA is only 50k gzipped and takes less than 3 seconds to load on 2G networks.

Tinder goes into some serious detail on their engineering blog about how they were able to achieve this feat

7. Flipkart PWA

The Flipkart PWA app is called Flipkart-Lite.

Here are some incredible stats of what happened when Flipkart PWA launched:

3x lower data usage
Users time on site with Flipkart lite vs. previous mobile experience: 3.5 minutes vs 70 seconds.
3x more time spent on site
40% higher re-engagement rate
70% greater conversion rate among those arriving via Add to Homescreen

Learn From the Best Progressive Web Apps Examples

Apple surprised quite a few people with its sudden move to support service workers (and by extension PWAs) in iOS 11.3. For the last few years, there was no reason to expect, or even hope, that they would get on board.

Whether they were dragging their feet because they felt it could undermine their extremely successful app store — or because they’re never eager to be seen as following Google’s lead on anything — the fact is that Apple’s “blessing” effectively opened the whole market to PWAs.

Instead of remaining a niche tool for the Android market, in March 2018, PWAs became a viable way of reimagining everyone’s internet presence — on all platforms. As the technology develops, we can expect new levels of creativity.

For the time being, the data seems to suggest that big companies are using PWA to address the problems of application size and page load times — to great effect.

What's Next?

Google is placing a greater emphasis on page load times in their ranking system. Research indicates that people interact more with faster apps. A huge number of people still only have access to 2G mobile networks.

By focusing on slimming down their web offerings, companies can address all of these issues, all while simplifying their coding team infrastructure. PWAs are a win-win-win!

But, like all apps, they still need to be thoroughly tested. This ensures that users are getting the best possible experience.

Perfecto can help you test PWAs. With Perfecto, you can:

Automate more tests.
Boost test coverage.
Scale with parallel testing.
Accelerate faster than ever.

Try the world's only end-to-end continuous testing platform for yourself. Get your free trial today.

START TRIAL

The 2023 State of Test Automation