Hand holding a mobile with an online shop

Improve your eCommerce with Progressive Web Apps

Currently, the topic PWA (Progressive Web App — see definition box) is very much propagated especially within eCommerce.

Rightly so, or is this just a new buzzword to make a big fuss?

I would like to briefly explain here what a PWA is, what advantages it can have for eCommerce businesses, and what you should pay attention to when approaching the topic.

In a nutshell, what’s a PWA?

Basically, it’s — as the name suggests — an application, so a software application on the web (in contrast to a native application for Windows, Android, or iOS).

Progressive can best be imagined as “growing with the game.” So, it grows from a normal website, as we know it from before, to a modern web application, which hardly differs from a native application. And it does this virtually automatically, depending on the (browser) environment it finds.

Why would an operator want an eCommerce Progressive Web App (PWA)?

Probably every owner of a commerce site wants to increase their turnover. In my view, the Progressive Web App (PWA) for eCommerce has 3 major advantages over a traditional website:

  1. Faster
  2. More beautiful
  3. Louder

Faster, because most of the Progressive Web App runs in the customer’s browser (and not on the provider’s server), it can manage with smaller amounts of data and loads faster. Although the initial load is slightly larger due to the app components, many server requests can be saved afterward. This means that while the classic website had to load more and more content from the server, the PWA only has to load the most necessary data (for example, only product images and data but not the entire program code around it).

More beautiful because a Progressive Web App simply “feels” better. How’s that possible? Because a PWA runs in the browser, animations and transitions can run as smoothly as with a native app. For the customer, this means a great shopping experience — and customers who are enthusiastic like to come back and buy more.

Louder because the Progressive Web App allows eCommerce owners to use different mechanisms to bring the site to the customer’s attention:

  1. Homescreen: PWA can be placed on the home screen of a device just like normal apps. If you start them from there, they run fullscreen, so the customer stays in the context of the application and can’t switch to the competitor “quickly.”
  2. Push notifications: A PWA can also send push notifications similar to apps. This gives you the opportunity to specifically draw customers’ attention to promotions, and so on.

I have ignored one very important argument: Google. Google loves fast websites and pushes the topic PWA. Many SEO experts are of the opinion that a page that fully meets the criteria of a PWA will move up Google’s ranking.

As usual with SEO, there are unfortunately no absolute truths and so there are other experts who claim that for an optimal Google performance so-called Server Side Rendering (see box) is needed — so in principle a classic, old, static website. Whatever the right way may be, it’s undisputed that it goes in the direction of PWA. And Progressive Web App and Server Side Rendering don’t have to contradict each other, as I’ll explain below.

PWA in a nutshell

A Progressive Web App is a website that has many features of a classic application but doesn’t need to be installed (because it’s a website). Essential features are offline mode, push notifications, add to home screen, app-like transitions and interactions, links to single pages, and no app update required.

Google pushes the topic and has created a good overview for the benefit of PWA.

Feature comparison: Native app versus Progressive Web App (PWA)

Native AppPWA
Ease of useLowHigh
Updates necessary?YesNo
Offline readinessYesYes
Push-NotificationsYesYes
“Add-to-Homescreen”YesYes
App-StoreYesYes (Android)
Native Device FeaturesFullPartly
Deep LinksNoYes
Google indexableNoYes
SEO / DiscoveryLowHigh
Cross-Platform AvailabilityPartlyFull
Cost EfficiencyLowHigh
Subscription e.g.YesOnly Native
eCommerce IntegrationLowHigh
Simple EditorNoYes

Native app versus PWA

Of course, it always depends on the intended use whether a native app or a PWA is recommended. But what the comparison impressively illustrates is how many areas the “web native app” — the PWA — has already opened up to the native app and how many advantages it has achieved.

From our many years of eCommerce experience, we know that it’s becoming increasingly important to be able to react quickly to market requirements and try out ideas quickly.

For the PWA, there are solutions in the form of Composable Frontend Platforms that enable simple changes and quick testing by the business managers. For the native app, there’s usually only the tedious way.

How eCommerce Progressive Web Apps owners can easily use it

  1. Very individual: do everything yourself
  2. Fast and dirty: The proxy PWA
  3. Modular architecture with a Composable Frontend Platform

