Progressive Web Apps: the Golden Goose for e-commerce

“Increase your conversion rate with 150%! Start now and double your turnover! Your webshop can generate up to 3 times more traffic!” Marketeers and e-commerce managers are daily bombarded with these kind of one-liners. Each new service and start-up promises you to have thé Golden Goose for your business, turning your webshop into a cash-machine in no-time.

But how many of these promises are actually fulfilled? Most come with a long list of small prints and conditions, showing results of potential ultimate case scenarios, but are far from reality.

At the end of 2015 another of these potential Golden Gooses was introduced to the world of e-commerce: the Progressive Web App. Although at first many were sceptic about this new technology, it seems that 3 years later this technology shows it is not a buzzword or a hype, but it seems to be an actual Golden Goose for e-commerce

What is a Progressive Web App?

At its core, a Progressive Web App (PWA) is simply a web application that uses the latest web capabilities to deliver a native app-like experience to users. They are reliable, incredibly fast and highly engaging.

It is the technology that will bring consistency between web and native apps, who will replace both at the same time with a single instance and will bring everything to the cloud. It gives businesses the opportunity to target a mass market, and open a whole new world of marketing possibilities.

As defined by Google, PWAs are:

  • Progressive — They works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
  • Responsive — They work on any device, on any size: desktop, mobile, tablet, or whatever is next.
  • Connectivity independent — Thanks to the use of Service Workers, PWAs are not depending on the network. Whenever the connection is low-quality, hasty or even not available, the PWA will work without any loss of quality of the user experience.
  • App-like — The user will enjoy a true a native-app-experience, in terms of speed and User Interaction. Thanks to the the app shell model, the application functionality is separated from the content.
  • Fresh — The PWA is always up-to-date thanks to the service worker update process.
  • Safe — Served via HTTPS to prevent snooping and to ensure content hasn’t been tampered with.
  • Discoverable — In contrast to real native apps, a PWA is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it, and index it.
  • Re-engageable — PWA gives marketeers the possibility to re-engage with visitors easy through features like push notifications, which before were only available for native apps.
  • Installable — A PWA allows users to add apps they find most useful to their home screen without the hassle of going through an app store. Also all updates are done from the server, and don’t need the app store for that. As an extra: the developers also don’t have to get their app approved by the app store.
  • Linkable — A PWA has an actual URL structure, making it easily to share the application via URL, but also makes the pages of the PWA available to be used for marketing like SEA.

Simply speaking a Progressive Web App is a combination of a Responsive Website and a Native App. Combining best of both worlds.

Historically, apps provided a richer experience than the mobile web, but that has changed now. Businesses can now provide the same high-converting, app-like experience of a native app to its much larger audience on the mobile web.

Benefits for webshop developers

When developing the ‘traditional package’ of a responsive website and a native app, the developer has to build and maintain 3 systems: a responsive site, an iOS app and an Android app. Also the marketeer, the designer, the content manager, the product manager etc have to work and develop for 3 systems. When using a PWA this is only one system, and it works for all platforms.

Besides this, the developer also needs to master just one ‘language pack’ (HTML/CSS/JavaScript). Where traditionally for the same coverage of platforms, these are 3 separate languages: Swift (objective-C) for iOS, Java for Android and HTML/CSS/JS for the web. That being said, you probably don’t want to close your app down if you already have one. Fortunately, there are solutions that will allow you to extend your PWA with fully native components so you don’t need to manage separate web, iOS & Android codebases.

In terms of performance, a Progressive Web App is, by definition, super fast. Where responsive websites need a lot of money and time to optimize the speed, a PWA delivers a ‘native app like experience’. Research shows that 53% of visitors leave a website when the page load is 3 seconds or higher and conversion rates decrease with 21,8% on each 1 second delay in page speed. On the other hand the average loading time of web pages on mobile devices on 3G networks is 19 seconds and 14 seconds on 4G networks.

Last but not least: a Progressive Web App is in terms of size (MB’s) a whole lot smaller than a traditional website, therefore less server capacity is needed. Not only the size determines this server capacity, also the non-blocking asynchronous architecture of a application running on NodeJS — oppose to a traditional PhP site — reduces the server capacity needed drastically.

Despite this reduced server capacity there is no risk for the stability of the Progressive Web App: with a PWA build in the right way, and in a headless way, the front-end becomes immune to high traffic peaks. The earlier mentioned app shell model is, among other reasons, responsible for this feature.

Case studies

Although these benefits sounds great, what are, besides just saving time and money, real results which could be established when making use of a PWA?

In many cases these results are astonishing. Conversion rates which are being doubled, on websites which didn’t had bad rates to begin with. Numbers of visitors and especially engagement with these visitors rise to big heights and on average users spend much more time on the Progressive Web App, despite it is much faster than the normal site.

