My Cart
Filters
smartphone-1894723_640

Progressive Web Apps: Why Online Businesses Should Use Them?

The term “Progressive Web App (PWA)” relates to web applications that use the latest web technologies to improve user experience.

Progressive Web Apps: Why Online Businesses Should Use Them?

In many aspects, PWAs resemble traditional mobile applications. However, in reality, they are usual web pages and websites displayed by browsers but mimicking mobile UI and UX.

In this article, we will describe the major peculiarities of PWAs to find out why their use is useful for the e-commerce domain and consider several use cases related to these apps. So, let’s start.

PWA Benefits for E-commerce Business


PWAs introduce a brand new way to create better frontend and an enhanced user experience. Using the well-known methods like HTML, CSS, and JavaScript developers are able to create advanced interfaces and, in general, convert any website with API in PWA adding service workers and manifest.json to it.

Convenient Architecture


Though each PWA is programmed in its own way, developers are more inclined to use the existing frameworks when creating those apps. In most cases, PWAs look like traditional mobile applications or websites so that users can comfortably work with them in the familiar environment.

And vice versa, even if a PWA looks like something completely different to the traditional web or mobile solutions, it can be seamlessly integrated with the existing mobile app or website structure.

As in the case with any online service, users can access PWAs by entering URLs, and those apps are indexed in Google, Yahoo, and other search engines. This fact undoubtedly plays in favor of PWAs especially when comparing them with traditional mobile apps that cannot be indexed by search engines.


Fast Download without App Store Submission


Though operating like traditional web applications (in most cases), PWAs are usually downloaded to the mobile devices. But compared to traditional mobile applications, PWAs do not require a long-lasting download before the installation process.

App developers, in this case, do not need to go through the irksome submission process common for such app stores as Microsoft Store, Google Play, and the like,  before downloading the app.

Instead, the app is downloaded directly from the provider’s website, and after the installation is completed, it gets its own icon on the device’s home screen just like any other mobile app.

Since PWAs are usually not published in app stores, developers can add new updates without waiting for approvals, which, in turn, allows them to release these updates more regularly than in the case with traditional mobile apps.

For users, the updating process itself is also smoother compared to their mobile experience, as all the latest updates (if any) are automatically downloaded when they open the app on their devices.

High Performance


PWAs work notably faster than traditional mobile apps and websites due to so-called “service workers”. "Service Workers" are the scripts that work independently backstage, in other words, they cache images, texts, and other content without requesting any layout or style information from the server, only raw data.

Last year, Google conducted the study of service workers’ performance on the example of the Google IOWA site taking into consideration the average page load times of mobile and desktop service worker controlled pages of the site compared to the ones just supported (but not controlled) by them.

According to the study results, the average page load time for desktop service worker controlled pages was 2,3 seconds, while for mobile service worker controlled pages, it was nearly 3,8 seconds.

For the pages supported by service workers, the results were not so positive with the 3,7 seconds average page load time rate for desktops and 4,4 seconds for mobile versions accordingly.

One should note that here, we talk only about the figures for the pages with returning visitors. The results for the pages with new visitors supported by service workers were even higher, 4,2 seconds for desktops and 6,1 seconds for mobile devices.

Push Notifications


PWAs also allow sending push notifications like the ones that users regularly receive on their smartphones.

For e-commerce businesses, this means a great opportunity to promote their brands among mobile users, as push notifications are read more often than email newsletters or SMS.

Since the icon of a PWA is added to the home screen, users are reminded of the brand and its products every time they use their smartphones. Thus, online businesses can increase brand awareness by promoting their products, special offers, recent app’s updates, the latest blog posts, and the like through push notifications.

But let’s not forget that users can decide whether to allow a PWA to send push or not (if such option is provided).

The same Google study shows that among all people who downloaded Google IOWA on their devices, 58,9% allowed it to send notifications, while only 4,7% of users denied them, and 36,3% just did not receive any notifications, as they had not been initially set in the PWA’s settings.

Offline Mode Support


Users can take advantage of all the functions of a PWA even without the internet connection. In case of a connection loss (or its absence right from the start), when opening the page for the first time, users will be redirected to a custom offline page. Such page can contain a brand logo, some basic related information and almost not differ from the pages loaded in the online mode.

