What is a PWA and how can it give you a competitive advantage?

B2B - B2C E-Commerce Innovation
by Michael Gerard

Overview

The global e-commerce market is expected to grow from $1,808.5 billion in 2019 to $3,056.3 billion in 2023 which is a CAGR of 14%. [MarketWatch] This is great news for e-commerce companies, however, expect competition for buyers’ business to significantly increase in this hypergrowth market. Delivering an engaging and inspiring digital experience (DX) to these buyers is one guaranteed way to establish a competitive advantage. And with mobile devices becoming the de facto standard for online consumer research and product purchases, it is imperative for e-commerce companies to create amazing mobile experiences that are quick, easy to access, reliable, and provide a consistent experience across devices. A perfect use case for the dream team: headless commerce + hybrid headless CMS + progressive web applications (PWAs). The commerce platform + hybrid headless CMS is a well-proven and deployed tech stack for experience-driven commerce, while the PWA is a relative newcomer to the market.

In this post I’ll cover:

  • How did the “app” concept evolve?
  • What is a PWA?
  • How is it different from a traditional website or 100% native application?
  • What are examples of PWAs in action?
  • How can you start using PWAs in your own company, now.

Jumpstart Time to Experience for your Customers by up to 75% with the FirstSpirit Experience Accelerator - Hybrid Headless CMS and PWA

Read More!

How did the “app” concept evolve?

In the early years of e-commerce, the website store was solely accessible by a desktop, providing users the opportunity to learn about and purchase products. However, as mobile device technology advanced and its usage increased, retail and pure-place e-commerce companies rapidly realized that in order to stay relevant in people’s lives and keep up with the competition, they needed to expand to mobile commerce. However, depending upon a traditional website or website app for mobile commerce proved to be quite a problem:

  • E-commerce sites were unable to take full advantage of mobile device features.
  • End users were left with a poor UI experience. (i.e., websites were designed for desktop usage, not in a small screen; adaptive or responsive designs were not always inclusive of the variation and age of devices across the world)
  • E-commerce site response times were dependent upon buyers’ Internet connection speeds and wireless infrastructure reliability.
  • Deploying websites that were able to perform well and give buyers a great experience on any mobile device was very costly. These high costs also reduced business users’ ability to rapidly make changes on their websites in response to buyers’ needs.

The native application was developed to resolve many of these backend and frontend challenges.

Native applications were the perfect solution to get e-commerce merchandise “closer” to buyers, while giving companies the opportunity to create much more engaging digital experiences. These native apps (accessible through an app. store) are installed directly into mobile devices. Native apps certainly have their advantages, however, they also come with several disadvantages:

Native App. Advantages Native App. Disadvantages
Can be customized to leverage the features (and hardware) of the mobile device or platform. (e.g, GPS; motion detection; camera and voice access) Significant time and resources required by developers to create, test and update native apps for each type of operating system and device. (e.g., iPhone, Android, iPad)
Easier access on mobile devices. (e.g., can be installed on the mobile home screen) More difficult to track down and resolve bugs due to support of varying operating systems and devices.
Don’t always require Internet access. (i.e., can be used offline in limited cases) App must typically be approved by the platform’s app store.
Can be customized for a device or platform. Limited capabilities in an offline mode.
Faster performance since the app is not relying 100% on a distant web server for updates. End users need to download the app - negatively impacting conversion rates.

You no longer need to settle for the native app: The Progressive Web Application(PWA) offers the best next generation experience for mobile commerce customers.

e-Spirit CMS First to Integrate with SAP Commerce Cloud’s PWA “Spartacus” Storefront

Read More

What is a Progressive Web Application (PWA)?

As summarized in the prior section although the native app has many advantages for businesses and consumers, there are still a number of disadvantages that limit its use. The latest evolution of the native app is the Progressive Web Application (PWA). Adriana Jara, Developer Advocate at Google, offers a simple description of the PWA: “A progressive web app is built on the web, yet has native capabilities.” [source]

A PWA essentially stores files (e.g., images, videos or other content) locally on a mobile phone where they can be accessed quickly when needed, even offline while updating these files automatically in the background as determined by the PWA. The most important content is downloaded first, with other content downloaded in a “progressive” manner, enabling the end user to see the most important content quickly. With a PWA you get the engagement available in an app coupled with the accessibility anywhere across the Internet - the best of both worlds between a traditional website store and a native application.

Developers typically need to address multiple questions when building an app., such as which language to use, which framework, where will the app be offered, which devices will be supported, etc. As The Net Ninja indicates in its “PWA Tutorial for Beginners #1 - What Are PWA's?”, “It is much simpler to create a mobile app with vanilla Javascript that runs inside the browser like a normal website does, but which could also harness the power of native device features on a mobile device.” [source] This is the essence of a PWA.

