As mobile app development is evolving, many leading businesses – including Starbucks, Spotify and Pinterest, have been switching to progressive web apps to deliver better user experience for their customers. And this is not a coincidence – with PWA technology, companies are able to achieve up to 36% higher conversion rates, 50% higher customer engagement, and they spend 3-4 times less on their PWA compared to a native mobile app. Today, we will see some brilliant progressive web app examples – and what makes them stand out from the competition.
What is a progressive web app?
Progressive web apps, also known as PWAs, are hybrid applications that take the best from both worlds – regular websites and mobile apps. Their technology is based on progressive enhancement principles – a development approach that puts emphasis on web content first, and ensures that the app will be able to work for every user regardless of their device, browser, or Internet connection.
In other words, PWAs are websites that look like and behave like native apps, but without the hassle of downloading them from the app store as you can access them from a simple URL. They are light, extremely fast to load, and can be built for a fraction of the cost that you would pay for native mobile app development.
Having said this, let’s jump right into our progressive web app examples:
1. Forbes
First on our list of brilliant progressive web app examples is Forbes. In 2017, the company finally launched their ultra fast PWA after spending months “implementing best practices for mobile page performance across both iOS and Android phones”.
Their app was designed to deliver a highly visual, beautiful and engaging customer experience, loading considerably faster than Forbes’ previous mobile website – just 2.5 seconds compared to 6.5 seconds before that. Their homepage takes only 0.8 seconds to load completely!
Additionally, when installed on Android phones, it can be configured to send push alerts to customers, among with other app-familiar features such as gesture-based navigation.
Forbes launched a progressive web app with the purpose of rebranding their mobile experience and serving better their audience segments. By doing so, they achieved a 43% increase in sessions per user, 100% more engagement, and got their ad viewability up by 20%.
2. Starbucks
Undoubtedly, one of the most famous progressive web app examples is Starbucks. The company first released their mobile ordering app in 2015 – however, because they also wanted to add an ordering functionality to their website and make it universally accessible to both established and emerging markets, they decided to put all of their efforts into building a powerful progressive web app.
Considering that one of PWA’s most important benefits is their ability to work offline, this way Starbucks ensured that their app will also be accessible in emerging markets where Internet connection is not always stable. The offline-first approach of progressive web apps means that detailed information and the apps’ features are stored via built-in service workers cache – making them accessible even if users don’t have an Internet connection.
Starbucks’ goal was to allow customers to browse the company’s menu, personalize their orders, and add items to their shopping carts even if they weren’t online at the moment.
The result was a fast, high-performing, and easy to use PWA designed to create a seamless customer experience. According to PWAstats, Starbucks’ app managed to double the amount of their daily users, and get orders on desktop as the same rate as orders on mobile. Additionally, the final version of the progressive web app ended up being only 233KB, which is 99.84% smaller than the 148MB size of the mobile iOS app.
3. Lancome
Next on our list of progressive web app examples is Lancome, one of the leading French brands for luxury skin care, fragrances, and makeup at higher-end prices. By building a PWA, the company wanted to achieve higher customer engagement and conversion rates, individualized shopping experiences, and a connect on a deeper level with their customers.
By building a progressive web app to deliver better mobile experience for their customers, Lancome was able to achieve a +36% increase in mobile revenue. Additionally, their app takes just 1.77 seconds to become interactive, meaning that their overall speed has increased by 50% compared to their previous mobile website.
4. Twitter
In 2017, another company launched their progressive web app – Twitter, with their PWA Twitter Lite. Twitter Lite was designed to be fast and responsive, using less data and taking up significantly less storage space compared to its regular mobile counterpart.
The company also achieved speed and reliability through a series of incremental performance improvements known as the PRPL pattern (push, render, pre-cache and lazy load), as well as by leveraging the new capabilities of modern browsers such as Service Worker, Web App Install Banners, Web Push Notifications, IndexedDB and more.
Additionally, Twitter Lite is designed for progressive loading, becoming interactive on most devices in under 5 seconds over 3G. According to Twitter itself, they managed to reduce average load times by over 30% and 99th percentile time-to-interactive latency by over 25% since the launch of the app. On top of that, they also achieved a reduction in data use by default, relying on cache data and serving small media resources.
Twitter Lite has managed to optimize images to reduce their impact on data usage by up to 40% as users scroll down their timeline. All these numbers show that Twitter’s progressive web app has significantly improved user experience while ensuring better adaptation to different electronic devices.
5. Pinterest
Next on our list of progressive web app examples is Pinterest, one of the most popular social media platforms. The company launched their PWA in 2017 because they wanted to boost their international growth. After performing a comprehensive research on user behavior and especially behavior on mobile, they found out that their current web experience was old and slow, converting only 1% of users into sign-ups, logins or native app installs.
The company saw a huge opportunity to improve their conversion rates both on mobile and desktop, which led them to the decision to invest in a progressive web app. As we mentioned previously, PWAs are essentially websites with the look and feel of a native app – which means that Pinterest saw the opportunity to improve both their mobile and desktop experience with a single development (and investment).
Over the course of 3 months, Pinterest completely rebuilt their mobile presence using React, Redux and Webpack, which registered a significant improvement in their core business metrics. Their app achieved a 40% faster loading speed compare to their old one, while user-generated revenue went up to 44%. Pinterest’s core engagement noticed an increase by up to 60%, registering a serie of improvements compared to their previous mobile experience.
In terms of loading speed, Pinterest registered a drastic improvement, reducing time to interactive from 23 seconds to just 5.6 seconds. On top of that, first meaningful paint was down from 4.2 seconds to just 1.8 seconds. The size of the app’s core bundle went from 650KB to 150KB.
6. Trivago
Next on our list of progressive web app examples is Trivago, one of the leading search engines for searching and comparing hotel prices, used by over 120 million visitors monthly.
The company decided to go for a PWA to reduce user frustration from having to download a heavy app and spending excesive money on mobile data in the process – which is typically the case for native mobile apps.
Additionally, user experiences are often dependent on Internet connection, and an app that is not able to deliver an optimum experience under all connectivity circumstances certainly was not something that Trivago, a company of innovation and disruption, wanted to go for. For this reason, the company began looking for solutions to ensure that their users are enjoying a fast, smooth, and seamless experience.
According to Laura Oades, Designer for Trivago’s progressive web app, the biggest challenge for the team was a user interface that conformed to the established standards of mobile websites, while also providing an intuitive and discoverable functionality:
“On mobile you have the additional problem of crafting a UI that is platform agnostic and not confusing,” adds Oades, though she goes on to say that this is not necessarily a bad thing. “PWA is largely unchartered territory in design, and a real opportunity for creative problem solvers to stretch themselves to define a new standard.”
The results from Trivago’s progressive web app were outstanding. The company increased by 150% the engagement for users who add the app to homescreen, and went from an average of just 0.8 repeat visits on their old mobile website to 2 visits per users for their progressive web app. Additionally, they successfully implemented the use of push notifications (they were previously re-engaging users exclusively by email), which resulted in a 97% increase in clickouts to hotel offers for users of the app.
7. Uber
Next on our list of successful and brilliant progressive web app examples is Uber. As the company was expanding to international markets, they were struggling to make it easy for people to use their app regardless of their device, location, browser, or Internet connection. As we mentioned previously, one of PWAs key features is their ability to work offline, making them reliable even if the connection is not stable in a particular location.
For this reason, Uber decided to go with progressive web apps, leveraging their flexible and rich functionalities that make them work efficiently both on desktop and mobile. Uber’s PWA is compatible with all modern browsers, and it offers an app-like experience for riders on low-end devices, even if they are not supported by the native client.
In fact, the company’s progressive web app was designed to work fast even on 2G. According to PWAStats, the size of their core app is just 50K gzipped, and it is capable of loading under less than 3 seconds even on 2G networks.
Their senior product manager, Madhur Chadha, offered a deeper look at how the company views desktop experience, discussing some of the improvements that Uber saw since the launch of the app:
Since rolling out m.uber.com, we observed that 30 percent of riders primarily request trips on a desktop computer as opposed to on a mobile device. According to our research, riders who wanted to plan their travel in advance also tended to use and appreciate the desktop experience.
Wrapping it up
Although we only talked about 7 brilliant progressive web apps, there is no doubt that there are many others – including Tinder, Flipkart, Debenhams, Treebo, Wego, Alibaba, Aliexpress, Housing.com, and others.
As mobile app development is evolving, companies are investing more and more into PWA as a solution to many of the challenges they have with desktop and mobile experience. The benefits of progressive web apps are countless, and there is no doubt that this type of development is to gain even more popularity in the next few years.
Are you ready to build your own progressive web app? You can create it right now, in just a few minutes and at a fraction of the cost of native app development with Beezer’s no code app builder. Start your 30-day free trial today, and join the progressive web app revolution!
