Ecommerce Technology

Understanding the Rise of PWAs in Ecommerce: How Brands Can Benefit from a Progressive Frontend

Sherri Bohman / 5 min read

Understanding the Rise of PWAs in Ecommerce: How Brands Can Benefit from a Progressive Frontend

Get The Print Version

Tired of scrolling? Download a PDF version for easier offline reading and sharing with coworkers.

Add your info below to have the PDF sent to your inbox.
A link to download the PDF will arrive in your inbox shortly.

Up until a few years ago, it was hard to imagine when any technology could replicate the experience of a native mobile app. However, as being accessible on mobile is becoming increasingly essential in the ecommerce space, the march of progress did indeed find an exciting solution.

Progressive web apps or PWAs have been around since 2015. This technology works everywhere and can provide the highly-engaging user experience of a native app without the same development costs.

PWAs have been used by large enterprises including Twitter, Alibaba, and Walmart to increase conversion rates and grow revenues. However, small and medium businesses can also take advantage of the same technologies to create an app-like experience for their customers and expand their audience.

In this article, we’ll cover what PWAs are, how they’re benefiting ecommerce, and how one CBD business has used PWAs on the frontend to launch their headless ecommerce site.

What Is a PWA?

A progressive web app is a technology that enables businesses to build web applications that have the look and feel of native mobile apps–all while using web technologies like JavaScript, HTML, CSS. Developers can use static site generators like Gatsby or VuePress to launch highly engaging PWA storefronts. These can then be connected to ecommerce platforms on the backend.

PWAs run in a browser but give users the experience of a native app through key features like:

  • Access to the app through the mobile home screen
  • Offline app access
  • Push notifications

PWAs may soon be eclipsing native apps. A Jaxenter survey found that 46% of their developer audience believe PWAs to be the future, while only 14% who believed native apps will ultimately prevail. For some businesses having a native mobile app may still make more sense. For others PWA can replace a mobile app. Some businesses may even combine both technologies.

PWA technology is gaining momentum as popular new tech for headless commerce configurations. Headless commerce means decoupling the frontend presentation layer from the backend ecommerce functionality. By using a PWA on the frontend, the brand can get the fast, responsive, app-like experience they want, while connecting it through APIs to the commerce features that can drive customers through conversion.

Benefits of Progressive Web Apps

Mobile share of ecommerce is rapidly growing. By 2021, mobile commerce is expected to generate 53.9% of all online retail sales revenue. Businesses are looking for the best way to get their share of the mobile ecommerce market. While previously, that way might have required a native app, today the benefits of PWAs may make it possible for some businesses to get the same functionality with PWAs.

1. Reach a wider audience.

PWAs are designed to work for every user, regardless of what platform they’re on. They’re also responsive to fit different size screens. Since they’re instantly accessible to a wide audience and easy to share through a link, more people adopt them than would take the time to download an app.

2. Reduced development costs and time.

A native app requires not only its own development but also its own maintenance. And to reach the same audience you have to create both and Android app and an iOS app and potentially a Windows 10 app–and manage all of them in addition to your site.

3. Speed and accessibility.

Google found that 53% of mobile users abandon a site if it takes longer than 3 seconds to load. Speed is of the utmost importance, and PWAs can provide that as they’re designed for smooth and speedy user experiences. PWAs tend to be super fast because they use modern web development technologies and frameworks. Even better, the apps work even offline or with lower quality networks.

4. Better conversion.

In part because of the above benefit, PWAs provide a better user experience for customers and a better user experience means higher conversion rates. For example, Alibaba saw a 76% increase in conversions across different browsers after introducing PWAs.

How PWAs Can Work with Ecommerce

Now that you understand some of the benefits of using a PWA storefront with your ecommerce store, what are some of the options for building your storefront? Here are a few to consider.

1. Deity.

This is a well-known PWA and microservices oriented platform. Deity takes a modular approach to solving enterprise PWA requirements and can be leveraged with various frontends. Their DEITY Falcon is one such PWA frontend that allows businesses of all sizes to offer scalable, robust web and mobile experiences to their users.

