SPA, PWA - Quo vadis, e-commerce?

Mobile apps are not enough

37% of internet users in general and 53% of e-commerce customers buy products using mobile devices. How to create the best mobile customer experience?

Until recently, the most popular approach was to offer a website and a separate (native) app for mobile devices. It allows to provide many features to mobile users, such as unified interface, offline mode, faster reaction time, and push notifications.

Yet the most recent studies show that most people install only a small number of apps that they use often. For e-commerce it's a bad news because their apps are downloaded and used less frequently. Why? To name a few reasons: long loading times; requirement of constant internet access; absence of native functionalities such as access to the camera or NFC reader; a necessity to use platforms such as Google Play or Apple App Store for installation. It is clear that e-commerce can't rely on mobile apps and needs complex, sophisticated web apps.

SPA: Single Page Application

The term "SPA" refers primarily to web apps that are not implemented in a traditional way, i.e. generated and provided from one or more servers (or instances). It means an implementation pattern on client-side in front-end technology (such as JavaScript) which does not require reloading. It's a new way of development but has already become quite popular. Many technologies and communities gathered around this kind of applications.

Technology

The most popular platforms (frameworks) that support quick development of SPA apps are:

Angular - The platform created and developed for several years by Google. It's one of the two (alongside React) most popular solutions used in existing SPA and PWA implementations. It utilises the TypeScript language based on JavaScript.

React - A framework competing with Angular, built and created by Facebook. It offers a less comprehensive approach focused on view. It utilises the JavaScript language, enriched with JSX technology for the creation of website templates.

Vue.js - A popular SPA/PWA framework created by a former Google employee who worked directly on earlier versions of Angular. Simple and easy to learn.

Ember - An open framework that makes it easier to write SPA client-side web apps using the Model-View-Controller (MVC) template. Rich in features and actively developed at the moment.

The above platforms or frameworks allow creation of SPA-class apps in only several weeks or months using favoured agile project development methodologies (Agile, Scrum). SPA pattern was used to create for example the new Spotify website.

There are two alternative approaches to SPA in the context of e-commerce: orthodox SPA vs. indexable "SPA". A website that perfectly matches that first approach would comprise a single point of interaction - a single URL address. For e-commerce with a rich range of products and categories, however, the single URL address solution may be inadequate to provide for effective SEO. This is because subsequent sub-pages will not reveal product names or keywords - everything will be loaded dynamically by the appropriate components. It may in some cases be better, then, to move away from an orthodox SPA and allow the app to function on multiple URL addresses (in other words, routing will look completely different). With this consideration in mind we can move to the next trend: development of apps based predominantly on SPA.

PWA (Progressive Web App)

In essence, PWA is not a specific development pattern or software model, but rather a mindset and good practices checklist. These are listed by Google in their "Progressive Web App Checklist". In summary:

• The app must feature fast loading and optimize the volume of data sent so that mobile device users with a slow internet connection will not become discouraged.
• The app must support (with correct visual experience) every device: desktops, laptops, and all mobile devices including tablets and even the smallest smartphones.
• The app must resemble the native website as closely as possible.
• Excessive reloading should be avoided.
• The app must function in offline mode. It must offer at least basic functions even when offline (e.g. at least a part of the product catalog is available in the case of an e-commerce solution).
• Data must be updated in the background - the user doesn't have to refresh or even actively use the app to receive current data. This requirement is addressed by the innovative browser-side technology developed by Google: Service Workers.
• Safe communication via the HTTPS protocol must be assured. This applies to browser-side solutions that, in the absence of an encrypted connection, expose the user to attacks.

SPA or PWA: which one to choose?

Now to the big question: Which one is better, SPA or PWA? Which one will suit the needs of my business?

The answer is simple: PWA is almost always an SPA (for e-commerce, an “indexable” SPA). This means a PWA uses JavaScript code to replace page elements instead of reloading the entire page. Why only almost always? Because a small percentage of websites simulate PWA-style operation (through responsive design resembling native apps, offline functions, fast loading time, and indexability via web browsers), though they are not based on predominantly client-side technologies. Such implementations are possible and existent, but the approach is not recommended due its lack of compliance with standards. It only imitates such compliance in order to achieve high marks in audits (such as that provided in Google Lighthouse) of PWA checklists.

As in the case of SPA, a PWA-type app can be developed within several months using front-end resources as well as agile project development methodologies. References on a global scale include such websites as AliExpress (74% increase in time spent on the website, 2x increase in the number of visits on all web browsers, and 104% increase in conversion of new users after the implementation of PWA site) or Flipkart (increase in average session time from 1 minute to 3.5 minutes).

Benefits for e-commerce

The use of the latest PWA standards enables online stores to offer users a new quality of customer experience on a mobile device. What does it mean in practice?

• A single, unified app for all types of devices (desktop/mobile)
• Remarkably faster reaction and page loading times
• Greater convenience in use due to user-friendly interfaces
• Significant increase in the engagement of returning customers (thanks to push notifications)
• Offline readiness - either partial or total
• Responsive by design (mobile-first experience)
• Broad range of content presentation possibilities

In addition there are technological benefits, such as:

• Independence from the platform operating the store (back-end)
• Greater ability to adapt the app to suit specific needs
• Module/component-based structure
• Lower server load
• Optimization of the volume of sent data
• Latest front-end technologies and solutions available
• Safety - communication only via HTTPS

PWA? The future of e-commerce

Not every organisation is ready to commit to migration of its e-commerce solutions to PWA. One common objection is a perceived risk in adopting a "new technology", but let's remember that the SPA approach and technologies supporting it are not new: the Angular platform is a mature solution (9 years on the market). PWA supports all the most popular web browsers, except older devices. And, when it comes right down to it, the direction of the future for e-commerce seems pretty clear. It's the PWA version of the store that will be stable, safe, and offering users the best Mobile Customer Experience that seems to be the way for industry leaders.