PWAs Part II: How 7 Global Brands Are Taking Advantage of Progressive Web Apps

PWAs Part II: How 7 Global Brands Are Taking Advantage of Progressive Web Apps

//PWAs Part II: How 7 Global Brands Are Taking Advantage of Progressive Web Apps

PWAs provide a fresh (& lean) start for major brands apps

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 apps on our list actually got a jump before iOS/Safari had PWA support and are now well-positioned and realizing real benefits in user experience with their PWAs. 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 & 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’.

See how some of the world’s top dev teams are benefitting from PWAs:

Instagram

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.

Twitter

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 cant have gestures at least you can use laughing face
  • No Drafts with Lite Version – Better get it right the first time!!

Starbucks

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.

Tinder

Tinder took 3 months to build and implement their MVP progressive web app 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 progressive web app — 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

Pinterest

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.

Uber

The core Uber (progressive web) app 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

Flipkart

  • 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

CONCLUSION

Apple surprised quite a few people with it’s 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.

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!

Check back for part 3 of the series where we’ll share some indispensable tips and tricks for testing progressive web apps. Perfecto has been working on PWA for a while and is uniquely positioned to help you with some of the new and difficult testing problems raised by PWAs.

Want more on PWA? Check out some other resources:

 

Eran Kinsbruner is the Lead Technical Evangelist at Perfecto and the Author of the Digital Quality Handbook. He is formerly the CTO for mobile testing and Texas Instruments project manager at Matrix, Eran has been in testing since 1999 with experience that includes managing teams at Qulicke & Soffa, Sun Microsystems, General Electric, and NeuStar. You can find Eran on Facebook, Twitter @ek121268, LinkedIn, and on his professional mobile testing blog at https://continuoustesting.blog/.

Leave A Comment