Ecommerce

Progressive Web Apps for Ecommerce: What You Need to Know

Create new pages and deploy site changes quickly without code using Shogun's Page Builder for your eCommerce CMS

Reduce development time while boosting your conversions.
Learn More

People are no longer tethered to their desktops. They don’t even need to carry around bulky laptops anymore. 

When people want to use the internet these days, they just need to pull their phone out of their pocket. Mobile technology has progressed to the point where smartphones can do almost anything you can do on a standard desktop computer. 

In 2018, 52.2% of worldwide internet traffic was generated through mobile phones — and that stat doesn’t even account for tablets. So, the broader category of mobile devices generates an even larger share of internet traffic. 

The mobile revolution has led to the development of a new kind of software called the progressive web application (PWA). With PWAs, online businesses have been able to improve user experience, increase conversions and ultimately make more money. 


Image source: Medium


Let’s take a step back and look at the big picture: What exactly are PWAs, and how do they produce these benefits for ecommerce companies? 

The History of PWAs

Steve Jobs’s Apple keynote address of 2007 was particularly notable, as this is when the iPhone was first announced. 

In this address, Jobs said that web apps (programs built for internet browsers that are compatible across devices) would be the standard format for apps on the iPhone. Instead of having to work with a software development kit (SDK) that’s specific to the iPhone, developers would be able to use web technologies to start creating their own apps right away. 

But that’s not how things turned out. 

Just a few months later, Jobs reversed his position. An SDK for the iPhone was released, and native apps (programs built for one type of device) became the standard format for apps on the iPhone. Forbes even called Jobs’s initial move toward web apps one of his biggest blunders as an executive. 

Fast forward to 2015. That’s when Google developer Alex Russell published a blog post about a recent wave of web apps that were developed to behave like native apps on mobile devices, similar to Jobs’s initial vision for the iPhone. In the post, Russell coined the term “progressive web application” to describe this phenomenon.

What is a PWA?

According to the seminal Alex Russell article on the subject, PWAs are web apps that share the following key features:


  • Responsive: PWAs automatically adjust to the type of device and size of screen that’s being used by the visitor.
  • Offline functionality: Like a native app (and unlike a standard website), PWAs can be used even when there’s no internet connection.
  • Installable: Also like a native app, an icon for the PWA can be installed on the user’s homescreen. 
  • Re-engageable: Push notifications are another native app-like feature offered by PWAs. 
  • Linkable: PWAs can be accessed by simply clicking a link or entering a URL into the address bar of a browser, just like any other website.


The three main technologies used to create PWAs are the service worker, application shell and web app manifest.

The service worker is a script the browser runs in the background separate from the web page. It’s used to create a cache of resources and then retrieve resources from this cache — this is how PWAs are able to function offline, and it’s also how they can send push notifications even when the PWA is not open. 

Another feature that’s made possible through the service worker is the application shell. This is the minimal HTML, CSS and JavaScript that’s needed for the user interface of the PWA. The application shell is cached offline so only dynamic content needs to be loaded from the internet, which results in improved performance. 

Finally, the web app manifest is a file that essentially tells the browser how to behave when the PWA is installed as an icon on the user’s home screen. It includes information such as links to the icon image and the URL that will open when the user launches the PWA. 

The Benefits of a PWA

Before PWAs, ecommerce sites had two options for reaching mobile users: They could make their standard website responsive, or they could develop their own native app (many sites did both). 

The problem with responsive sites is they can have issues with performance. And if your site takes more than a couple seconds to load, you’re going to lose a lot of potential customers. Indeed, Google has found that 53% of mobile visitors will back out of a site if it takes more than three seconds to load.

Native apps are faster, but they’re also somewhat inconvenient. The user has to go through the effort of downloading them from a distribution platform such as the Apple App Store or Google Play. 

PWAs solve these problems. 

First of all, they’re as fast as native apps, so you won’t need to deal with performance issues that often come with responsive sites. They also don’t need to be downloaded, which means you’ll have a chance to engage with people who never would have used your app otherwise.

Another advantage to PWAs is that, unlike native apps, they’re indexed by search engines. 

Native apps are usually only searched for and downloaded after the user has already heard about them. It’s unlikely that someone will browse the directory of an app store unless they know what they’re looking for. But with search engines, there’s a chance for people to discover your business when they weren’t specifically trying to find you.

In fact, the success of your online store may depend on how visible your site is on search engines. The majority of traffic to ecommerce sites is generated by organic search

And it’s not good enough to just be listed on the first page of results for a given search query. No, you need to be near the top, or else you won’t get much of the traffic at all. Most traffic goes to the top three results, with the first result taking in a full 33% of the traffic

