When to opt for a Progressive Web App in e-commerce

If anything is celebrated as ‘next gen e-commerce’, it is the deployment of Progressive Web Apps, or PWAs. PWAs have become ubiquitous online, with plenty of standard PWA solutions available in the market. The question is: when is it wise to deploy a PWA, where exactly do the concepts of ‘headless’ and ‘decoupled’ come in and how do you ultimately decide whether a PWA is suitable for your online business? Software Architect Bavo Janss takes you into the world of PWAs.

Abbreviation PWA

It may be wise to gain some in-depth knowledge about the origin of Progressive Web Apps before deciding whether it is the correct choice for you. Originally, a Progressive Web App comprises a technical concept that provides added value from technology. It’s easier to explain why and when a PWA is interesting using the giant shift from desktop to mobile use over the past decade.

The foundation of PWAs

Smartphones have undoubtedly and permanently affected our behaviour, in particular our online behaviour. Upon close examination of the first generation of smartphones, one thing you’ll find is that their slow connection and very low processing power made surfing the net and quickly bringing up a website on their tiny screens very annoying. The launch of native apps solved quite some issues:

  • Apps were new in many areas, providing plenty of room for experimentation and innovation. New technologies and user interfaces were developed, which we now operate entirely intuitively.
  • The apps ran directly on smartphone hardware, making clever use of available capacity. A rapid and responsive experience was created using less processing power.
  • The mediocre Internet connection required the first generation of app developers to be creative with smart and efficient downloads from a server, thus making digital services easily accessible for users. The principle of the classic client-server application made its re-entry, but now with a web server as the back-end.

The final issue involves the concepts of ‘decoupled’ and ‘headless’. An application that uses a server to communicate across the Internet – commonly using an API – is referred to as decoupled, meaning that the server functions both as the data consumer and data provider. We refer to a headless server because the server is no longer involved in the layout or formatting of data. The head has been relocated to the client. The terms of decoupled and headless therefore apply to both native Apps and PWAs.

A PWA feels like a common, native app

You may think: ‘Okay, but how does this technical explanation about the evolution of apps help me, and how does it link up with Progressive Web Apps? After all, the speed of smartphones has greatly improved and a website simply works.’ It may sound as somewhat of a cliché, but it has everything to do with it.

Apps have demonstrated that small screens have far more options than we ever thought. App design has been a major boost in the rise of new technologies such as CSS3 and HTML5. Thanks to these technologies, apps have become increasingly similar to one another, resulting in concepts such as responsive design and mobile-first becoming the standard.

Advantages of a PWA

Progressive Web Apps take things a step further than ‘responsive’ and ‘mobile-first’. The interface responds immediately and has smooth transitions, making a PWA feel like a native app. The PWA does not yet function as a one-on-one replacement of a native app, because for instance, native apps have access to other features and apps on your smartphone. If required for the strategy, a native app is the better choice. On the other hand, the PWA has some major advantages:

  1. You will require just one PWA, because a PWA works on all devices: desktop, tablet and mobile.
  2. A Progressive Web App has only one code base, resulting in quicker and cheaper development.
  3. A PWA does not have to be installed but does provide the option to work offline.
  4. Progressive Web Apps consist of various packages of code, layout and content the browser retrieves bit by bit. Once everything is collected, a PWA responds and communicates in a manner comparable to a native app.
  5. Search engines consider PWAs to be regular websites, which is convenient for SEO.

We are increasingly seeing app icons on a smartphone actually function as a link to a website, usually still in a thin app skin – the typical appearance of a PWA. Twitter and AliExpress are the main and most widely known early-adopters of the PWA.

Handy features thanks to the technology of PWAs

Essentially, a Progressive Web App is a technical concept built using standard web technology, the design of this ‘stack’ making a PWA a PWA. Characteristic of the technology is the relocation of intelligence and logic to the browser. In addition, the interaction between clients and the server is dealt with in a smarter manner, making the PWA seem faster and providing room for additional functionalities without slowing down the experience. Examples include:

  • More personalised content for users;
  • Complex structures for product selection, such as a configurator;
  • User flows with many alternative paths, such as decision trees.

When to opt for a PWA

Working with a PWA is two-fold: use it as a standard off-the-shelf PWA or a customised PWA. Off-the-shelf PWAs provide little more than a standard Magento or Shopware solution, but if your business merely requires a standard solution, you might ask yourself why you would opt for a PWA. There are two scenarios in which a customised Progressive Web App provides added value in a commerce solution:

  1. For companies that sell complex configurable products, consider the compilation of a racing bicycle, holiday or an insurance. This involves products that are not always available at Amazon or Bol.com because they are highly configurable or personal.
  2. Companies that collaborate with many different partners to bring supply and demand together, such as, for example, a platform for bathroom design or cinema tickets where affiliated parties compete in the areas of selection, availability, price, (delivery) times, transportation costs, cross-sell, up-sell and naturally, commission.

If a product involves considerable room for configuration, users will naturally want to try any required combination and will certainly not wish to be confronted with any impossibility or additional debit ‘that was not in the system’. A beautiful, logical and flexible user interface that complies with all configuration options of a product is an UX excellence. This requires an online configurator ‘at the back’ functioning as an integral part of the commerce platform. Whatever you change in the back-end is to communicate seamlessly to the front-end. The same applies vice versa: anything that can be ordered in the front-end must be produced and delivered flawlessly. The power of the PWA in this scenario is in the combination of a smooth and logical interface with e-commerce without having to make concessions to the options. The PWA thus gives hyper-personalisation a face.

A platform that brings supply and demand together contains a similar complexity. You won’t want to centrally manage and maintain the hundreds and maybe thousands of lines included in such a platform. Using API links, such a landscape can make direct use of suppliers’ real-time data. The users’ clicks and selections are forwarded to all suppliers, and interesting cross-sell and upsell suggestions are thus no longer determined by the logics of the website, but instead by the highest bidder. The same may apply for the best package price, commission involved with the deal or payment methods supplied; the options are endless in this respect. Because the PWA can make decisions based on external sources, it can dynamically adapt to the last received message without the user feeling he/she has been waiting. The PWA is the control to conveniently combine a large number of data sources into a logical interface.

Added value for users of your e-commerce solution

We have provided you with some insight into what a PWA is and what it is not, listing the advantages and disadvantages of a PWA in relation to a native app and a mobile website. Whether a PWA is suitable for your company depends on your current business and plans for the future. As the role of large marketplaces such as Bol.com and Amazon increases, companies will look for better online experiences and increased customisation for end users where configurable products or a platform strategy is concerned. PWAs excel in these types of environments.

Want to know more about PWAs?

If you would like to receive advice about your e-commerce challenge, Bavo is happy to help!