In October 2019, Deity announced a partnership with BigCommerce so that customers can use DEITY Falcon on the frontend and easily connect to BigCommerce’s highly-extensible open SaaS headless platform on the backend. With this headless configuration, businesses can create the web experiences their customers are coming to expect–including all the advantages of a native app–with a much faster speed of innovation and lower cost of ownership.

2. Gatsby.

Gatsby is an extremely popular framework used for building static PWA sites with React. Gatsby has great documentation and a strong community of developers working with it. It enables the building of blazing fast websites and apps.

The agency Third and Grove helped develop a Gatsby-BigCommerce source plugin that makes it easy to build a PWA ecommerce storefront using Gatsby on the frontend and BigCommerce on the backend. BigCommerce has also released a Gatsby-Netlify CMS template to jump-start developing a serverless PWA storefront.

3. Vue Storefront.

Vue Storefront is one of the fastest growing platform agnostic PWAs, meaning it can be used with most ecommerce platforms that you may want to use, including BigCommerce.

You can see the PWA strategy getting legs simply by how the developer community is reacting. Vue Storefront has rapidly increased the number of stars on Github (a sign that developers like or want to bookmark a project) and the Vue Storefront Slack channel has over 1,200 members.

Canvas 1839: A PWA Headless Success Story

Canvas 1839 is an Austin-based company selling premium CBD wellness products. They recently launched their site on BigCommerce using a PWA built on Gatsby. This has enabled them to get the advantages of SaaS for ecommerce with more freedom for innovation on the frontend.

canvas example

Corey Ward, the Senior Web Developer who worked with Canvas 1839 to create their site explained why this headless configuration was chosen: “We felt more confident that we’d be able to meet whatever challenge they threw at us using tools like Gatsby, React, and GraphQL than we did constraining ourselves to platform-specific tooling that caters to a traditional ecommerce experience. It’s a win-win because we rely a lot on development tools like Git, Babel, and Webpack, and none of these are well-supported on any SaaS ecommerce platform that we’re aware of.”

The advantages of using headless also mean quicker, more efficient development time and updates for both developers and marketers on the team. Ward explains: “For managing content, we’re using a really flexible approach that lets the marketing team build new pages from a library of content blocks we’ve defined in Contentful. This lets the marketing and content teams build rich informational pages that are fully integrated with the rest of the site; whether it’s putting a product section in a blog post or adding an FAQ dropdown section to a product page, it’s all possible from within Contentful, no developer or code needed.”

After originally launching on Shopify and experiencing growing pains, Canvas 1839 found a home with BigCommerce as a platform that is both supportive of CBD merchants and extensible enough to build what they needed. Speaking of the transition Ward says: “We liked that BigCommerce supported Square payments and that the checkout experience let us integrate with Segment. We were able to make the transition without any changes to the user experience on our website, which is pretty incredible.”

Shopping experiences are not one-size-fits-all. Apple Stores would be a terrible way for Home Depot to try to sell tools and vice versa. By using a headless approach, we make decisions with the context for what kind of experience we’re trying to create. We appreciate that level of intention. – Cory Ward, Senior Web Developer, Canvas 1839

Although the the Canvas 1839 site is too newly launched to have strong comparative data, Ward says they have already gotten a great reception anecdotally from customers. And with a flexible system that is easy to innovate and on a platform that’s built to scale, they have a lot of room to grow and expand.

Want more insights like this?

We’re on a mission to provide businesses like yours marketing and sales tips, tricks and industry leading knowledge to build the next house-hold name brand. Don’t miss a post. Sign up for our weekly newsletter.

Table of Contents

    SHARE

    Sherri Bohman

    Sherri Bohman

    Sherri is a Product Marketing Manager at BigCommerce, with a relentless focus on the customer and their needs as she brings new products to market. Sherri brings nearly a decade of experience in marketing and business development in both corporate and start-up environments, and holds an MBA in marketing and entrepreneurship from the University of Texas.

    View all posts by Sherri Bohman

    Less Development. More Marketing.

    Let us future-proof your backend. You focus on building your brand.

    A New Era of Ecommerce: Headless Commerce

    Download our whitepaper to get a headless commerce overview + checklist.