PWA in practise: 11 case studies
05 Mar 2018 / 6min
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 most popular platforms (frameworks) that support quick development of SPA apps are:
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)
PWA (Progressive Web App) - a web app launched like a regular website (via any modern web browser), but operating like a native mobile (or desktop) app, unified in terms of interface, user experiences and features. In particular, such a website must provide access to a special manifest containing an application icon address, among other features, and must operate in offline mode to some extent.
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?
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.