This is why U.S. businesses spend more than $70 billion annually on search engine optimization (SEO). If you can get to the top of search results, the benefits far outweigh the costs. PWAs allow you to offer a mobile experience without sacrificing any SEO opportunities.  

Development costs are another point in the favor of PWAs. With native apps, you need to create a different version of the app for each device it will be available on. Also, advanced coding skills are required to create them. A single PWA will work on all devices that support web browsers, and it’s much easier (as well as more affordable) to find developers who know HTML, CSS and JavaScript. 

One last problem with native apps: When an app is successful, copycats will often be developed, which then makes it difficult for users to identify and download the original app. 


Image source: Twitter


PWAs don’t have this issue; users can look at the URL to quickly verify they have what they want. 

PWA Case Studies

As shown above, major companies such as Alibaba have released their own PWAs. 

But the experiences of multibillion-dollar corporations may not be very relatable to yours. Like most businesses, you probably fall into the small-to-medium enterprise (SME) category with fewer than 500 employees. 

So, let’s take a look at what a few SMEs have been able to achieve with PWAs:

PureFormulas



The Miami-based online health and supplement store PureFormulas had a problem: Its site took a long time to load, and this was driving a lot of potential customers away. 

To improve performance, the company transformed its mobile site into a PWA. Now, there’s no longer a flash of white screen when visitors navigate between pages. And overall, the site is at least twice as fast as it was before. 

After the transition, PureFormulas found that its PWA had a 14% higher conversion rate and a 23% higher revenue per visit than its previous mobile site, according to Mobile Shopping Connect

Settled



Settled is an online service for listing and selling properties. After seeing that most of its traffic was coming from mobile devices, the company decided to make an effort to improve the mobile experience of its website

One priority for Settled was making it so that users could access features even when they didn’t have a strong internet connection. Settled didn’t want its users to get frustrated by missing out on a potential purchase or sale just because they couldn’t get a good signal. This is what attracted the company to the PWA approach, as it offers exactly that kind of offline functionality. 

The Settled PWA allows users to open their listings and messages regardless of connection speed. It’s much smaller and faster than its previous mobile site as well. 

Switching to its new PWA resulted in an 8% increase in mobile transactions, a 23% increase in mobile conversions, a 13% reduction in bounce rate and a 14% reduction in overall cost per conversion.

Paula’s Choice



Implementing a PWA greatly increased performance for the beauty brand Paula’s Choice. 

Specifically, it reduced the amount of time it took customers to search for an item and add it to their cart by 67%. This, in turn, led to a 55% increase in product views, a 61% increase in add to cart rates, a 46% increase in conversion rate and a 40% increase in revenue, per Mobify

Petlove


At the Chrome Dev Summit 2017, Google executive Thao Tran highlighted how upgrading to a PWA helped the Brazillian online pet supply store Petlove. The store experienced a 280% increase in conversions and a 270% increase in the average amount of time visitors were spending on the site, according to the video

Perhaps most importantly, the PWA reduced the amount of data that the user needed to download by 800%. This is important in developing countries like Brazil, where many visitors are still accessing the internet on a 3G or even 2G connection. Large sites can take an especially long time to load in these areas — the reduction in size provided by the PWA made Petlove much more accessible to Brazilian mobile users.  

OpenSooq



Despite having a relatively small team, OpenSooq has become one of the leading classified sites in the Middle East and North Africa region. 

OpenSooq’s success has been driven in large part by its PWA. Just like Petlove, its visitors often have poor connections and devices with limited storage capacities. Before the release of the PWA in 2017, this led to bounce rates as high as 49% in some areas. OpenSooq needed to make its mobile experience as lightweight as possible. 

In addition to reducing size and improving speed (average load time was cut from 4 seconds to 2 seconds), OpenSooq was also drawn to the native app-like features that are possible with PWAs. With the help of the add-to-homescreen function and push notifications, OpenSooq was able to significantly increase user engagement. The number of page visits increased by 48%, the average session duration increased by 28% and bounce rates across all markets were reduced by 29% according to Web.dev

Ecommerce in the ‘20s

The new decade has just rolled around, and already we can see the trends that are poised to dominate the ecommerce industry for the next 10 years. 

In addition to PWAs improving user experience, you can expect to see stores using drag-and-drop page builders instead of hiring web designers and chatbots instead of hiring extra customer support staff. Overall, ecommerce is getting easier for store owners and customers alike.

Shogun is the visual CMS trusted by the top eCommerce brands like Leesa Mattresses, Chubbies Shorts, and K-Swiss.

Contact Us