What are progressive web apps and why is it so prevalent today? Mobile has accounted for 50 percent of all web traffic since 2017. Many emerging economies leapfrogged the desktop Internet phase and moved straight to mobile via tablets and smartphones. In these economies, mobile accounts for the majority of Internet traffic. For example, India with a population of 1.4 billion people, has a mobile Internet adoption rate of about 65%, while Nigeria has a staggering 75% adoption rate. In the US, mobile Internet traffic is over 40% and projected to soon become the dominant mode of Internet connectivity.
This growth in mobile web traffic and mobile technology has forced web developers to focus on user experience. Sites must be mobile-ready and be nimble. Web applications have been available for many years but they are mostly slow, had fewer features, and not been as widely adopted as native apps.
Progressive web applications (PWAs) have narrowed the gap between native mobile apps and web applications.
What is a Progressive Web App (PWA)?
A progressive web app is a cross between a native mobile app and a web application. The main features of a progressive web app include:
- They are progressive. This means that they work with any browser and uses progressive enhancement design techniques that emphasize making content available to all browsers and provided enhanced layout and behavior via CSS and Javascript, respectively. Progressive web design principles also respect end-user browser preferences.
- Looks and behaves like a native mobile app but does not require a user to visit an application store and install anything.
- Runs in the background with support for offline use and push notifications.
- Can be added to the mobile device home screen via a button.
- Is instantly reliable and available when cached offline.
- Can access the mobile device’s sensors.
Twitter’s mobile website is a progressive web app example. It is accessible via the URL mobile.twitter.com and provides many of the features that the native app offers.
Progressive web apps eliminate worry about page speeds and connectivity issues because the content is available offline. There are numerous examples of progressive web apps that have been implemented by companies. These firms have seen a considerable increase in engagement and conversions because PWAs address the following customer concerns:
- Mobile users are turned off by delays and unreliability. There is a lot of research that demonstrates that slow-loading sites increase users’ stress levels. An Ericsson study found that a website loading delay leads to a 38% increase in heart rate. Ericsson’s researchers equated this to the same level of stress felt when watching a horror movie.
- According to Google, half of all smartphone customers prefer to use a mobile site when shopping rather than download an app.
- Limited storage is the top reason for uninstalling apps. A PWA button and cached content occupy less space.
- The majority of smartphone users are more likely to purchase from mobile sites that offer recommendations.
Progressive Web Apps Examples
Below are 20 PWA examples that have been successfully implemented.
Twitter is one of the world’s largest social media platforms. They first implemented a progressive web app in 2017. The goal was to increase engagement and lower data consumption. Following implementation, they achieved a 20% decrease in bounce rate, a 65% increase in pages per session, and a 75% increase in the number of tweets sent.
- Thomas Kent
Thomas Kent is a supplier of wall art and clocks domiciles in the UK. The company implemented a progressive web app with three goals; to improve load times and reduce bounce rate, grow traffic, and deliver more satisfying native-like experiences for their customers. Following implementation, the company reduced its bounce rate by 57% and grew its organic traffic revenue by 79%.
- Forbes
Forbes is one of the largest business magazines with a global audience. The company implemented a progressive web aimed at increasing their site speed. After implementation, scroll depth tripled, sessions per user grew by 43%, and there was a 20% increase in ad views.
- Butcher of Blue
Butcher of Blue is a contemporary fashion brand that has gained a reputation for sustainability. The company needed to improve the gesture navigation on their site and grow mobile traffic. After implementing a progressive web app, the monthly active users grew by 154%, users grew by 154%, and pages loaded 85% faster.
- The Washington Post
This popular daily newspaper needed a way to increase page loading speed and make their content available offline. Following the launch of their progressive web app in 2016, the company experienced an 88% decrease in page-load times and a 23% increase in mobile search.
- Kubota
Kubota is a Polish shoe brand that almost disappeared from the market due to competition from big brands like Nike and Adidas. To effectively resurrect the business, the company needed a PWA eCommerce platform with fast loading times and offline functionality. Following implementation, page loading times improved by 30%, daily visitors grew by 192%, and there were 94% more keywords in the top three Google search positions.
- Trivago
Trivago is a travel website that scours the Internet for the best hotel prices. The company needed a solution that was faster than their native app and had offline and push notification functionality. A PWA implementation resulted in a 97% increase in customer clicks on hotel offers.
- Rooted Objects
Rooted Objects is a curated online fashion brand. Soon after launch, the company noticed that there were a lot of abandoned shopping carts. The root cause was a poor mobile experience. To solve the problem, the company implemented a progressive web app. The result was a 162% increase in conversions and a 25% decrease in page load times.
- Lancôme
The famous luxury cosmetics brand needed a fast solution with native-like features to drive traffic and sales. A progressive web app helped the company move the conversion rate from 15% to 17%. The mobile sessions also grew by more than 50%.
- Tajawal and Almosafer
This online travel agency based in Dubai caters to the travel needs of a large middle-eastern clientele. The company needed to improve the user experience. One specific goal was to enable users to book a flight in less than a minute. To achieve their goal, they created a progressive web app. The result was a three-fold increase in the conversion rate and an increase in page load time from 13 seconds to 3.6 seconds.
- Jumia
Jumia is the leading e-commerce country in Africa. The company realized the most of their customers were accessing their website from 2G networks. To increase page loading times, they built a progressive web app in 2017. The result was a 50% reduction in bounce rate and a 33% increase in conversion rates. The company also reach twelve times more users.
- Debenhams
Debenhams is a leading international multi-channel brand in the fashion, beauty, and home retailer segments. It has more than 240 stores in 27 countries. The company was looking for a way to improve the mobile customer experience and hasten shoppers’ path to purchase. To do this, they created a progressive web app. The results were a 20% increase in conversions and a 40% growth in revenue.
- Flipkart
This e-commerce website based in India realized that the majority of its users had weak Internet connections. They needed a solution that worked offline and used a progressive web app to achieve this objective. The result was that customers spent more time on the PWA than on the native app. They also experienced a 40% higher re-engagement.
- Commonfloor
Commonfloor is a website that offers home buyers, sellers, and real estate brokers a comprehensive online real estate ecosystem. The company has a poorly developed mobile app that needed fixing. Rather than fix the app, a process that would have taken a lot of time, the company created a progressive web app. The result was a 10% increase in traffic and a doubling of daily active users.
- ZEE5
ZEE5 is an Over-The-Top (OTT) and video streaming platform. The company needed to increase its reach and improve the mobile user experience. A progressive web app helped it grow its reach five-fold and triple its page loading times. Buffering time also fell by 50%.
- Starbucks
Starbucks, the world’s largest chain of coffee houses, wanted to improve the number of daily active users. A progressive web app helped them double their daily active users and achieve nearly the same order rate on mobile devices as desktops.
- George
George is part of ASDA Walmart and the leading clothing brand in the UK. The team realized they needed a mobile-first approach to further grow the business. A progressive web app led to a four-fold increase in page loading time, a 28% more average time on site, a 31% increase in conversions, lower bounce rates, and more page views per visit.
- Treebo
Treebo, an Indian budget hotel chain, realized that their page loading time was six seconds. This metric was not acceptable in their competitive industry. To improve page loading speed, the company created a progressive web app. The results were a dramatic increase in page sped and a four-fold increase in conversion rates.
Pinterest carried out research and determined that they offered a slow mobile user experience. A meager 1% of their website visitors signup for the service or installed their mobile app. After implementing a progressive web app, the company experienced a 60% increase in engagement rate, a 44% increase in revenue, and a 40% increase in time spent on the website per user.
- Opensooq
Opensoop is one of the leading online classified advertisement sites in the MENA (the Middle East and North Africa) region. The company noted that the majority of conversions were coming from the native app and mobile website bounce rates were high. To remedy this situation, they created a progressive web app. The result was a 25% increase in average time on page. This consequently led to 260% more leads.
The PWA apps list above is not exhaustive; there are thousands of more examples of progressive web apps. What we have highlighted above are some of the greatest successes.
How to Get Started
If you would like to implement progressive web apps for your business or organization, below is an implementation roadmap.
- Build it manually: Most PWAs are built manually by developers. This is done using a framework like AngularJS, Vue, or React. Developers tend to favor AngularJS due to its combination with Ionic. Ionic comes with a powerful framework for mobile app development. React is also loved for its ease of use.
- Use a plugin: If you use a content management platform, there may be a plugin to hasten the process of implementing a progressive web app. For example, WordPress has several plugins that help users quickly create beautiful, functional web apps.
- Adhere to Google’s PWA Standards: Whichever route you take, you must adhere to Google’s standards for PWA development.
Finally, while PWAs are a great option to provide users with native app features without the bulkiness, they are not the best for business if your needs require full native app functionality.