Have you ever discerned a puzzling pop-up suggesting you add the website to your home screen while surfing the Internet on your mobile device? If you press “Add”, a shortcut will appear on your home screen that is identical to those emerging on your panel when you download native apps. But here’s the thing: you haven’t downloaded anything from the app stores.
This is how Progressive Web Apps (PWAs) work
Introduced in 2015, this software development methodology has been fleetingly transforming the mobile web experience and capturing the e-commerce industry at a breathtaking pace.
Progressive apps are extremely fast, secure, responsive, relatively cheap to develop, light-weight, available from all known browsers, and even without an Internet connection, provide an app-like UX, and don’t require a download. With all these features and benefits the technology offers, web apps are a real catch for ecommerce projects.
In this article, we will consider what benefits PWAs can bring for online retail and ecommerce, as well as what progressive apps look like drawing on the example of such well-known brands as Lancome, Alibaba, Garbarino, Flipkart, 5 Miles.
PWAs And ecommerce: why are they a perfect match?
Progressive apps are a synergy of a regular responsive site and a native app. Thus, they are discoverable by search engines, available from all browsers, and require no downloading just like responsive sites, but on the other hand, PWAs look and feel exactly like native apps with all their app-style interactions and navigation.
One of the major PWA’s features is the ability to get access to the device’s hardware and software. They leverage HTML5, JS, and CSS to provide the app-like functionality and use the devices hardware features, say, GPS, mic, camera.
Think of what I’ve told you. What if your ecommerce website could send push-notifications to your customers, provide a barcode scanner, allow images and video capturing, or deliver localized content using a GPS? All of these things are possible with progressive web apps.
Progressive apps enlarge the functionality of a site, add value to it through good UX, and force your customers to take action. In point of fact, some experts consider the technology will replace native apps for e-commerce soon. Here is why:
The go-go growth days of native apps are gone. People’s smartphones are full of apps and they are done downloading new ones. The Recode agency posted a study confirming that consumers no longer want to overload their phones with massive applications while using them, in the ideal case, twice a month.
What benefits can PWAs bring?
- No download is needed. As far as PWAs are lightweight and operate inside a web browser, they can be added to your customer’s home screen in a click without visiting the app stores.
- App-look appearance. PWAs on mobile devices look and feel exactly like native apps. Their features, interfaces, and navigation are almost identical to regular smartphone applications but the development cost is less.
- Seamless performance on unstable networks. For a long time, this feature has remained the prerogative of regular apps. But the tables have turned. Thanks to site caching, progressive applications can provide access to the websites for users when their devices are disconnected. As such, your customers can browse product catalogs or manage their orders in offline mode. You must admit that this feature significantly improves the mobile user experience.
- Little storage space. What is your favorite online shopping app? How often do you visit it? I bet you open it no more frequently than twice a month to make a purchase. All other times, the downloaded app remains unused “collecting dust” and taking effective disk space. Did you know that the average iOS file size is 34 MB? Yes, the native apps are massive. PWAs are real game-changers. Since they are run on a web browser, they take little storage space. As such, the average PWA file size is just 350 KB – they are almost weightless and your customers can add as much shopping progressive apps on their home screen as they want.
- Improved security. Security is a king when it comes to earning customers’ trust. Your audience wants to use your store eagerly, knowing that it is a safe and reliable place to buy. The technology leverages an SSL certificate along with HTTP protocol to protect all the transmitted data and prevent cyber attacks.
- Push-notifications. Push-notifications are powerful marketing tools helping companies stay in contact with their customers. With PWAs, businesses can use push-notifications paired with geofencing technology to send timely messages based on users’ location if it falls within their geofencing range. Thanks to the service workers, this functionality can be implemented to re-engage Android customers. The only disadvantage is that you can not provide the same features for iOS users for the time being.
- Inexpensive development. The average PWA development price is between $15,000 – $50,000. Besides, with a progressive app developed, you will get a responsive website available from all platforms and devices, as a bonus. This relatively low price is attributed to the ease of the development process. For instance, if you already have an e-commerce website run on Magento, you can hire a front-end developer in Eastern Europe to build a PWA storefront on top of the existing site. In comparison, you have to be prepared to spend at least $100,000 for native app development. Moreover, you will need to create two separate apps for each of the stores.
Best PWA examples in ecommerce and online retail
Progressive apps and ecommerce businesses are a match made in heaven. Taking into account the prominent features of this game-changing technology, no wonder that lots of famous brands have implemented PWAs to deliver a better UX to their shoppers and consequently increase their revenue. Here is a list of the best PWA examples in retail and ecommerce that gained tremendous success and will inspire you to build your own.
Lancôme – a French luxury cosmetics and perfume brand – was one of the PWA early adopters. For a long time, Lancôme was struggling with low mobile conversion while their website conversion on desktop devices was tolerable. So they decided to focus their efforts on providing a better mobile web experience. The company applied a PWA upgrading the existing website instead of developing a native app from the ground up. This strategy paid off!
The site is full of robust tools tailored to their customers’ needs. Look at their virtual “fitting room”, a newsworthy feature developed by the Lancôme team. They combined PWA and augmented reality to help women virtually try on the product and see how, say, a mascara will look on their faces. Astonishing, right?
What have they got?
- a 36% increase in mobile revenue
- mobile sessions increased by 51%
- 15% decrease in bounce rate
- The average load time is 1.77 sec
- conversions increased by 17%
- Increase in iOS mobile sessions by 53%.
Alibaba is the world’s largest wholesale trade platform based in China and serving 2.5 million shoppers around the globe. With such a huge audience, Alibaba is beholden to its users for delivering the best mobile UX possible. So, how can this large ecommerce platform keep a competitive level of mobile experience? Alibaba decided to develop a PWA.
They have already had a good-looking native app but it has a big disadvantage – it is massive. Alibaba’s app file size on Google Play is 60MB and it takes about two minutes to install.
Their PWA has the same functionality and interfaces as the native app. These two look almost identical. in the screenshot above, you can see the home page of their PWA (on the left) and the home page of their native app.
What have they got?
- 76% increase in their conversions across browsers
- 14% more active visitors on iOS
- 30% more active visitors on Android
- 4x times higher interaction rate from the PWA;
- 76% larger conversion rate.
The Garbarino website is one of the most prominent PWA examples in ecommerce. The Argentinian company offers a wide range of products: from DIY toys and kitchen appliances to electronics and technical equipment.
Why did this large online store need a PWA? The implementation of this solution was motivated by the absence of reliable Internet network coverage in Argentina. The PWA was expected to ensure fast loading speed on unstable networks and it delivers upon expectations.
The Spanish-look design of Garbarino’s PWA with bright-red colors is not easy to forget. The progressive app looks the same as its native analog.
What have they got?
- A 27% increase in conversion
- a 9% decrease in bounce rate
- Page views increased by 35%.
Flipkart is considered to be the #1 ecommerce marketplace in India. In 2015, the company made an unsuccessful attempt to make the large mobile site faster and provide an engaging web experience at the same time. At the end of the day, they decided to close down its mobile website and reconsider the development approach. Being inspired by the brand new technology introduced by Google, Flipkart decided to implement a PWA becoming one of the early adopters.
As far as the better half of Flipkart used to reach the store through 2G network, speed is vital. The PWA delivers an app-like and fast experience, as well as re-engage users in multiple ways.
What have they got?
- Conversion rate increased by 70%
- 40% increase in user re-engagement
- 3x lower data usage.
5 Miles is a mobile marketplace that connects nearby buyers and sellers to trade various products: kitchen appliances, clothes and apparel, second-hand items, and other stuff. Despite all attempts, the company failed to provide a good mobile UX caused by the low retention and high bounce rate. So they decided to focus on converting their website into a PWA delivering powerful enhancement in total UX. The strategy paid off!
5 Miles’s PWA is blazingly fast and alluring. Just have a look at their Dash Bids. The section is well-organized and has an app-look appearance. The progressive app allows taking part in a fascinating bidding process. Bids are constantly changing and the entire process looks like an interesting game. If you are lucky enough, you can catch a good buy.
What have they got?
- 50% decrease in bounce rate
- Conversion rate increased by 30%
- 30% increase in the time spent on the site.
In the ever-changing ecommerce world, business owners need to be on-trend to keep up. If you want to provide your customers with a seamless and fast mobile shopping experience, PWAs are what you are looking for. A Progressive Web App is a good solution regardless of what your company is selling.
Alex Husar is a CTO at Onilab