Magento PWA: The Whys And Wherefores

E-commerce owners have already felt the positive effect after implementing PWAs:

1. conversion rate growth;
2. reduction in application weight;
3. increase in the number of users.

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

Statistics about PWAs

Share of e-commerce companies planning on investing in progressive web apps (PWA) in North America and Europe.

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 PWA, OpenSooq received over 85% of their traffic from mobile devices (and, for the record, the showing is still growing).
• The Grand Velas Riviera Maya resort raised the black-Friday conversion rate to 53% by leveraging PWA.
• Ele.me decreased load times by 11.6% on pre-cached pages and by 6.35% on all pages.
• The Trivago’s PWA-evolved website reached 150% growth in users engagement and 97% boost in click outs to the hotel offers.
• Uber rebuilds its web client as a viable alternative to the native mobile app using PWA technology, which makes the app load quickly even on 2G networks.
• Over three months after Pinterest rebuilt their mobile web using PWA technology, they saw a dramatically miracle result. Users 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 Android app and (aah!) 180 times smaller than an iOS app.
• The Tinder PWA case study demonstrates the company’s major bundle sizes reduced from 166 KB to 101 KB where DCL enhanced from 5.46 sec to 4.69 sec.
• Forbes' PWA solution loads in 2.5 seconds versus 6.5 seconds for their previous site.

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 PWA for Magento 2

So, why then you need to give up the option to use 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 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 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. 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 don’t stand a chance to boost.

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

Where to start with Magento PWA implementation?

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

Let’s get to the point and start our Magento 2 PWA tutorial.

Step 1: Decide on the method of PWA adaption

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. 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 and some others.

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
• fast loading
• offline mode
• cheaper than native apps development
• increased customers engagement and conversion

Conclusion

A progressive web app is a great solution for your Magento website in case you keep up to date. The technology has already demonstrated the positive effects and is in demand among e-commerce websites owners.