Progressive Web App: the Golden Goose for eCommerce

Progressive Web App: the Golden Goose for eCommerce

Progressive Web App: the Golden Goose for eCommerce

Progressive Web App: the Golden Goose for eCommerce

Author

Jamie Maria Schouren

Co-founder & CCO

Category
Educational

Date

Aug 08, 2018

Introduction

“Increase your conversion rate by 150%! Start now and double your turnover! Your webshop can generate up to 3 times more traffic!” Marketers and eCommerce managers are daily bombarded with these kinds 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. 

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 eCommerce: the Progressive Web App. Although at first many were skeptical about this new technology, it seems that 3 years later this technology shows it is not a buzzword or a hype. It seems to be an actual Golden Goose for eCommerce.

Introduction

“Increase your conversion rate by 150%! Start now and double your turnover! Your webshop can generate up to 3 times more traffic!” Marketers and eCommerce managers are daily bombarded with these kinds 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. 

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 eCommerce: the Progressive Web App. Although at first many were skeptical about this new technology, it seems that 3 years later this technology shows it is not a buzzword or a hype. It seems to be an actual Golden Goose for eCommerce.

Introduction

“Increase your conversion rate by 150%! Start now and double your turnover! Your webshop can generate up to 3 times more traffic!” Marketers and eCommerce managers are daily bombarded with these kinds 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. 

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 eCommerce: the Progressive Web App. Although at first many were skeptical about this new technology, it seems that 3 years later this technology shows it is not a buzzword or a hype. It seems to be an actual Golden Goose for eCommerce.

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, which 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 dependent 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 native app experience in terms of speed and User Interaction. Thanks to 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 and index it.

Re-engageable — PWA gives marketers the possibility to re-engage with visitors easily through features like push notifications. Before, these were only available for native apps.

Installable — A PWA allows users to add, in their eyes, useful websites 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: developers neither have to get their app approved by the app store.

Linkable — A PWA has an actual URL structure, making it easy to share the application via URL. It 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 the 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.

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, which 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 dependent 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 native app experience in terms of speed and User Interaction. Thanks to 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 and index it.

Re-engageable — PWA gives marketers the possibility to re-engage with visitors easily through features like push notifications. Before, these were only available for native apps.

Installable — A PWA allows users to add, in their eyes, useful websites 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: developers neither have to get their app approved by the app store.

Linkable — A PWA has an actual URL structure, making it easy to share the application via URL. It 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 the 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 marketer, the designer, the content manager, the product manager, etc., have to work for and develop 3 systems. When using a PWA, this is only one system working for all platforms.

Besides, 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 shut down your app 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. Nevertheless, 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 lot smaller than a traditional website. Therefore, less server capacity is needed. Not only the size determines this server capacity, but also the non-blocking asynchronous architecture of an 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 built 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.

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 marketer, the designer, the content manager, the product manager, etc., have to work for and develop 3 systems. When using a PWA, this is only one system working for all platforms.

Besides, 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 shut down your app 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. Nevertheless, 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 lot smaller than a traditional website. Therefore, less server capacity is needed. Not only the size determines this server capacity, but also the non-blocking asynchronous architecture of an 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 built 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 sound great, what are, besides just saving time and money, real results that could be established when making use of a PWA?

In many cases, the results are astonishing. Conversion rates are being doubled on websites that didn’t have bad rates, to begin with. The numbers of visitors and especially engagement with these visitors rise to big heights. Plus, on average, users spend much more time on the Progressive Web App, because 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’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 the PWA to their home screen. Increased engagement led to a 97% increase in click outs 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, deep links, ánd is offline ready. It witnessed an over 80% increase in conversion and a dramatic increase in revenue after launching its PWA. Besides 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 by 300% and nearly 60% of the visitors of 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 potentials and will change the world of eCommerce 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.

Case studies

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

In many cases, the results are astonishing. Conversion rates are being doubled on websites that didn’t have bad rates, to begin with. The numbers of visitors and especially engagement with these visitors rise to big heights. Plus, on average, users spend much more time on the Progressive Web App, because 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’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 the PWA to their home screen. Increased engagement led to a 97% increase in click outs 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, deep links, ánd is offline ready. It witnessed an over 80% increase in conversion and a dramatic increase in revenue after launching its PWA. Besides 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 by 300% and nearly 60% of the visitors of 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 potentials and will change the world of eCommerce 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 that 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. 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.

When to switch to a Progressive Web App?

Google tells us about the possibilities, Forrester and Gartner predict the future, and shops that 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. 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. 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 optimized and the shop is ready to be crawled by Google Bots. For most shops starting from 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 developed or are developing a so-called launchpad platform/framework. With this platform, 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 built a so-called platform-agnostic launchpad with which for example Magento, WordPress, and many other systems can be combined easily and seamlessly with a Progressive Web App. Deity is built with ReactJS, NodeJS, and GraphQL.

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.

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. 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 optimized and the shop is ready to be crawled by Google Bots. For most shops starting from 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 developed or are developing a so-called launchpad platform/framework. With this platform, 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 built a so-called platform-agnostic launchpad with which for example Magento, WordPress, and many other systems can be combined easily and seamlessly with a Progressive Web App. Deity is built with ReactJS, NodeJS, and GraphQL.

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 by 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.

Whether each webshop will double their conversion rate when implementing a Progressive Web App is, of 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 eCommerce.

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.

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 by 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.

Whether each webshop will double their conversion rate when implementing a Progressive Web App is, of 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 eCommerce.

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.

“Deity opens up the world of composable commerce for commercetools merchants by providing a powerful set of building blocks. Deity is a solution to watch, they are one of the next big things in commerce.”

Ivo Bronsveld – Head of Integrations at commercetools
Find out how you can supercharge your business.

“Deity opens up the world of composable commerce for commercetools merchants by providing a powerful set of building blocks. Deity is a solution to watch, they are one of the next big things in commerce.”

Ivo Bronsveld – Head of Integrations at commercetools
Find out how you can supercharge your business.

“Deity opens up the world of composable commerce for commercetools merchants by providing a powerful set of building blocks. Deity is a solution to watch, they are one of the next big things in commerce.”

Ivo Bronsveld – Head of Integrations at commercetools
Find out how you can supercharge your business.

Get in touch

We can’t wait to hear about your ambitions.

Let’s find out how we can bring your business to the future, together.

Jamie Maria Schouren Chief Commercial Officer

Get in touch

We can’t wait to hear about your ambitions.

Let’s find out how we can bring your business to the future, together.

Jamie Maria Schouren Chief Commercial Officer

Get in touch

We can’t wait to hear about your ambitions.

Let’s find out how we can bring your business to the future, together.

Jamie Maria Schouren Chief Commercial Officer