Headless Commerce

Real Talk: Ecommerce PWAs and The Challenges of Building One

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

In 2016, ecommerce reached a major milestone: Mobile devices overtook desktops and laptops as the most popular way to browse the internet. 

Online stores could no longer treat their mobile users as an afterthought. Now, the mobile experience is the most important aspect of ecommerce sites.

Online stores responded to this shift by making their sites responsive, meaning they automatically adjust to the smaller screens of mobile devices.

Many stores developed their own native apps for mobile devices as well, since native apps have offline functionality and are faster than responsive sites. Speed is particularly important for the mobile experience — according to Google, 53% of mobile users will leave a page if it takes longer than three seconds to load. 

Another advantage for native apps? Users can install an icon for them on their home screen, which keeps your brand fresh on their mind and generates more sales for your store.

But, native apps also have issues. For one thing, they’re inconvenient. Users must search for them on a distribution platform like the Apple App Store or Google Play and then download them in order to use them.

What is a PWA?

Progressive web applications (PWAs) have emerged as the solution to these problems. 

PWAs function as a combination between responsive sites and native apps. Like a native app, they’re fast, have offline functionality and can be set up as a home screen icon. But unlike a native app, they don’t need to be downloaded from an app store. PWAs can be accessed by simply clicking a link or entering a URL into the address bar of your browser, just like any other website. 

Interested in making a PWA for your online store? You should be aware that it’s a very complex and costly process that requires coordination between engineering teams and multiple tech vendors. Upfront costs can range from $250,000 to over $1,000,000 based on the complexity of the build and an additional $3,000 to $10,000+ in monthly subscription fees depending on vendors.

We’ll detail everything that’s required to make a PWA below.

Technologies Required to Build PWAs

Given the advanced capabilities of PWAs, it should be no surprise that they can be difficult and time-consuming to develop. There are many different technologies involved in the process, and ecommerce merchants must find experts for each of these technologies and often need to hire multiple vendors in order to build their PWA. 

Specifically, the following eight technologies make up the foundation of PWAs:

1. Headless PIM/OMS 

Every online store needs a product information management (PIM) system or order management system (OMS). This serves as the backend of your site, allowing you to edit your listings and keep track of your inventory, orders and shipments in real-time. 

To make a PWA, your PIM or OMS also needs to be headless, which means you can connect it to a separate system for your frontend/user-facing experience. 

Thankfully, popular PIM and OMS platforms have invested in making their systems compatible with headless commerce. Shopify, BigCommerce and Magento have robust application programming interfaces (APIs) that allow you to connect their technology to another system. 

2. Middleware Layer

A middleware layer is needed to send data from your ecommerce backend to your frontend storefront and vice versa. 

The APIs provided by Shopify, BigCommerce, etc. are essentially outlines that tell your developers how to integrate their platform with another. Middleware is the software that works with the API to facilitate communication between two platforms. 


Middleware layer
Image source: Medium

3. CDN

As mentioned above, speed is everything when it comes to PWAs. Mobile users just won’t tolerate poor performance. 

Physical distance plays a key role in site speed. The farther a user is from one of your servers, the longer it will take for elements on your site to load for them. 

Content delivery networks (CDNs) such as Fastly maintain dozens of servers and data centers that are distributed all around the world. Store owners can access the infrastructure of a CDN to improve their site speed in exchange for a recurring fee. 

4. SSR 

Server side rendering (SSR) is another technique that’s used to improve the performance of PWAs. 

With SSR, pages are rendered fully on the server and then sent to the user’s browser, which results in a faster page load time and improved user experience. 

SSR has search engine optimization (SEO) benefits, too. Search engines aren’t able to effectively index apps that render in the user’s browser (this is also known as client side rendering, or CSR), but they have no problem with SSR. The fast load times help SEO as well, as it encourages visitors to stay on your site instead of backing out. Increasing the average amount of time people spend on your site will improve your position in search rankings

It’s impossible to overstate the importance of SEO. Forty-three percent of traffic to ecommerce sites comes from organic search — this is much more than any other source. In fact, it’s more than direct traffic (20%), paid search ads (18%) and email marketing (4%) combined. 

Without high rankings in search results, your store may not receive the amount of traffic it needs to survive. SSR will boost your speed, improve your search rankings and increase traffic to your store.

5. Service Worker

The service worker is a script that creates a cache and then retrieves resources from this cache when needed. It runs in the background of a browser, separate from the page — this is how PWAs are able to function even when there isn’t an internet connection. 

6. Application Shell

The cache created by the service worker also enables you to use an application shell, which is the minimal code that’s needed for the user interface of the PWA. The application shell makes your PWA faster because it keeps static content cached and ready, so only dynamic content needs to be loaded. 

Application Shell
Image source: Google

7. Web App Manifest

A certain amount of information is needed for the browser to know what to do when the user clicks on your PWA’s home screen icon. The web app manifest provides this information, which includes a link to your PWA’s icon image as well as the link to your PWA itself. 

8. Storefront 

Finally, you’ll need to custom code a storefront using React or Vue framework for your PWA. This is where users actually interact with your site, making it especially important, time-intensive and costly to develop. 

You simply can’t afford to skimp on this aspect of your app. An unattractive or difficult-to-navigate design will cause you to miss out on potential sales and drive visitors away to your competitors.

The Bottom Line

The traditional method of developing PWAs may not be feasible for small and medium-sized businesses. 

To do this in-house, you’d need to pay for many more hours of work from your developers. Also, your current developers may not have the skills required to build a PWA. In that case, you would need to add new, highly skilled workers to your payroll. Can you afford that?

Another option is to outsource some or all of these development tasks to third-party vendors. But again, that’s quite an expense. And in addition to the cost of creating a PWA, you must consider that you’ll also need to pay for a lot of maintenance and management over time.

There’s no way around it — developing a PWA the traditional way would really cost you.


Adam Ritchie is a freelance writer based in Silver Spring, Maryland. He currently writes for Shogun, and his previous clients include Groupon, Clutch and New Theory.

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

Contact Us