Magento PWA: the whys and wherefores [updated in 2019]

Along with other Magento e-commerce trends, a progressive web app is a far-reaching concept for web development that stretches this thing out. Many e-commerce owners have already felt the positive effect after implementing PWAs.

3 fast reasons why (really quickly):

conversion rate growth;

reduction in application weight;

increase in the number of users;

seamless work on mobile devices.

The last but not the least indeed. In 2019, about 50% of consumers use their mobile devices for shopping purposes, and Statista reports that mobile e-commerce sales will reach 3.56 billion U.S. dollars by 2021.

In this post, we’ll try to figure out how and why Magento PWAs can influence business.

10 statistical facts from PWAs case studies

Summary: 53% of users abandon a webpage when it takes more than 3 seconds to load. Even worse, this leads to a 16% reduction in customer satisfaction and this costs money. Below are only a few successful examples, the actual number is far much higher.

After the PWA technology implementation, the Best Western River North’s new website gained a 300% increase in revenue in comparison with the old website.

Having implemented a PWA, OpenSooq received over 85% of their traffic from mobile devices (and, for the record, the showing is still growing).

Uber rebuilds its web client as a viable alternative to the native mobile app using the PWA technology, which makes the app load quickly even on 2G networks.

Over three months after Pinterest rebuilt their mobile web using the PWA technology, they saw a miracle result. Visitors used to wait for 23 seconds before any UI was usable before, now it takes only 5.6 seconds. Moreover, they managed to decrease the size of all idly loaded chunks by up to 90%.

The BookMyShow’s PWA solution is 54 times smaller than the Android app and (aah!) 180 times smaller than the iOS app.

The urgency of PWAs for Magento 2 and e-commerce, in general, has been repeatedly discussed.

We, in turn, will offer…

5 key reasons to use Magento PWAs

Summary: Magento released the version 2.3 at the end of 2018, but one of the additions, PWAStudio, was only deployed in January 2019. So was it worth waiting? Absolutely. PWA Studio comprises a set of toolsfor building and deploying PWAs. This suit helps reduce the gap between native apps and web apps and deliver a reliable, fast and engaging experience. And this, in turn, results in the conversion rate growth and strong brand revenue growth.

The term PWA dates back to 2015:

We’ve had a lot of attempts at taking web content and putting it in a different container, and making it run offline… so why is this different? Is there any reason to think this is going to work when those didn’t? … The other systems give you these capabilities but they force you to change your deployment and usage. Alex Russel

Though, still not all Magento store owners appreciate the importance of the implementation.
Meanwhile, it would be folly to believe that users will download each particular web app of every website they like with pleasure.

So, why then you need to give up the option to use a PWA for your Magento website?

#1 Nimble browsing

The PWA technology prevents pages from the necessity to reload. Instant loading, quick response, fast UI usability and the impressive speed, on the whole, are possible due to the presence of ServiceWorkers together with a client-side storage API. As a result, PWA precaches parts of a web app, and this results in fast loading the next time a customer opens your website. Multiple caches management, data traffic minimization, offline user-generated data saving are available due to the ServiceWorkers. PWAs include the best of native apps and the web.

#2 No app downloading

PWAs are usable via a simple browser. This means your customers won’t have to install any apps before using it. In this, your website feels like a natural app downloaded and installed on the device.

#3 Offline mode is no longer a problem

A poor state of a mobile network is no longer a problem, as PWAs reveal the poor conditions and work offline. Thus, a PWA user can easily continue browsing your store even in the air or area where the network is unavailable. Besides, your customers will be able to use all of the modules and functions of your PWA. Even when booking and reserving a service offline, the process will be in a stand-by mode until the PWA is online again.

#4 Easy access

If you think a customer won’t like to open a browser each time to find a needed good in your store, unwind. A PWA can be added to the mobile device home screen like a native app (Add to Home Screen option + push notification feature). This simplifies a customer’s repeat access to your store and increases engagement. Moreover, PWAs do well in full-screen mode too. A user will see an app-same look without a browser URL bar and navigation tools on the bottom of the page.

#5 Rocketing up the conversion

And as the outcome of all the benefits we enumerated above, PWAs are able to lift your conversion up to a new level. Great reliability, speed improvement, users engagement and offline operation make the customer conversion rates not to stand a chance to boost. These are not groundless words: having implemented a PWA, Luxmart, a large online retailer, doubled its conversion rate from 0,6% to 1,24%. Besides, according to Google PageSpeed Insights, Luxmart performance leaped from 67% to 99% after the PWA was deployed.

The architecture of Magento progressive web apps is designed to notably progress your website in all indicators.

Where to start with Magento PWA implementation?

There is no doubt the decision to introduce a PWA is a challenge. However, the gains from PWAs implementation outweigh those costs.

Let’s get to the point.

Step 1: Decide on the method of PWA implementation

Say, you build a new website for your Magento store or redesign the previous version. Then developing a progressive web app from the outset is what you need. In this case, you will be able to adapt and feel the positive effect of all the possibilities a PWA can offer as a whole: AMP, ServiceWorkers, App shell, Web Manifest.

If building a website from the outset is not the case, you can create a simplified version of your website that inherits a few of the PWA technology features. For example, you can choose to adopt an offline booking with your PWA.

Step 2: Address PWA adoption challenges

Although all major browsers deliver ServiceWorkers support, it’s a safe choice to add it to your app. Basing on the latest data, ServiceWorker and PWA technologies are supported in the next browsers versions: Chrome (supports 40), Safari (supports 11.1), Firefox (supports 44), Edge (supports 17).

Not all devices support all the PWA technology functionality. Thus, for example, Android 8.0 Oreo had a few support issues. However, there is a solution, a simple software update can remedy the situation.

The app demands access to sensors, Bluetooth (via Web Bluetooth API), GPS, calendar, camera, and contacts, which can cause a customer denial to use the app.

Also, cross-app logins are not supported.

However, all these challenges can’t surpass the benefits you receive as a result:

no download, installation and app updates;

no separate code base;

add-to-home-screen option;

push notification feature;

fast loading;

offline mode;

cheaper than native apps development;

increased engagement and conversion.

Insights 2019: what key players think about PWAs?

In February 2019, Forrester published a detailed report recollecting the ideas on PWAs and their adoption from over 50 companies. Among the entities featured are Amazon, Google, eBay and other prominent leaders representing various industries.

So what do they think? We present the key ideas below.

#1 Mobile is the king, and you need to obey

Though most of the interviewed companies have native apps, their mobile conversion rates barely reach 30%. A mobile-centric approach is needed.

#2 Going for PWAs is a must for improving mobile conversions

PWAs successfully combine seamless navigation and search experience shoppers have on desktop with handy and utility-focused features of mobile apps. So for mobile, PWAs can do the same responsive web design did for the web.

#3 PWAs result in better engagement and boosted sales

PWAs have a range of advantages as opposed to mobile and web apps. They are:

Frictionless and swift, i.e. they run smoothly in browsers;

Task-focused – they help users meet their needs in the most efficient way;

These specific features of PWAs will help businesses achieve higher engagement and improved conversion.

Wrap-up

A progressive web app is a great solution for your Magento website in case you want to keep it progressive and provide a better workflow. The technology has already demonstrated the positive effects and is in demand among e-commerce websites owners. So go ahead, and let users keep your website at hand at all times.

About The Author

Alina Bragina

Alina is heavily into natural language expression in real life and technical one in blogging. She believes self-enhancement and spot-on goal setting contribute to any project's success. At out off-work time she is open to tattooing, sketching, and doing oils.