Progressive Web Apps. Power for ecommerce!

It all started for me, when I discovered an article of Ethan Marcotte on A List Apart about responsive web design. That is 10 years ago I was absolutely fascinated about this exciting new feature and started to play around, to create a responsive layout.

My environment was laughing about me and they repeatedly told me, that I am nuts 🙂 “Who wants so visit a website with his telephone (smartphnoes were still quite rare in those days)??? Forget is Rob, that will never be common.” Yeah right 😉  The mobile web will stay and will become more and more important.

Websites, or web app as they are also named, have become more and more powerful since the introduction of HTML5 & CSS3 and they more and more adopt the features of native apps (with the help of script libraries).

In 2015 (five years after the bith of responsive web design), an novelty took place. Progressive Web Apps

Google introduces Progressive Web Apps

In 2015, the name “Progressive Web Apps” was coined by Chrome developer Alex Russel and designer Frances Berriman in an article that invited for a “deep shift in our understanding and tools” to “build better experiences across devices and contexts within a single codebase”. It’s a rehash of Apple’s idea supercharged with modern opportunities, and is fully backed by Google with an aggressive push for PWA development.

To show a little demonstration about the featrues of a PWA, I have made a video in which I show my blog site (the website you are visiting right now, on my smartphone. I was quite happy when I found a solution to mirror my smartphoneon my laptop 🙂

Watch this video on YouTube.
This video is DSGVO compliant, no data will be forwarded to Youtube (Google), untill you click the play button. By doing this, you agree to the terms of YoTube (Google) . The preview image is stored on the local server and therefore has no connection to external servers. More information about YouTube Videos on this site can be found here.

PWA & Ecommerce

Those enhanced websites are a proven improvement for online shops. Here eight benefits

No installation required
PWAs are primarily websites and are accessed on browsers only. That being said, it avoids the lengthy process of installations. Similar to surfing a website, the users can view the pages quickly, navigate to different sections of the app and complete a seamless checkout process.

One-size-fits-all 
PWAs can be accessed on any browser including Google Chrome, UC Browser, Opera Mini, Mozilla Firefox, etc. Therefore, you can make them work across all browsers or any specific one of your choice that brings in more traffic to your ecommerce site. 

Add to the home screen 
Though your users have to access PWAs in the browser, you can let them add the site to their home screen with just two taps, making it easier for them to come back. You can implement this with an “Add to Home Screen” prompt that brings users back to your site. 

Native app-like experience 
What’s cool about PWA is that it doesn’t look like a usual web page that is opened inside a browser window. Indeed, it works and looks much similar to the native app, thus, making it truly compelling. Also, it employs smartphone features of your users such as contacts, camera, maps, etc.

Offline functionality using service workers 
The gems of a PWA are service worker and cache API. Service worker-run in the background and is responsible for pulling in cache material and pushing notifications. It stores new content in the browser cache and synchronizes local changes to a local server. Hence, even if your app users are offline due to a poor data connection, PWAs would facilitate them with basic navigation in the meantime. 

Quick loading in the blink of an eye 
Caching ability is one of the distinctive features of PWAs over native apps. With this feature, PWA makes speedy responses possible by storing the repetitive elements and then later when required, can inject them into the browser. This makes an ecommerce site more user-friendly and loads up pages quickly.  

Less data consumption 
PWA loads swiftly, even on flaky networks. It leverages new, open web APIs to deliver a mobile web experience that uses less data but loads fast, thus, re-engages users in multiple ways. 

Easy maintainable 
If you plan to build separate apps for Android, Apple, and Windows stores, it would cost you a hefty amount to hire a developer on a long-term basis as every app needs frequent bug fixes, constant monitoring, and up-gradation. On the contrary, PWAs won’t burn a big hole in your pocket, and upgrades can be made just by addressing PWA requirements for different browsers.

App fatigue

More that 10 years have passed since Apple granted the trademark of  “There is an app for that” in 2009. 

… If you wanna check snow conditions on the mountain, there is an app for that. If you wanna check how many calories were in your lunch, there is an app for that. And if you wanna check where exactly you parked the car, there is even an app for that. Yeap, there is an app for just about anything…

What is App Fatigue?

App fatigue is caused by the fact apps have become such a pervasive part of modern life. Between the number of apps available and their constant presence via notifications, they’ve become something we’ve started to grow weary of rather than excited by.

You’ve likely experienced app fatigue yourself. For example, how often do you actually get excited about a new app a friend shows you? Or download one, but intentionally turn off push notifications because you start from the assumption that it’s going to be too much?

What Causes App Fatigue?

There’s an app for everything, and in some cases, there are multiple apps for the same thing.5

Many smartphone users we surveyed are still excited about the number of apps available. Over 45% of those we surveyed said they still love the fact that “there’s an app for everything.”

At first glance, this seems to contradict the idea of app fatigue. How can users be overwhelmed by the number of apps if they like the fact they have all those choices?

Simply put, they’ve realized they don’t have time for all of them and have to be more selective.

For example, research from Forrester found that smartphone users spend almost half (46%) of their mobile screen time on a single app — and that their top 5 apps get a whopping 88% of their time.

So unless your app is essential enough to break into your users’ “inner circle,” you’ll just be another app they have to swipe past to find the one that is, creating app fatigue for them in the process.

A survey in 2019 confirms this as well. Most of those we surveyed said they primarily uninstall apps because they’re not in use or taking up space (which wouldn’t be a problem if they were being used).

With average 2,000 apps being launched on a daily basis, apps have started to complicate life instead of simplifying it. The average person has 60–90 apps installed on their phone, using around 30 of them each month and launching 9 per day. So consumers choose to only download the apps that are useful and make their lives easier.

What’s wrong with native apps?

The fact is that the native app boom is tapering off.

In 2008, Apple added support for native apps to iOS. From then to January 2010, nearly 150,000 apps were released. It was an awesome start…

As far back as 2016, Recode agency published the research that proved these go-go growth days are gone.

Apple’s App Store and Google Play now offer a seemingly limitless number of apps. But the number of people making purchases using native apps is steadily decreasing. Customers no longer want to download massive native apps to make a purchase once a month.

And there are several reasons for this:

Native app downloads take time

The average Android app file size is 11.5MB, and average iOS app file size is about 34.3MB. Some of them are much “heavier” – which takes precious time and storage space for people only wanting to make a few irregular ecommerce purchases.

People use most ecommerce apps very rarely

Not more than two times a month when they want to buy something. At all other times, an unused app just “lies on the shelves collecting dust”.


Native apps are expensive to be developed

The process is getting harder, and a quality app is just not something most ecommerce stores have the need or budget to do.

What’s wrong with mobile websites?

Most successful ecommerce businesses likely already have a mobile-friendly online store that can be opened in any browser.

But the truth is: this is not enough to maximise your revenue opportunity.

Buyers generally find it inconvenient to buy from store websites, which are often slow with a far from user-friendly interface. Stats show that:

  • 78% of customers would rather access a store from an app than from a website.
  • As the number of elements (text, titles, images) on a page goes from 400 to 6,000, the probability of conversion drops 95%.
  • As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%.

 

So both native apps and mobile websites have their flaws that create obstacles for convenient shopping.

How can we avoid app fatigue?

The app fatigue and the Progressive Web App cure

The solution is somewhere in the middle!

As an alternative, in 2015, Google introduced Progressive Web Applications. A new solution for delivering an app-like user experience on mobile devices, but with no need to install a native app.

The world’s leading brands picked up the idea and now the technology is becoming increasingly popular.

So let’s take a look at what this all means to you. And how you can apply it to your ecommerce business.

How PWAs are changing ecommerce

On the one hand, a PWA looks and feels like a native app. But on the other, it keeps all the advantages of websites: it’s available from a browser, discoverable for search engines, and does not require installation and downloading.

For example, ecommerce PWAs can send push notifications, scan barcodes, and deliver localised content using a phone’s location services. All these features add value to user experience, nudging visitors into a purchase.

PWAs can effectively work on any gadget like a regular site. But when a user switches to a more advanced device or browser, PWA functions expand.

So what does this actually mean when it comes to ecommerce? Here are six key factors PWAs bring:

So what does this actually mean when it comes to ecommerce? Here are six key factors PWAs bring:

  1. Advanced app-like experience. PWAs not only look like native applications with excellent UI and UX features, they also provide smooth and fast website performance to users which most regular online store websites are lacking.
  2. Offline functionality. PWAs work when your customers are offline, which most responsive websites can’t offer. This feature allows buyers to look through their orders and change them wherever they are.
  3. Zero install. This is the most important advantage from your customer’s point of view. They no longer need to go to an app store to download your app – it can be added to their home screen right from the browser.
  4. Cheaper to develop. While developing a native app of the average online store costs up to $80,000, a PWA developing price can start from around $15,000. Moreover, a PWA gives you not only an app but a mobile website too.
  5. Push Notifications. Just like a native app, PWAs can send push notifications to users to keep them informed about the discounts or new arrivals your store offers. The feature helps to bring buyers back and inspire them to make more purchases.
  6. Compactness. As it said, native apps are huge, they take up a lot of storage space while customers use them no more than once or twice a month. This makes the customers delete them. Since PWAs are downloaded and run on a browser, the space issue does not arise.

Some Examples

Lancôme USA

Another well-known brand that applied the Progressive Web Application technology successfully is Lancome cosmetics. At Lancome, they found a paradox that although the number of mobile users has risen dramatically in recent years, their mobile web conversions are very low in comparison to desktop conversions.

After that, they built a mobile app but it just satisfied the loyal customers of Lancome who have regular purchase needs and therefore are willing to download the app. Finally, they decided to build a Progressive Web App and here are what they got: 15% decline in bounce rates, 50% increase in mobile sessions, 17% growth in conversion rates, and so on.

Instead of minimally updating their underlying site, Lancôme looked to PWA technologies to provide an immersive, app-like experience.

They took advantage of service workers to deliver reliable performance on unstable networks and push notifications for re-engagement. Their best-in-class PWA achieves a performance score of 94/100 on Lighthouse, an automated tool for improving web page quality.

Trivago

Trivago is a travel site that utilizes Progressive Web App technology to deliver seamless interactions to their customers. Its PWA has an intuitive interface that is easy for the travelers to either compare prices of different hotels, read the reviews, or book a selected hotel. Also, it contributes to minimizing the search marketing effort for the hotel owners.

With the power of PWA, Trivago’s hotel search engine recorded a noticeably higher conversion rate than its native app. Moreover, its hotel bookings click-through rate experienced a dramatic growth of 97%.

Financial Times

The Progressive Web App of Financial Times, the world’s leading global business publication, enables faster loading and toggling of articles since they are initially loaded and stored locally – even in offline mode. This PWA can be reached on the phone within just 1-2 seconds.

BMW

The PWA of BMW helps it to outweigh a lot of competitors with lightning load speed. Apart from it, the PWA provides useful and valuable content and that goes beyond the automotive industry. Therefore, BMW’s customers spend three times more time on the PWA than on its previous mobile site.

Stats

  • After implementing the PWA, Aliexpress increased the conversion rate by up to 104%. Moreover, the time users spent per session has increased by 74%.
  • United eXtra Electronics showed an increase of 400 % in re-engagement and 100 % in sales with push notifications.
  • 5miles reduced the bounce rate by 50% and increased conversions by 30% after implementing the PWA.
  • The progressive app for La Nature, an online store, showed 65% increase in conversions in the first month after the PWA implementation. Moreover, the page loading time was reduced up to 0.1 seconds.
  • Lancôme reported 17% increase in conversion, 15% decrease in bounce rate.

On top of all this, web developers have recognised their preferences for PWA as well. A JAXenter’s survey found that 46% were in favour of PWAs:

For WordPress Sites

WordPress® has, of course, a solution whichenables a website owner to turn a site into a true progressive web app. The Plugin is called SuperPwa. Here’s the developer’s website.

 

Source: superpwa.com

It is really extremely easy to set up the plugin and it has an additional feature, which I presented on the video already. It is an extra plugin to send push notifications. Every time, a post is saved, subscribers will get a push notification, toinform them that there is new content on your blog.

On the Medium.com you can read more. Here you can download the plugin.

Scroll Up