PWA in eCommerce 2022: Value behind Progressive Web Apps Explained

For the last few years, there has been a lot of buzz around progressive web applications (PWA), making the technology one of the most asked-about by merchants and C-level managers in eCommerce.

As companies and brands around all industries are desperately trying to adapt to the tremendously increasing number of mobile users, progressive web apps started gaining impressive popularity.

Though the technology hasn’t yet reached the promised through-the-roof traction, it’s predicted to be the future for eCommerce and basically any brick-and-mortar business.

Let’s take a closer look at what PWAs actually are, why they get massively used, and how businesses worldwide take advantage of the technology.

What exactly is a PWA?

In simple words, a PWA is a webpage with all the perks of a native mobile app. With a progressive web application, you get an enhanced version of your page.

Your page works faster, more reliably, and supports all the features of native apps — such as offline work, or (if granted) access to your camera, mic, and location.

Thanks to PWA, you no longer need to spend money on building applications for each operating system (OS). PWAs perfectly operate as both — a website and mobile app, providing a native-like user experience on any device.

What’s in PWA for business?

eCommerce is becoming mobile-first at the speed of sound. This industry is literally voracious for PWA implementation.

No matter what you sell, mobile devices including tablets are now the driving force behind business growth for thousands of brands worldwide. Here are some whooping numbers:

• mCommerce sales in the US are expected to 4X — going from an impressive $128.4B in 2019 to a mind-blowing $553.3B by 2024 (Business Insider).
• Over 1 billion users worldwide access banking services through mobile devices.
• 67.2% of all eCommerce purchases are made via mobile.

Did you know that the highest conversions are reported for webpages with 0–2 seconds loading time? There’s even more. Google reports a drastic 90% increase in bounce rate if your page loads more than 3 seconds.

That said, businesses are frantically adapting to the new-mobile reality, looking for cost-effective yet fast solutions. This is where PWAs enter the room.

Now, let’s further inspect the advantages and pitfalls behind PWA.

The main advantages of using PWA:

• Fast loading and run time — a progressive web app runs faster than a website, and sometimes faster than a native application.

On average, a site using PWA can increase its speed by 63%. Pages load 2–4 times faster with PWA, with an average loading speed of 2.75s.

George.com demonstrated a remarkable increase in speed by 3.8 times (280%) due to the usage of the best PWA practices. Housing.com reduced loading time from 6s to 1.5s (300% increase in speed). Tinder has reduced its page loading time from 11.9 to 4.69 seconds.

• Lightweight — PWAs are literally several times lighter than native applications, taking way less space on user devices. For example, PWA Tinder is 90% “lighter” than their native app;
• Offline mode — the app downloads immediately without the need for an active internet connection, giving your users the possibility to interact with your page even when the network is poor;
• Push notifications. With PWA you can take full advantage of this feature as you can send your customers messages to nudge them toward a purchase;
• Enhanced security — it works only through HTTPS protocols;
• Rapid implementation — you can optimize your website to meet the minimum PWA requirements within an hour.
• Easy distribution — you can download it directly from the website;
• Significantly cheap compared to developing and managing mobile apps. In the case of PWAs, all you need to do is to maintain your website.

Let’s not wear rose-colored glasses and look closer at the weak spots of using PWAs.

The main limitations of PWA:

• Not all browsers support PWA. Worth noting that Mozilla, the open web leader, has abandoned PWA support for desktop Firefox.
• Problems with push notifications on iOS. The standard browser — Safari — currently does not support push notifications. However, in future versions, Apple developers promise to fix this inconvenience. So if most of your customers browse your page from iPhones, iPads, or MacBooks via Safari, you should consult with tech experts first to see what solution fits you best;
• Limited functionality. Currently, PWAs cannot interact with calls, address books, or calendars. Interaction with Bluetooth is also limited, though it’s worth noting that work in this direction is underway.

The pillars of PWA

As a technology, PWA stands on several main pillars. Here they are:

• Service Worker — the main PWA pattern. It’s a sort of layer between the client and the server. Service Worker defines the working logic for incoming requests — from the front end and other functionality. However, the website caching logic is sufficient for most applications. You can use SW generators to write a Service Worker;
• Web App Manifest — data about the application in JSON format (application name, description, icons, etc.). It’s necessary for displaying your app similarly to the native application;
• Application Shell — an architectural pattern for creating a PWA. Simply said, the App Shell is a site structure critical minimum. It’s a skeleton of the site needed for the offline work of your page. This means that, at first, the shell of your app and critical-for-fast-loading resources are cached. Then, the necessary remaining data is loaded over a network;
• HTTPS — an encryption protocol to ensure the security of your application. One of the mandatory conditions of PWA;
• Push notifications. Using push notifications, you can send customers information about new promotions, order status, promo codes, or basically any sort of nudging-towards-a-purchase signal.

How PWA works

In order to understand how PWA works, first, you need to figure out how single-page applications (SPA) work. Instead of sending the request to get the entire HTML page, the pages are generated dynamically via JavaScript.

This ensures instant loading of content and provides a native-like perception of an “app”. This feature is important for progressive web apps because most of them are SPAs.

How exactly does a PWA provide instant downloading, native-app-like user experience, offline work, push notifications, and so on?

All of these features are ensured through the use of the already mentioned Service Worker, which adds an additional layer between the server and the client. A new layer simulates functionality similar to native applications.

PWA for enhanced SEO

Although there is a lot of controversy around whether PWAs are truly boosting SEO efforts, it’s battle-tested that PWAs architecture is SEO- and crawler-friendly. Let’s take a deeper look at it.

• Optimization of the indexing process. One of the main goals of creating PWA was to speed up page indexing. Indirectly, this means improving PWA usage for mobile visitors. At the same time, webmasters no longer need to use deep links, which positively affects search engine optimization.
• Increased productivity. PWA demonstrates consistently high productivity in comparison with general websites. In particular, this is facilitated by the use of Service Workers, which request only raw data. The high productivity of the solution directly impacts the increase in conversion, which means that the site begins to rank higher in search results.

For even greater conversion, PWA allows you to use push notifications that notify users about current promotions, discounts, and special offers while the application runs in the background.

• Improved usability. And finally, another benefit from the SEO perspective is a reduction in the total number of steps required to complete the target action, specifically, downloading and installing the application on a user device. So, there is no need for users to download apps from Google Play or the App Store and tediously wait for the installation to complete.

Examples of world-known brands using PWA technology

Here are some big names with literally millions of daily impatient customers, who have reached staggering results with progressive web apps.

• Uber — their application weighs only 50 kB, which allows loading in 3 seconds even with a 2G network.
• BMW — yet another app that weighs tiny 50 kB, ensuring less-then-3-seconds loading even when users are on 2G.
• Starbucks — their PWA app is 99.84% astonishingly lighter than an existing iOS app.
• Pinterest — these guys report a 40% increase in time spent on the app compared to the mobile web version. More importantly, the revenue from advertising created by users increased by 44%.
• Tinder — A dating app with 60M MAU (monthly active users) by delivering a progressive web app for mobile and desktop could significantly cut load times from 11.9 to 4.69 seconds.

Once again, what’s for your business in PWAs?

It may take months to develop a native application, while it takes a maximum of one day to implement the basic PWA functionality. Now, calculate it into the resources saved on app development, testing, updating, and fixing. Sounds good, doesn’t it?

The value brought by PWA expands way beyond simple budget savings on development costs, making the technology a real game-changer. PWAs help brands engage customers on 2G/3G, who couldn’t browse products or check out because of poor loading speed or bandwidth limitations. Push notifications additionally empower winning customers back — with back-in-stock, personal-discount, or on-sale notifications.

Created to speed up the overall performance, progressive web applications bring valuable improvements for businesses across B2C and B2B — be that online marketplaces, restaurants, delivery, automotive & car repair, beauty services, online courses, broadcasting, or pretty much any niche.

If you still have questions about whether your business can benefit from PWA, let’s have a quick chat where we will provide you with comprehensive advice.