Should You Build a PWA for Your Ecommerce Store?

Creating an ecommerce PWA is one of the best things you can do to get more out of your online store’s mobile traffic.

More people today access the internet on mobile than desktop. This mirrors the rise of mobile commerce or mcommerce, which accounts for more than 40% of all ecommerce spending today.

Most ecommerce websites are stuck in old ways and serving a suboptimal user experience to their mobile visitors. If you don’t want to be like them, turn your store into a PWA.

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 have a faster, more responsive feel when accessed on mobile, they can be launched from a home screen icon, work offline, and use push notifications. Yet they can be accessed directly from a URL, and use web frameworks like HTML, CSS and JavaScript.

The Difference Between a PWA and a Normal Website

In truth, there’s no clear definition of what a PWA is versus a regular 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 an ecommerce PWA in the first place? What are the advantages to having a progressive web app, over a simple, mobile-friendly website?

Let’s take a look now.

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.

We don’t like waiting around for a site to load, especially on mobile, which is supposed to be fast and convenient.

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 web experiences are sub-par. They’re an afterthought. The publisher builds their site for desktop users, quickly checks to make sure nothing’s broken on mobile and calls it a day.

Mobile users today expect a better experience, tailored to their device, which is likely why 90% of mobile device 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 to visitors. 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 Building a PWA

Compared to a basic mobile website, 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 just the time, money and effort you spend in building it. With the benefits a PWA offers, it’s unlikely the investment could be high enough for this 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 from the ecommerce/retail space.

Alibaba

Alibaba’s mobile web conversions increased 76% when they switched to a PWA. 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 with 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, if you’re going to build a PWA, the technical part is coding the manifest and service workers.

Practical Features of Your PWA

The other side is the practical side. 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, find a solution to link the technical side of things.

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 help turn your ecommerce website into a PWA. 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 store owners should choose one or the other.

There are pros and cons to each. Native apps provide a better user experience, push notifications on all devices, more extensive use of device features and the ability to get into the app stores. While PWAs are more convenient, as they don’t need to be downloaded, and offer benefits on a larger scale as they serve all your mobile web visitors.

Realistically, however, they’re not 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.

As mentioned in the previous section, this covers all your bases. It allows you to serve a great user experience to people who find you on the mobile web, while offering an even better experience (plus benefits on your side in terms of engagement and retention) for loyal customers who want to download your app.

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. He says 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 native apps and PWAs 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, as is, 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, this can cost less than $1,000 upfront and deliver working apps in less than two weeks.

It’s also easy. MobiLoud does 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 a lot more.

You’ll start by booking a free demo with a product manager. They’ll discuss the process and anything specific you want from your app. After that, you can basically 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.