4 Examples Of Excellent Progressive Web Apps
Get ready for a healthy dose of daily inspiration and explore 8 amazing Progressive Web Apps — 4 apps that prove PWAs are ready for mainstream consumer adoption!
Creating the best web experience, especially for mobile users is not only very important, it’s critical if your website or webshop wants to survive in the coming years — which is also the reason why you should consider investing in Progressive Web Apps (PWA).
What Is a Progressive Web App?
Progressive Web Apps are websites, which look, feel and have the same capabilities as native apps. They can offer the full native app experience such as offline modes, push notifications, accessible from the home screen etc, but then without the annoying process of going through an app store, installations etc.
PWA delivers the full native app experience and features, straight from the browser.
Why Should You Care About Progressive Web Apps?
Progress Web Apps have proven to successfully help businesses increase their conversions, session lengths, page visits, user engagement and bottom line results.
They are the best option for businesses who are looking for high engagement with the mobile users, and serve the best user experience, but without the high investments needed for native mobile apps.
Other benefits include:
- High Performance
- Super Fast Loading Times
- Engaging User Experiences
- Push Notifications on Mobile Devices
- Offline Modes
- Installable on Home Screen (while skipping the app store)
- Less Data Use
- And Many More!
A longer read and deep dive about PWA can be found here.
Examples of Progressive Web Apps
As one of the world’s leading hotel search engines, trivago has a long history of innovation. Founded in Germany in 2005, the brand has since grown to more than 1000 employees.
When trivago first became aware of Progressive Web Apps, they were initially dissuaded from pursuing the technology because of a perceived inability to run effective A/B tests on users with interrupted mobile connections. However, with the development of the Background Sync API, this issue was resolved, and a small team of developers, together with a designer, began working on implementing the first pieces of PWA functionality.
Instead of building out the full feature set in one release, Trivago focused first on offline access, push notifications and add to homescreen, believing that these would be the features most valuable to their users.
Trivago’s PWA-evolved website is now available in 33 languages, and 55 countries. Uptake of the new functionality has been impressive, with more than half a million people adding the trivago site to their homescreen. Engagement for users who add to homescreen has increased by 150%, from an average of just 0.8 repeat visits for users of the old mobile site, to two visits for users of the PWA. Prior to the new, evolved site, trivago’s only means of re-engaging users was via email, but with push notification subscriptions now eclipsing email subscriptions, the brand now has a valuable new means of outreach. All of this enhanced engagement has in turn led to improvements in conversion, with a 97% increase in clickouts to hotel offers for users of the PWA.
Read the full case study here.
To drive both traffic and re-engagement, luxury cosmetics brand Lancôme launched a Progressive Web App (PWA) to deliver a fast, app-like experience on the mobile web.
Lancôme saw mobile traffic eclipse desktop traffic for the first time in 2016. Despite a growing number of mobile site visitors, mobile conversion rates didn’t match those for desktop. While 38% of shopping carts led to orders on desktop, the mobile web conversion rate was only 15%.
This disparity revealed that consumers were experiencing significant obstacles when trying to purchase on mobile. As the mobile web became a core focus area, Lancôme struggled to build a fast and engaging experience for their mobile web shoppers.
Instead of minimally updating their underlying site, Lancôme looked to PWA technologies to provide an immersive, app-like experience. They took advantage of service workers to deliver reliable performance on unstable networks and push notifications for re-engagement.
With the new PWA, the time until the page is interactive fell by 84%, compared to their previous mobile experience, with a corresponding 15% decrease in bounce rates. Lancôme saw their mobile sessions rise by more than 50%, and conversions increase by 17%. The new strategy also delivered a much better user experience across platforms. iOS is extremely important for Lancôme — 65% of all users landing on their PWA are on iPhones. With their new PWA, Lancôme saw a 53% increase in session length and 10% bounce rate decrease among iPhone users.
Lancôme also took advantage of re-engagement technologies such as push notifications, which became very popular with users. The notifications look the same as those on native apps, and arrive even if the browser is no longer running.
Lancôme sends four or five alerts a month for exclusive promotions and product releases. 8% of consumers who tap on a push notification make a purchase, which is much higher than the desktop website conversion rate. Lancôme also has great success in using push notifications to reconnect with shoppers who’ve abandoned their carts. The new strategy has delivered an 18% open rate on mobile, and conversion rates on abandoned carts have increased by 8%.
Read the full case study here.
As Uber expands to new markets, they struggled with enabling all users to quickly request a ride, regardless of location, network speed, and device. For Uber, Progressive Web Apps was the solution for their problem: they decided to rebuilt the web client from the ground up as a viable alternative to the native mobile app.
Compatible with all modern browsers, m.uber offers an app-like experience for riders on low-end devices, including those not supported by the native client. The web app is super tiny — the core ride request app comes in at just 50kB, enabling the app to load quickly even on 2G networks. In numbers this means a three second time to interaction on typical 2G (250kB/s, 300ms latency) networks.
And that made Progressive Web Apps the key to expanding in new markets for Uber.
Read the full case study here
Tinder recently swiped right on the web. Their new responsive Progressive Web App , Tinder Online , is available to 100% of users on desktop and mobile, using full PWA techniques, they achieved great performance optimization, network resilience and Push Notifications for chat engagement.
The MVP for the PWA took 3 months to implement using React as their UI library and Redux for state management. The result of their efforts is a PWA that delivers the core Tinder experience in 10% of the data-investment costs for someone in a data-costly or data-scarce market.
Early signs show good swiping, messaging and session length compared to the native app. With the PWA:
- Users swipe more on web than their native apps
- Users message more on web than their native apps
- Users purchase on par with native apps
- Users edit profiles more on web than on their native apps
- Session times are longer on web than their native apps
Read a full case study here
How To Start Building a Progressive Web App?
Building a Progressive Web App does not have to be difficult — with the use of an open source toolkit like DEITY Falcon, it is super easy to get started!
First it is important to identify who your users are, what kind of experience you want to provide them and what kind of PWA features you want to use. You CAN do offline mode, Push Notifications, access to camera on phone, add to homescreen etc, but you don’t have to use everything at the same time from the beginning.
Usually the first main benefit of Progressive Web Apps is the super high performance improvement, and the smooth user experience. Starting from there, you can then add all the cool functionalities you want and need, while already offering a super high engaging experience to your mobile users.
DEITY Falcon — Open Source Progressive Web App
Would you like to give it a try? We have been building PWA for a few years now, and decided to share our project with the rest of the world. We open sourced our code so everyone can join and start building great Progressive Web Apps.
DEITY Falcon is a toolkit to build Progressive Web Apps with. It is build with ReactJS and NodeJS, and includes GraphQL, Apollo State Management and other cool new innovative techniques. DEITY Falcon is fully platform agnostic, meaning you can use it with Wordpress, Magento, Shopify, Intershop, Contentful or even your own CMS or database.