Do it yourself

Especially companies with a tech DNA but also companies with a large internal IT department tend to build and operate their commerce sites completely on their own. This makes even junior programmers happy — finally, they can do some basic research. However, most companies underestimate the complexity. After all, it’s not just about delivering an outstanding customer experience; the entire development process must be run, secured, automatically scalable hosting must be ensured, and — most importantly — the Marketing team must be able to make daily adjustments without having to rely on developers. This is the only way they can keep up with the fast competition.

In recent years, we’ve met many companies that have recognized that “doing it yourself” isn’t the best idea in the fast-moving IT world. The original customer added value can be created in this way at least in the rarest cases…

Fast and dirty

If you have an existing, modern commerce site, you don’t want to throw everything away and build a new one just because a new technology is emerging. Therefore, there are some providers on the market who practically act as a proxy in front of an existing shop and promise to create an outstanding mobile customer experience in this way. This might work…

Composable Frontend Platform

The trend towards an API first and headless architecture in eCommerce has been gaining ground for 2 years now. At the same time, other companies have specialized in Composable Frontend Platforms. These providers focus on an outstanding customer experience on all screens and deliver a Progressive Web App, especially for mobile devices.

As in the other cases, it’s crucial that the people in the departments responsible for the success of eCommerce in day-to-day business can act autonomously from developer resources. The so-called Composable Frontend Platforms provide an easy-to-use site builder with which online managers and marketers can implement their ideas and campaigns as easily as with a homepage editor.

Progressive Web App versus Server Side Rendering

If you believe Google’s own Lighthouse Score, you don’t have to worry about Server Side Rendering (SSR) if you have a clean PWA implementation.

What’s it all about? Server Side Rendering is, in short, the classic way to deliver a web application. All essential content is calculated on the server and delivered “ready” to the customer’s browser. Each page transition, each user interaction first goes to the server that calculates the corresponding page and delivers it to the browser. This is a very tried and tested technology that requires very few resources on the customer’s side and makes little demands on the customer’s hardware. And not only towards the customer, but also towards the search engines. Because this behavior is like a customer.

Google can index a PWA and, in the opinion of many “SEO experts,” even “rewards” modern, this mobile-friendly technology.

Modern solutions often also offer a combined approach: the content is delivered as SSR for search engines and as PWA for real customers.

Testing — learning — optimizing

Anyone who wants to successfully run commerce sites today must hold their own against the big players in the market. To put it simply, everyone has to find their own way to sneak up on the big players with very limited resources. A lucrative niche, perfect pricing, innovative ideas — these are just some of the possibilities.

If your customers are accessing your offer from mobile devices, you should definitely — but not at any price — be concerned with the subject of Progressive Web App. From my point of view, the PWA must fit into the overall strategy.

In my experience, an essential factor for success today is agility — regardless of which of the above-mentioned ways to successful eCommerce you choose. You have to be able to adapt your assortment, your pricing, as well as your overall offer again and again.

“Testing — learning — optimizing” is the credo. If you don’t have a 100 person team of frontend developers (who also still have free resources), this could be a topic for you. One help can be a so-called Composable Frontend Platform, with which the online editors can easily make changes based on the existing components.

In summary

A PWA is more than just another run through the roost. But the development will go on all the time. So don’t make a quick fix, but use a modular architecture with an API first eCommerce system and a Composable Frontend Platform that allows your business team to do the day-to-day business without relying on coding via a simple site builder.

Stay in the loop

Subscribe to our newsletter to keep up-to-date on all the latest Frontastic news.

Related

operational efficiency as metric for headless commerce

Operational efficiency: The future metric for headless eCommerce platforms

,
This blog post explores how operational efficiency will be the future metric for headless eCommerce platforms. If you've moved to headless or are planning towards headless transition then this article will serve as the best guide for you.
Read more

Frontastic architecture: Frontastic studio

,
In our architecture blog series, we'll look at each part of the Frontastic architecture, how it works, and what you can do with it. In this post, we'll focus on the Frontastic studio.
Read more
MACH Alliance Logo