Another important benefit is that users can continue browsing through the site pages that were opened earlier even if a connection is lost. In this case, they do not have to wait until the connection is established again to continue their surfing. Instead, they will be redirected to the cached versions of pages that were saved automatically during their last visit to that site.

The offline mode feature is obviously one more convincing reason for ecommerce businesses to start using PWAs. Still, for those businesses that entirely rely on such services as Google AdSense in their internet promotional campaigns, the implementation of this feature will be pointless from the financial point of view. By clicking on ads in the offline mode, users simply will not be able to access landing pages with the related advertising information.

PWA Case Studies


Lancôme


Last year, Lancôme, the world-famous chain of cosmetics stores, partnered with the Modify mobile custom development company to create a PWA that should drive more traffic to the mobile version of the Lancôme site. This decision was influenced by relatively low conversion rates on mobile devices (15%) compared to the rates on desktops (38%).

The PWA developed by Modify represented an original version of the Lancôme website that worked like a traditional mobile application on all devices and did not require the download from any app store.

The release of the PWA led to the increased download speed and enhanced the user experience of the Lancôme site. As a result, the conversion rates on mobile devices increased by 17%, while the rejection rate dropped by 15%, and the total number of mobile sessions on the Lancôme site increased by 50%.

Before the PWA was launched, iPhone users contributed 65% of the total number of the site visitors, which made this user segment especially important for Lancôme. With the release of the new version of the Lancôme site, the average session length on the iOS platform increased by 53%, while the rejection rate dropped by 10%.

Considering the fact that several important PWA’s features, including push notifications, the icon of the app added to the home screen, and offline caching, at the time were not available on iOS, only on Android, these figures look impressive.

One should also note that the use of push notifications, particularly as reminders about abandoned carts, brought Lancôme a huge success on mobile devices. The total open rate of such notifications on mobile devices was 18% with the conversion rates on abandoned carts increased by 8%.

In general, the release of the PWA helped Lancôme gain an important position in the mobile market.

AliExpress


AliExpress, one of the largest online retail stores in the world, looked for the ways to provide web users with all the benefits of its mobile app that was not as popular as the desktop version of the AliExpress site. Those benefits included work in the offline mode, push notifications, better performance, etc.

The PWA built by AliExpress worked as a cross-browser application and combined the best features of previous the mobile and desktop versions of the AliExpress site.

As a result of the PWA implementation, AliExpress managed to improve the user experience on its site as well as drive more user engagement and retention.

In terms of figures, the conversion rates for new users increased by 104%. The browser with the most significant conversion rate increase for the AliExpress site was Apple Safari, on which the conversion rates increased by 82%.

With the release of the PWA, the average number of pages visited by users per each session doubled. In addition, the average session length across all browsers increased by 74%.

These figures prove that with the launch of the PWA, AliExpress managed to further improve its situation on the web field.

MakeMyTrip


MakeMyTrip, the leading travel company in India, decided to deal with the unstable internet connection issues of its potential customers that affected the overall user experience and conversion rates of the MakeMyTrip site.

For this purpose, the company focused on the development of its own PWA mainly for the mobile market with the dominant number of users viewing its site. MakeMyTrip estimated that the users with a slow internet connection would take advantage of the provided offline mode with cached versions of the site.

After some time, MakeMyTrip introduced its PWA to the public which represented a combination of the mobile and web experience familiar to the site users.

With this launch, the conversion rates of the MakeMyTrip site on mobile devices tripled, and the average load speed of its pages decreased by 38%. Moreover, the number of shopper sessions increased by 160%, while the rejection rate dropped by 20%.

It’s noteworthy that first-time shoppers that used the PWA were three times more likely to bring conversions compared to the first-time visitors of the native MakeMyTrip app.

Overall, the release of the PWA gave MakeMyTrip the opportunity to further increase its influence over the mobile market as well as to prevent mass user rejection of its site due to the slow internet connection issues.

Conclusion


Since Progressive Web Applications are based on the API data exchange, most of the Aheadworks extensions are principally ready to be added to PWAs, as far as most of them include API interfaces or will include them just soon, according to our dev roadmap. This way, you can easily use our extensions in order to create custom PWA projects on Magento.

This challenge might become even simpler just soon as Magento is currently working on the so-called Magento PWA studio that embraces a bunch of related tools that helps to build online stores as Progressive Web Applications.