5 Benefits of Building an Ecommerce PWA [Plus Examples]

Ecommerce businesses that don't provide a great customer experience for shoppers on mobile devices are going to be left behind.

Mobile internet has a higher worldwide market share than than desktop, and mobile devices account for more than 40% of all ecommerce spending.

A simple responsive website is a must, but that alone may not be enough to keep up. If you want to engage with modern consumers, read on and learn the benefits of creating a PWA for ecommerce brands.

What is a PWA?

A Progressive Web App, or PWA, is a website that replicates the look and feel of a native app, while operating within the browser.

In Google's words, PWAs are "Websites that took all the right vitamins."

Progressive web apps can be accessed directly from a URL, and use web frameworks like HTML, CSS and JavaScript. They are faster and feel more responsive on mobile, they can be launched from a home screen icon, they enable offline mode, and can use push notifications.

The Difference Between a PWA and a Normal Website

In truth, there’s no clear definition of an ecommerce PWA is versus a regular ecommerce website. In our Ultimate Guide to Progressive Web Apps, we introduce a few definitions offered up by various sources.

Though the exact wording may differ, most will agree that a progressive web app is a modern, secure, fast-loading website, designed to look and perform like a native app within the browser.

If you see a website that seems to do more, in terms of mobile-specific interactivity, than your average responsive website, you can probably categorize this as a progressive web app.

Benefits of Making Your Site into a PWA

Why build a PWA ecommerce site in the first place? What are the advantages to having a progressive web app, over a simple, mobile-friendly website?

Here are five benefits that a progressive web application gives you compared to a normal website.

Speed

Progressive web apps are optimized for super-fast load speeds, which is a huge benefit for users and for you.

Having to wait for slow pages is the most frustrating thing about browsing the web on mobile devices for nearly 50% of people. Slow load speeds are directly correlated with higher bounce rates and lower conversion rates.

Progressive web apps can solve load speed problems. If you want an example, check out Pinterest’s story, where they decreased their First Meaningful Paint time from 4.2 seconds to 1.8 seconds, and their Time to Interactive from a massive 23 seconds to just 5.6 seconds.

A modern, app-like user experience

Most mobile ecommerce websites are sub-par, compared to the desktop version. Brands often create their website for desktop first, checks to make sure nothing's broken on mobile, and call it a day.

Mobile traffic is an afterthought.

Today's mobile users expect a better experience, tailored to their device, which is likely why 90% of mobile internet usage comes on apps, rather than websites.

PWA technology is the closest thing you can come to a native app, while still functioning as a website. That means you can get many of the benefits of apps, while your site is still discoverable in browser-based search engines.

Push notifications

Another big part of the mobile app experience is the ability to send push notifications. Push notifications are the best way to engage users today, far more direct and personal than email, more reliable than social media and much cheaper than SMS.

Progressive web apps let you send push notifications from your website, though only to Android users. Still, this is a much larger share of people you can reach than with a regular mobile website.

Home screen icon

Giving users the ability to add a launcher icon to their home screen is a big plus for retention. It makes it easier for people to return to your site, and ensures your brand constantly occupies a piece of their attention.

Reliability and security

Progressive web apps can work offline or in conditions with poor connectivity, better serving people who live in more remote areas.

In addition, PWAs are required to use secure HTTPS protocols, which means they force site owners to make sure the site conforms to the latest security standards.

Downsides of Progressive Web Apps for Ecommerce

There’s really no downside to progressive web apps for ecommerce sites.

A PWA is better than a typical mobile website in every way, and only a really poorly designed PWA could elicit a negative response from users.

If there is any potential downside, it’s only the time, money and effort you spend in building it. With the benefits of PWAs, it’s highly unlikely that the development costs could be high enough to give you a negative ROI.

Do You Need a PWA for your Ecommerce Store?

Building a PWA is a great idea for any ecommerce business. But we can go even further and say that, if you’re running an online store, you need to build a progressive web app.

Mobile accounts for 56% of all ecommerce revenue worldwide. Despite this, the average order value on mobile is lower than on desktop. This represents a big opportunity to present a better user experience for mobile shoppers.

A progressive web app does this, by loading faster with fewer distractions and a smoother shopping experience. If you can get just a small increase in key metrics like AOV and conversion rate by building a PWA, it’s not only worth it, it’s something you absolutely must do.

Ecommerce PWA Examples

If you want to know what’s possible with a progressive web app, there are countless examples you can look at. Here are a few progressive web app ecommerce sites from well-known global brands.

Alibaba

Alibaba’s mobile web conversions increased 76% when they switched to a PWA ecommerce site. They also saw 14% more monthly active users on iOS, and 30% more on Android.

AliExpress

The AliExpress progressive web app boosted their conversion rate for new users by 104%, with 2x more pages visited per session and 74% more time spent on the site per session.

Lancôme

Luxury cosmetics brand Lancôme increased conversions by 17% and saw 53% more mobile sessions on iOS with their PWA. They decided to go the PWA route after noticing their mobile conversion rate was just 15%, compared to 38% on desktop.

Jumia

