While most of the attention in the IT industry is paid to React Native vs. Native contention, Progressive Web Apps are elbow their way to become a significant alternative in the mobile market. Google which introduced PWA in 2015 armed it with distinctive values gaining the advantage over other solutions. Among multiple detailed assets there are three main ones which Mountain View giant emphasizes:
- Reliability - maintain instant loading to enable access even when the problems with the Internet connection will appear.
- Speed - ensure high performance in every browser and device which in the age of mobile is essential but also hard to provide in terms of a growing number of apps’ features. To speed up page loading Google delivers tools and techniques and recommend implementing good practices like PRPL pattern in PWA development.
- Engagement - save a great full-screen experience of mobile apps but with no need to download it from the app store. With the ability to use web push notifications PWA’s can even re-engage users.
With those advantages, Progressive Web Apps might take over the mobile industry. But do they really work at present? We’ve taken a closer look at some PWA examples and case studies to see how the promises correspond to the reality.
AliExpress - support for native app
AliExpress case shows that building PWA does not necessarily mean burying the existing mobile app. What’s more - it can help to improve it and let it grow more effectively! “Chinese Amazon” was looking for a solution to encourage users to install their app considering the web is the most common discovery platform. Their mobile website didn’t face up this challenge because of not enough engaging experience. AliExpress decided to create cross-browser Progressive Web App and cherry-pick the benefits coming from both technologies - web’s reach and native’s UX. And the results were incredible! The conversion rates for new user jumped up by 104%, the number of visited pages doubled and the time spent on AliExpress increased by 74% (per session).
George.com - native-like user experience
Not only AliExpress case proved that delivering UX of the mobile app is one of the most significant advantages of PWA. Especially for e-commerce companies obligated to provide great design and pleasing experience for the users. With mobile shopping avidly gaining ground there’s a huge need of technologies which will engage but not overload devices. George.com, top UK clothing brand, had to make an innovative move to remain leader position and meet the high expectations of its customers. To reach the goal they bet on creating own Progressive Web App and then just reap the fruits of the implementation: 3.8x faster page load time, 31 % increase in conversion, 20 percent more page views per visit.
The Best Western River North Hotel & OLX - sell more
All of the mentioned growing stats are impressive but do and how they result in the financial ground? Chicago-based hotel case proves that the hospitality industry can gain so much by introducing new technologies to the business and PWA might be the perfect match for it. The implementation of the Progressive Web App did not only enabled to keep the aesthetic, modern booking system's design but also supported structuring the data to improve exposure for search engines and strongly boosted the speed of the website. All of these has translated to a 300% increase in revenue and a 500% increase in room nights (compared with the old website). Show you some more money? OLX India, the platform for buying and selling used products, improved the monetization by achieving 146% higher clickthrough rate (CTR) after PWA introduction. More? Pinterest gained 44% rise in user-generated ad revenue in comparison with the previous, traditional mobile web.
Uber - super light, unbelievably fast
With rapidly expanding international reach the fundamental issues Uber needed to improve was the speed and weight of their service. The company wanted to provide effective performance for any device and even on slower networks. The choice couldn’t have been different - Uber built PWA. Hard to believe the core app is as small as 50kB which gives it the ability to load in less than three seconds...on the 2G network! How developers achieved that? The tech-stack is quite fascinating. To zip all the main features in such a microscopic app they chose tiny libraries, Preact over React (which is used in traditional Uber architecture), Webpack for code splitting and to save some space in designs they captured images in the SVG format. And there are more software development tricks in this Progressive Web App example so we highly recommend checking the full story behind it. Another intriguing case of tech blend in PWA implementation might be Ele.me, online food delivery service, which is one of not so many Multi-Paged app Progressive Web App and moreover - build with Vue.js.
Housing.com - providing offline access
Quick loading and ultra-lightweight are PWA values which not only impress but sometimes they are just crucial to enable people to use services on their mobiles. Most aware of this issue are companies operating in the markets with smartphones in abundance but lack of well-performing internet infrastructure. Progressive Web Apps provide the ability to minimize features and speed-up the performance but also to maintain access even when being offline thanks to the service workers. Housing.com, one of the top startup in India, made great use of this attribute while developing their own PWA. The results were worth the effort as this real estate platform gained 38% increase in conversions and reduced bounce rate by over 40%.
These few Progressive Web Apps examples bring something more than just inspiration - specific results and tech ideas for software development. They bear out that PWA is able to fulfill promises and provide effective performance but not closing the door for creative and ambitious projects using most up-to-date solutions.
Navigate the changing IT landscape
Some highlighted content that we want to draw attention to to link to our other resources. It usually contains a link .