If you wonder how these features will turn into gold on your webshop? Let’s have a look at some numbers:

Twitter Lite saw a 65% increase in pages per session, 75% in Tweets, and a 20%decrease in bounce rate. Twitter Lite loads in under 3 seconds for repeat visits even on slow networks.

Petlove Petlove’s PWA resulted in a 2.8× increase in conversion and a 2.8× increase in time spent on site. Using simplified signup and auto sign back in for returning customers, up to 2 times more users are going to their checkout already signed in.

Trivago saw an increase of no less than 150% for people who add its PWA to the home screen. Increased engagement led to a 97% increase in clickouts to hotel offers, nearly doubling the revenue. Users who went offline while browsing can continue to access the site and 67% continue to browse the site when they come back online.

BookMyShow’s PWA just needs 3 seconds to load completely. Including all content , deeplinks ánd is offline ready. It witnessed over 80% increase in conversion and a dramatic increase in revenue after launching its PWA. Beside this, the PWA is 54x smaller than the Android App, and 180x smaller than the iOS app.

Flipkart’s PWA is driving 50% of its new customer acquisition, in areas where previously it was nearly impossible to connect with consumers due to bad internet coverage. The conversion rate increased with 300% and nearly 60% of the visitors to the PWA had previously uninstalled the native app primarily to save space.

These results clearly show that Progressive Web Apps, besides the technical benefits, have a lot of commercial potential and will change the world of e-commerce rapidly.

Gartner Research also researched this topic and the future effect of Progressive Web Apps on the world. It predicts that by 2020, Progressive Web Apps will have replaced 50% of general-purpose consumer facing apps.

Forrester estimates that “$1 Trillion by 2021 will be spent reinventing mobile experiences” with the use of Progressive Web App technology.

When to switch to a Progressive Web App?

Google tells us about the possibilities, Forrester and Gartner predict the future and shops which are already using this technology show us the amazing results: but where do you start when you want to switch your shop to a Progressive Web App? And when is the right moment to do this?

Mobile is the only channel that is consistently growing year-to-year in the retail industry. Traffic is moving from desktop to mobile, but unfortunately most shops are not capable to convert this traffic into actual transactions, causing them to potentially miss out on a significant amount of revenue.

Typically when a webshop is switching Progressive Web App,they witness a 20% revenue boost with a PWA. So every minute a shop does not have a PWA is a minute spent with 20% less revenue on the busiest and fastest growing customer touchpoint.

Building a Progressive Web App

When building a Progressive Web App fully from scratch, without any experience, not only a big budget is needed but also a lot of trial and error. Besides switching to a new architecture (from monolithic to a headless architecture) new technologies need to be used, and among the shopping functionalities you have to take into account many other things such as server side rendering and (tracking on a) single page application to assure the user experience is fully optimised and the shop is ready to be crawled by Google Bots. For most shops starting for scratch this is an undesirable scenario.

Luckily, to make PWA available for webshop owners, there are a few companies who dived into the world of Progressive Web Apps and develop or are developing a so called launchpad platform / framework with which merchants and their developers can easily and fast create a PWA for their webshop, whether or not in combination with their current system. Thanks to this the costs and the lead time of the project can be drastically decreased making it similar to a ‘normal’ upgrade, but with all the benefits of the PWA.

One of these software products is for example DEITY (twitter). This company has build a so called platform-agnostic launchpad, with which for example Magento, Wordpress and many other system can be combined easily and seamlessly with a Progressive Web App. DEITY is built with ReactJS, NodeJS and GraphQL and offers their software in an Open Source way, partnering with many international agencies and companies.

At the moment of writing, there are already several shops (for example: The Rake, Webshop) live running on DEITY among which also a small demo. DEITY expects to be launching more shops soon.

Magento itself, or actually Adobe now, is also building their own PWA Studio (twitter) with which developers can build a PWA in combination with Magento 2, based on ReactJS and GraphQL. At the moment only a very early alpha version has been launched, which is not production ready yet.

Future perspective

Any company that sells online would benefit from a PWA. When mobile page load time goes from 1 second to 5 seconds, the probability of bounce increases with 90%. When customers get held up by a slow checkout, the sale is at risk. The enhanced user experience and fast page speeds of a Progressive Web App allow the customer to complete their desired task quickly and efficiently. PWAs deliver two to four times faster page speeds, ensuring hard-earned users to stay engaged and convert.

If each webshop will double their conversion rate when implementing a Progressive Web App, is off course hard to predict. However all research and results of early adaptors show that the Progressive Web App is the future of the web, and especially the future of e-commerce.

One thing is for sure: with this new technology businesses can now provide the same high-converting, app-like experience of a native app to its much larger audience on the mobile web. Progressive Web App is not just a buzzword, it is the future of our web, making the sky the limit.