Progressive web apps (PWA) combine the best features of mobile websites and native apps. They are economical, efficient, and occupy little space on users' mobile devices.
Regardless of these advantages though, if your business is thinking of implementing a progressive web app, it will pay to scrutinize some of the best live examples first, as then you can see what might be achieved.
You will find some successful progressive web app examples profiled in this article, but in case the concept is new to you, we’ll first take a closer look at what it means, and at the key characteristics separating PWAs from other solutions offered by mobile and web app developers.
Before exploring the characteristics that define progressive web apps, you might be interested to know that in terms of user engagement, they have the potential to minimize constraints typical of both mobile web property and native apps. The graph below highlights the fact that mobile users tend to access mobile web property more often than apps, but spend more time engaging with the apps they install, compared to the web pages they visit.
Mobile websites and native apps have their pros and cons. The characteristics of native apps make them easier to engage with, while mobile web property enjoys greater reach because it is more accessible in the first place (as there is no need to locate and download a software program from an app store).
PWAs meanwhile, blend the best characteristics of mobile websites and native apps. This is why, as you will learn from the progressive web app examples featured shortly, some of the world’s best-known companies and organizations are adopting them.
Essentially, you can think of a progressive web app as being either a mobile app delivered via a web browser, or a website with the functionality of a mobile app, although the latter option is rather more accurate.
PWA technology utilizes APIs to create a native-style app experience within a browser. Progressive web apps do not need to be downloaded, yet they can reside permanently on a user’s home screen or desktop.
The most notable characteristics of progressive web apps include:
In addition to these characteristics, progressive web apps also have the advantage of being very light and enabling users to enjoy the benefits of websites and apps without consuming vast quantities of data.
There are plenty of resources online if you want to find out more about the technology behind progressive web apps or gain an understanding of their development. However, you can also learn a lot by studying some of the apps launched by leading brand names in technology, retail, and media industries.
Without further ado then, here are fifteen progressive web app examples that should prove encouraging, especially if your business is considering changes to current digital—and especially mobile—commerce solutions.
As a platform for social news sharing, Twitter needs little introduction, but with some 80% of users on mobile, the brand wanted to create a more reliable and engaging experience, as well as to reduce loading times and visitor bounce rate.
The new Twitter Lite app has been received with great enthusiasm since its 2017 launch, and Twitter is frequently adding new features to make its PWA even more popular. Now known as the fastest, least expensive and most reliable way to access Twitter, the progressive Twitter app requires less than 3% of the storage space required for its native Android counterpart.
The Twitter Lite PWA is generating more than ten million push notifications per day, massively encouraging user reengagement. Indeed, according to a Google Developers case study, 250,000 Twitter members engage with the app directly from their home screens at an average frequency of four times per day.
Trivago is a travel-industry app that aggregates results from hotel search sites and claims to help users find the very best price for hotel rooms around the world. It is known today as one of the leading hotel search engines. Trivago launched its progressive web app in April, as part of a drive to increase engagement and encourage more travelers to book accommodation via the platform.
The Trivago PWA is available to users in 55 countries and allows them to select from more than 30 languages. Features include push notifications (which have provided Trivago with a new channel for re-engagement), an offline mode, and loading time of fewer than three seconds. The app also provides hotel reviews, guest ratings, and distances from the listed hotels to local points of interest.
Since its launch, the progressive web app has improved engagement considerably. Users who have added the app to their home screen revisit Trivago 150% more than they did previously, and clickouts to hotel offers have increased by nearly 100%, as reported in a Think with Google article.
The Starbucks PWA has been live since 2017 when it was built with emerging markets and highly mobile customers in mind. Starbucks wanted to make it easier for people to browse the menu, create customized orders, and add them to the website’s shopping cart, even when connectivity is poor or temporarily absent. The app’s features include:
As ubiquitous a company as it is, Starbucks is physically present in many countries that have poor communications infrastructure. The tiny PWA, which occupies a mere 233 kilobytes of storage and utilizes caching to make almost all functionality available offline, is extending the company’s virtual presence in these locations too. In fact, the app is strengthening Starbucks’ position as a brand synonymous with both coffee and hi-tech consumerism. The app is also proving successful in engaging desktop users, who are placing online orders via the website at about the same rate as mobile customers.
Forbes was one of the first major media companies to implement a progressive web app, having recognized the need to improve the start render time of its website. The performance of Forbes’s previous mobile website was appalling, with a start render time of 6.5 seconds.
According to Salah Zalatimo, head of Product and Tech at Forbes, the decision to launch a PWA for delivering news and general-interest content proved to be the right one, delivering what he describes as “dramatic” results.
Readers now get to see content within three seconds of launching the app and enjoy a more visually rewarding experience. As a result, Forbes sees an increase in readership of 12%. Additionally, the number of ad impressions per page is up 20%, and there is a sixfold increase in the number of readers completing articles.
If you are involved in multi-channel retail, you’ll be well aware of the need to streamline and optimize the customer journey. That was one of the key motivations for British retail chain Debenhams to convert its mobile-shopping website to a progressive web app.
Debenhams’s previous website was slow and cumbersome for shoppers to navigate, requiring the download of large quantities of data—as much as eight to ten megabytes over a typical two-day period of engagement with the site. This was reduced significantly by the retailer’s new PWA, which also ushered in other improvements, including an intuitive multiple-view approach to product listings, along with advanced filtering options.
Furthermore, the overall customer journey time is now 50% less than it was with the old website, and that has no doubt contributed to the double-figure growth in conversions recently reported by Debenhams’s digital product management team.
A mere six months ago, the implementation of progressive web apps in retail was almost unheard of, with the aforementioned Debenhams PWA being one of the first. Indeed, at that time, none other than Ted Schadler, principal analyst and VP at Forrester, was quoted by Essential Retail as saying he hadn’t heard of any US retailers getting on board with PWAs.
That situation seems to be changing fast though, and West Elm, a home furnishing store chain headquartered in New York, is one example of a US retailer with a PWA in the pipeline. The West Elm app is customer-focused and looks incredibly appealing; with fixed header and footer sections cleverly exploited to ensure shoppers always have key actions at their fingertips.
Results have been highly encouraging for West Elm, given that the app is still in Beta. Already the company is attributing a 9% increase in per visit revenue and a 15% uplift in time-on-site to its new mobile commerce storefront. Those are some encouraging PWA statistics for a solution not yet on general release.
The progressive web app developed by The Washington Post deserves mentioning in this list, even though the news agency’s adoption of PWA technology is old news. The company began working on Accelerated Mobile Pages back in 2015 and since then has perfected the use of service worker caching to maintain a robust news platform with fast loading times, even on the patchiest of networks.
Readers benefit from an exceptional experience when perusing any of the 1,000 or so articles published daily by The Washington Post, but the agency has not been taking the website’s 88% performance improvement (as compared with its original mobile site) for granted.
The PWA monitors offline user activity with help from the Offline Google Analytics Library. This enables the company to gather insights about readers’ interaction with the app, even when they are not connected to a network. This analytical capability will grow in importance as audiences spend more time engaging with offline content and functionality, which they surely will now that technology has evolved to make it possible.
Images, recipes, products, videos—anything is fair game for Pinterest users to curate and share with the world, but it was the desire to capture wider global attention that led Pinterest to invest in a progressive web app. With the incumbent web experience generating conversions at a rate of just 1%, decision makers at Pinterest realized that something needed to be done.
The goal, as with most other PWAs described in this article, was to improve UX by making the Pinterest website respond faster, particularly in terms of interactivity. The old website could take more than 20 seconds for the main thread to settle down and become responsive to user inputs.
The Pinterest site was converted to a progressive web app in just three months, and the result was an immediate improvement in performance metrics. The time needed for the mobile site to become interactive was slashed from 23 seconds to less than 6 seconds. Core engagements, time spent on site, and ad clickthroughs increased.
Despite the success so far, Pinterest is eager to continue with development, most recently working on an improved experience for unauthenticated users, in an effort to stimulate increased sign-up activity.
AliExpress is the retail division of the immensely successful Chinese B2B platform, Alibaba. When the company first set out to develop a mobile ecommerce website, they planned to use the web property to encourage shoppers to download the AliExpress native app for iOS and Android.
However, although the technology team focused diligently on high-quality site design and functionality, user engagement was poorer than expected. Meanwhile, AliExpress continued to have difficulty getting mobile consumers to download and install the app.
Fortunately, recognition of the challenges coincided with the emergence of progressive web app technology, so the company decided that a cross-platform PWA offered the most promising solution. AliExpress went ahead with development and after launching the new mobile experience, soon began to see improved results.
Users approved of the app and began to visit twice as many pages per browsing session. Time spent on the site per user-session increased by 74%, and as a case study from Google reveals, the new-user conversion rate more than doubled after implementation of the AliExpress PWA.
Lancôme’s mobile marketing story follows a path similar to that of AliExpress, in that the L’Oréal-owned cosmetics brand found mobile conversions fading in comparison with those involving desktop users—even though desktop traffic had been overtaken by mobile-device traffic.
However, unlike AliExpress, Lancôme chose to forego the option of developing expensive native apps and instead, moved straight into a website redesign, using PWA technology. The new site launched in October 2016, placing Lancôme at the very forefront of retail progressive web app development.
The company’s designers set out to make their PWA really app-like, making use of the instantly recognizable “hamburger” menu icon, slide out boxes, and scrollable carousels of product images. Static headers help to increase page-loading speed, and code splitting gives users the impression of an app that’s ready to go almost instantaneously, even if content below the fold hasn’t fully loaded.
The progressive web app is clearly a hit with Lancôme’s customers, who are enjoying the immersive experience, so much so that they respond readily to the offer of push notifications. By April 2017, some 20,000 shoppers had signed up for alerts, with 9% of those tapping on a push notification going on to make a purchase.
When your company is the largest ecommerce operator in a country with an inconsistent communications network, you must build solutions that can make the most of whatever connectivity is available. That was one of the key issues facing Flipkart, the number-one ecommerce website in India.
More than half of Flipkart users are only able to access a 2G mobile network, so the company’s primary objective was to solve the frustrations of shopping online with suboptimal connectivity.
Flipkart Lite was a great success. Site visitors no longer find their shopping interrupted by lost connections. They can continue to browse products across the company’s full range of categories, even when networks drop, leaving them offline. They can add the PWA to their home screens with just a couple of taps, which enables them to re-launch the site in the blink of an eye.
Since launch, the PWA’s performance has been responsible for a substantial increase in users’ engagement with Flipkart, as evidenced by a tripling in the time-on-site metric, and among shoppers who launch the app directly from their home screen, a 70% increase in conversions.
As explained in the previous example, communications infrastructure in India, especially outside of the country’s top six metro areas, is underdeveloped and coverage patchy. Many mobile users also possess old or low-cost devices that struggle to manage data and memory-heavy applications.
To combat high bounce rates resulting from these issues, Make My Trip, an Indian travel-booking platform, elected to supplement its native and mobile app solutions with a progressive web app. That was a decision that began paying off just six months after the PWA launched, by which time it was delivering impressive results, some of which are highlighted in the image below.
Perhaps the most notable result though is the increase in reach that the company achieved through its PWA’s ability to launch and run quickly on poor networks while demanding little in the way of memory and data space on user devices.
Before developing the PWA, Make My Trip captured 80% of hotel bookings from users in the six major Indian cities. Today, 50% of reservations originate in those same areas, with the other half coming from other parts of India, including districts limited to 2G, or at best 3G, networks.
Settled is a platform for real-estate buyers and sellers in the United Kingdom. Unlike India, much of the UK enjoys 4G-network coverage, but still, Settled wished to ensure the best possible experience for their mobile users, by providing uninterrupted access to information, online and offline and regardless of network speed and quality. To that end, the company settled on the idea of overhauling their solution and redesigning it as a progressive web app.
By taking the offline-first, mobile-first approach to the new design, Settled was able to release a new system allowing users to access their accounts in a heartbeat, even when connectivity is unstable or unavailable.
As a measure of the new PWA’s success and popularity, the following performance improvements speak volumes.
Uber and its continuing expansion into all corners of the globe needs little introduction. But regardless of how well you know the original ride-hailing platform, you may not have stopped to consider the technology behind the success, which, perhaps unsurprisingly, includes the use of progressive web apps.
In fact, Uber was one of the earliest commercial adopters of PWA, launching its affectionately named Moober (m.uber) to give users an experience close to that offered by native apps, but without straining the performance capabilities of low-end mobile devices. The PWA is also usable on tablets and smartphones that Uber’s native app does not support. Clearly, the intention is that nobody, anywhere within the Uber global market, should lack the hardware capabilities to use its innovative service.
The m.uber app was built using the Preact development tool and Webpack for module bundling, and as a result, is very small, requiring just 50kB of storage space to operate. It runs at lightning speed even on 2G networks, taking less than three seconds to load from the user’s home screen.
Aside from being light, fast, and undemanding on hardware, progressive web apps support many of the features that have traditionally made native apps so popular. The ability to send push notifications is one such feature—and a particularly important one for the Weather Channel. That’s because a significant number of people around the world depend upon its reports to aid critical decisions in which the weather is a factor.
However, while the Weather Channel had a native app, half of the platform's mobile audience engaged via its mobile website, which at the time was limited in its capability to send severe weather notifications. To address this, the Weather Channel initiated a project that began as an exercise to build browser push notifications into its mobile web solution and later graduated into a full-blown PWA implementation.
Notable results of the Weather Channel’s new solution include the receipt of more than half a million push-notification opt-ins via the progressive web app within the first three months, along with an 80% increase in loading speed, which, of course, has also had a remediating effect on the bounce rate.
The fifteen progressive web app examples featured in this article, of course, represent some of the higher-profile success stories among enterprises adopting the technology. However, if you perform your own research online, you can find many more accounts of businesses receiving positive results from their own PWAs.
Perhaps more notably, there are few tales of dissatisfaction. That is not surprising since, at this point, there is a lack of better solutions to combat the shortfalls of native apps and traditional mobile websites. Just to press that point home, here is a summary of the benefits appearing as a common thread through each of the examples we have featured.
It’s fair to say that all the featured PWAs have delivered:
Meanwhile, mobile and desktop users are finding the PWA experience to be more fluid and immersive, less frustrating, and more reliable—and perhaps most important of all, less subject to the discontinuity that goes along with variable network quality and highly mobile lifestyles.
It seems that the traditional dilemma for enterprises targeting mobile traffic has finally been neutralized. Instead of choosing between the immediacy of a mobile website and the rich experience offered by native apps, you can now offer your target audiences the best of both and improve the commercial performance of your business to boot.
Whether it’s a new venture or existing brand. Let us know your ideas below using our project planner and we’ll see how we can help.