The most important advantages of the PWA include:

  • Truly “mobile”, with or without Internet access: A reliable e-commerce app that loads instantly regardless as to whether you’re connected to the Internet. The PWA can be used off-line; for example, if a user is unable to access the Internet, or if the host is offline. This capability is especially important for an ecommerce company wishing to provide an uninterrupted buying experience.
  • Speed for the end user: A PWA responds quickly to the needs of buyers and other end users. They will get the same experience as with a native app, and they don’t even need to download the app from a store resulting in potentially less usage of a device’s memory.
  • Higher conversion rates: Conversion rates may be higher with a PWA since end users do not need to download the app.
  • Ability to leverage mobile device features: Similar to the native app, a PWA can tap into the full power of a mobile device; for example, installs on a mobile home screen, can utilize a device’s motion detection capabilities and can send push notifications to users.
  • Developer simplicity = Faster, lower cost deployment: Developers are able to create PWAs (mobile-like app experiences) without learning new languages, frameworks, etc. They are able to use regular web technology such as HTML, CSS and Javascript to create a PWA. This translates into the ability to deploy an app faster and at a lower cost.
  • Goes beyond “mobile”: PWAs can be used on any device that has a supporting browser.

As great as PWAs are, there are some disadvantages worth mentioning. Most importantly, it is still relatively new, and therefore there is opportunity for greater adoption, support and marketplace leverage. For example, PWAs are still limited in their ability to leverage all mobile device features as with a native app, and it requires extra effort to make a PWA available in a native app marketplace. In fact, PWAs are not even publishable to the Apple App Store. However, most mobile operating systems provide a means to add an app icon for PWAs, with the PWA being capable of requesting users to add the app to their home screen via the browser. Also, Microsoft is 100% behind the development and use of PWAs:

“We believe PWAs are key to the web’s future, and couldn’t be more excited about their potential to enable more immersive web app experiences across all device form factors.”

https://blogs.windows.com/msedgedev/2018/02/06/welcoming-progressive-web-apps-edge-windows-10/

A best practice for deployment of a PWA for e-commerce is to ensure tight integration with your ecommerce platform, as well as leveraging a hybrid headless content management system (CMS) to orchestrate content-driven experiences in an efficient and rapid manner. e-Spirit offers its FirstSpirit DXP Experience Accelerator (FSXA) exactly for this use case. The FSXA shortens implementation time significantly with a ready-to-go progressive web application front-end (PWA) that can be used as a blueprint for custom mobile-first websites and apps, as well as a hybrid headless CMS to create content-rich omnichannel experiences with unprecedented speed. The FSXA out-of-the-box solution leapfrogs project implementation time ahead by up to 75% for faster time to market and accelerated time to revenue.

Create Digital Experiences FAST, EASY and NOW with a PWA and hybrid headless CMS [Webinar]

Watch now on demand!

Examples of PWAs in Action

Not convinced yet of the potential for PWAs to create more immersive experiences for your audiences, both faster and cheaper for your company? Here’s a curated list of companies that have already deployed PWAs:

  • Starbucks, Housing.com, Digikala, Flipboard, Soundslice, 2048 Game, MakeMyTrip, Uber, Padpiper, Pinterest, Yummly, Spotify. “12 Best Examples of Progressive Web Apps (PWAs) in 2020”, SimiCart. [source]
  • Lancome, Crabtree & Evelyn, Debenhams, Garbarino, George, Hobbycraft, Lilly Pulitzer, Patpat, Petlove, PureFormulas, Redmart, Snapdeal, Tommy Bahama and West Elm. “17 Progressive Web Apps for Your Inspiration”, Mobify. [source]
  • Facebook, Forbes, Pinterest, AliExpress, Flipkart, Telegram, Google Maps Go, Uber, Trivago, Tinder. “10 Best Examples of Progressive Web Apps (PWA s) in 2020”, appmaker. [source]

As evident from this list of companies that have already deployed PWAs, retail/e-commerce is a popular use case for progressive web applications including integration with modern commerce platforms and hybrid headless content management systems. (refer to the PWA advantages already mentioned)

PWAs are still in the early stages of evolution, however, companies would be well served to begin preparing for a PWA world.

Create more immersive experiences for your customers with a PWA

Reach out to our e-Spirit experience-driven commerce experts if you’d like to learn more about the power of PWAs to create more immersive experiences for your customers.

Request a free trial!

About the author

Michael is responsible for e-Spirit's global marketing strategy. He has 15+ years of marketing and sales experience in SaaS companies, and has written about many topics across technology, marketing strategy and other marketing-related areas.

Michael Gerard
Chief Marketing Officer

gerard@e-Spirit.com