8 Famous Examples of PWA Development Done Right
What is a PWA?
Progressive web apps (or PWA) are the perfect cross between native mobile apps and websites. PWAs are web applications that load like websites, but can offer functionalities traditionally available only to native apps. They can be loaded with the push of a button from the user’s mobile home page, without having to go through the whole app installation process beforehand.
Service workers are used to provide the best of both web and mobile native worlds. These service workers lie between the network and device to supply the content. Among many other properties, they are capable of utilizing cache mechanisms efficiently. This allows PWAs to work in offline mode as well.
Why are PWAs gaining in popularity?
This relatively new mobile technology allows you to provide a swift and smooth mobile native experience to your customers without intrusive app installation pop-ups. Your team can build them using a basic web stack (JavaScript, HTML & CSS).
World-leading companies from all industries are reportedly already experiencing higher web traffic, customer engagement, and conversion rates thanks to PWAs.
PWA has the highest reach with companies like Flipkart, Twitter Lite and Starbucks reporting increased user retention rate.
Here is a closer look at some of these successful progressive web apps.
Examples of PWA development projects in practice
With close to 330 million active monthly users around the world who consume, create and share content, it is no wonder that Twitter wants to keep their mobile web experience as fast, reliable and engaging as possible. This was the main objective when they decided to upgrade their web application to a PWA.
It’s safe to say that they’ve succeeded. Twitter Lite helped deliver a more robust experience and helped:
• increase number of pages per second by 65%
• increase number of Tweets sent by 75%
• decrease bounce rate by 20%
All this while requiring less than 3% of device storage space compared to Twitter’s native Android app. Instead of installing the app through the App or Play Store, web application visitors can choose the “Add to Homescreen” option directly from their mobile browser.
Instagram was one of the first major companies to adapt PWA technology. If you somehow haven’t heard of it yet, it’s a social network service for sharing photos and videos. Following in Twitter’s footsteps, they upgraded their web application, giving web app users access to functionalities that previously were only available to native app users.
The Instagram PWA now supports push notifications, has a web manifest and can be installed on both iOS and Android devices, using up much less storage space.
There are still some noticable navigation issues, but the pros outweigh the cons overall in terms of user experience thanks to the increased speed and lightness of the app. According to recent news, Instagram will expand the compatibility of the PWA to Windows Mobile OS as well.
Alibaba
Alibaba.com is the world’s largest wholesale trading platform, serving 200+ countries and regions. After upgrading their site to a progressive web app, they saw a:
• 76% increase in conversions across browsers
• 14% increase in monthly active users on iOS; 30% on Android
• 4X higher interaction rate from the “Add to Homescreen” prompt
Alibaba released its PWA in 2016, and they closed that year with $15,69 billion in annual revenues. Such a significant rise in mobile web conversions contributed a healthy amount to increasing this number to over $60 billion by the end of 2019.
By understanding how mobile web users interact with their business, they were able to deliver an excellent user experience to both first-time visitors and repeat visitors. Their PWA is also able to deliver push notifications the same way the native app does, achieving the same open rate on both platforms.
Trivago
Trivago is one of the world’s most popular hotel search engines. The travel industry has been heavily disrupted by internet technology over the past two decades. Ever since their founding, they have been fully aware that they need to utilize emerging technologies in order to stay ahead of the competition.
Because the majority of users access their service through mobile phones, succeeding on mobile platforms quickly became the company’s number one priority. They finally decided to design a progressive web application to improve their user experience.
Since then, more than half a million people added the Trivago site to their mobile home screen. Engagement for users who use this functionality increased by 150% thanks to push notifications. This increased engagement also lead to a 97% increase in clickouts to hotel offers for PWA users.
Starbucks
The reasons behind decision at Starbuck to develop a PWA were twofold: The company wanted to introduce ordering functionality to their website, while also making it more accessible for emerging markets. This way the service would be available in locations where internet connections are less reliable, like rural communities.
Because PWAs are built around the concept of “offline-first”, they are great for cases like this. Much of the application is available without an internet connection. Customers can modify the product in their order, and the information gets sent directly to the POS.
Starbucks now has a fast, performant, easy-to-use PWA that is 99% smaller than the 148MB native iOS app. By utilizing React, the development team was even able to include content-specific animations which are common in native apps, but rarely achieved for web apps.
Tinder
Tinder was also among the early adopters of PWA technology. They had noticed that session times are typically longer on web than their native apps. Users typically chose web more often to send messages and edit their profiles, so the company decided to focus on improving performance and user experience primarily on this platform.
They chose React and Redux as main technologies. JavaScript performance optimization was used for improved load times, service workers for network resilience and push notifications for chat engagement.
Tinder is still iterating the progressive web app, but has already experienced great benefits. With the PWA they were able to cut their load times by 61% from 11.91 to 4.69 seconds. It’s able to deliver the core Tinder experience for only 10% data investment. The PWA is also 90% smaller than their native Android app.
Low engagement rates were the driving force behind the development of Pinterest’s PWA. The company realized that their mobile website only converted 1% of users into sign-ups, logins and native iOS and Android app installs.
Of course, this was far from ideal, and something needed to be done to increase web engagement. It took only 3 months, and the resulting improvement in business metrics really speaks for itself. People started spending 40% more time on the new PWA compared to the old mobile site. This lead to an increase in user-generated ad revenue by 44%, and core engagements also rose by 60%.
Performance also improved significantly. Due to its monolithic build and some CPU-heavy JavaScript, it took 23 seconds for the old mobile web site to become fully interactive on load. This wait time got reduced to only 5.6 seconds for to the new PWA.
Telegram
Telegram’s PWA was already available when its rival, WhatsApp Web got released to the market. It offers almost the exact same features as the mobile version, while being much lighter and faster than a conventional application.
Beside the usual perks, this PWA has a small downside too. To start using it for the web, users must signed up on a native Telegram app first, and verify their details. This is necessary due to the company’s high security standards. All messages get encrypted on the cloud, and there is also a secret chat feature that doesn’t get stored on the company’s servers.
These examples of PWA development demonstrate that these new type of apps provide real value that is measurable in both user engagement and increases in profitability.
When should you consider PWAs?
Instances when PWAs can be especially beneficial:
- If you want to make an e-commerce website together with an app – PWAs provide an easy way to increase user activity by allowing them to “save” your web shop on their home screen, and serve receive push notifications anywhere.
- If you and your team are comfortable with web technologies and want to build apps in a limited time. You can write it with classic web technologies like HTML, CSS and JS.
- If you are going “everywhere first” instead of mobile first – PWAs reach the widest range of users and devices via the browser.
- If you want the lowest cost option for your development team – PWAs only have to be written once.
- If you care about low-end devices, or users with poor internet connections – PWAs provide a smooth experience on slower devices too, and even work offline.
Some other benefits of PWAs:
- PWAs load directly from the browser without having to download an app
- They are also able to deliver real-time updates and push notifications, which was a feature reserved only for native apps in the past
- PWAs use 10-1000X less storage space compared to native apps, and they require much less mobile data to load pages
What are the downsides of PWAs?
- Your app won’t reach users who are searching in the App or Play Store
- Somewhat lower UI responsiveness and performance compared to native apps.
- PWAs don’t have access to all mobile hardware functions such as fingerprint scanning, advanced camera controls, Bluethooth, etc.
- Running robust web apps on a smartphone uses up battery charge fast
Hopefully we were able to inspire you with these examples of PWA solutions. The tech provides many opportunities for businesses of all shapes and sizes to engage more with their mobile site users, and reach real benefits in terms of bran loyalty and online profits.
Now it’s up to you to review the possibilities to increase mobile web user experience for your customers and take action before your competition does.