African ecommerce site Jumia built an app-like experience utilizing modern web technology and a PWA, which translated into a 33% higher conversion rate and a 50% lower bounce rate.

Rakuten 24

Japan-based Rakuten made their online store Rakuten 24 into a PWA, and saw a 450% increase in retention rate, a 150% increase in sales per customer and a 200% increase in conversion rate.

How to Make an Ecommerce PWA

Since the definition of a PWA is actually somewhat vague - in essence, it’s just a powerful, well-optimized mobile website - it’s hard to give a clear step-by-step process to turn your site into a PWA.

However, if you decide you want to level up your mobile UX and make your site into a PWA, here are a few things you need to know.

Meeting the Technical Criteria for a PWA

Based on the generally accepted technical specifications for a PWA, here’s what you need to build or add to your website.

• HTTPS: your site needs to run on secure HTTPS servers (not HTTP). Almost all sites should do this already.
• Web App Manifest: this is a JSON file that defines the application, look, feel and behavior of your PWA.
• Service Workers: these are JavaScript files that allow the site to handle network requests and caching differently, and thus load faster (as well as loading offline) than a regular website. Service workers are also used to fetch the manifest and serve it to users.

Broadly speaking the technical side of progressive web app development is coding the manifest and service workers.

Practical Features of Your PWA

The other side is how your PWA is going to function or look differently to your current mobile website. Adding a web app manifest and service workers is a start, but it doesn’t do much about the user experience.

Think about what the mobile-specific features you want to add, and tweaks you can make to the UI for mobile. Things like native navigation features, a mobile tab menu, and of course, push notifications.

Building the PWA

After designing the practical features of your ecommerce PWA, you'll need to bring it together with the technical features.

If you have a web development team, have them handle this. You could also reach out to a freelance web developer to put it together.

There are also a number of tools and services that can be used to create progressive web apps for ecommerce sites. These vary in price and flexibility.

Some, like Vue Storefront, are open source libraries made for web developers, while other “done-for-you” PWA ecommerce storefront solutions like Deity may be cost-prohibitive and also aren’t a perfect fit if you already have a live, active web store.

Alternatively, there are apps on the Shopify App Store which can convert your store into a PWA, plugins like Super PWA for WordPress, and other platform-specific solutions depending on what your site is built on.

The best option is to bring a web developer on staff or hire a freelancer. It’s not a huge job, so it should be a manageable expense for most online stores. If you’re struggling to justify it, consider building some small elements of the PWA first, such as upgrading your website with service workers and mobile UI, before deciding whether it’s worth fully investing in a custom PWA.

PWAs vs Native Apps

A lot of people debate PWAs vs native mobile apps, as if ecommerce business owners should choose one or the other.

There are pros and cons to each. Native mobile apps provide better user interaction on mobile, push notifications on all devices, more extensive use of device features and the ability to get into the app stores.

PWAs are more discoverable, work across multiple platforms by default, and are cheaper and easier to build.

However, PWAs and native apps do not have to be rivals. There’s no need to choose only one. PWAs and native apps work synergistically with each other, and ensure you cover all the bases to provide the ultimate mobile user experience, no matter the preference of the user or the path they took to reach you.

The Ideal Combination: PWA + Mobile App

The best way to approach this as an ecommerce store owner is to build a PWA and a native app.

This covers all your bases. It allows you to maximize user engagement for people who find you on the mobile web, while offering an even better experience for loyal customers who want to download your app (plus benefits for engagement and retention).

Though native apps are superior in terms of power, functionality and UX, the majority of people will still find you through web channels. You want a PWA in place for these people, while also trying to convert them into app users (which will increase the chance they become loyal, repeat customers).

David Cost from Rainbow Apparel says that each customer has their preferred way of shopping - i.e. web or mobile - and you should not try and force them onto one or the other, but instead let them choose how to view your site.

“There are users who prefer to buy on the app and users who prefer using the browser. You can’t convince one to go the other way, you need to meet them where they are.”

The benefits of PWAs and native apps complement each other, they don’t get in the way of each other. So, budget aside, there’s no reason to choose only one.

How to Turn Your PWA into a Native App

Our suggestion would be to build a great progressive web app ecommerce site first. Once you’ve done that, and your mobile shopping experience is as good as can be on the web, convert it into mobile apps with MobiLoud.

MobiLoud is a simple and affordable tech-enabled service that converts your whole website into mobile apps, which can be downloaded, added to a user’s home screen, listed in the app stores and more.

Unlike hiring a team of mobile developers to build an app, which can cost you six-figures, MobiLoud plans start from $350 per month and delivers working apps in less than two weeks.

It’s also easy. We do all the technical work under the hood to build your apps. All you need to do is build a great mobile website, and all that will be reflected in the app.

This process has delivered amazing apps for minimal investment for brands like Rainbow Apparel, John Varvatos and many more high-revenue ecommerce brands.

You’ll start by booking time for a free demo. We'll discuss the process and anything specific you want from your app. After that, you can sit back and wait for your ecommerce app to launch.

With a progressive web app and a native app, you’ll have everything you need to serve mobile customers well and position yourself for the continued growth of mobile commerce.