pwa-in-magento

PWA in Magento

16.12.2019 / / Developers

Already in 2014, it turned out that more people use the Internet on mobile devices than computers. Since then, this trend has been growing systematically. Providing a perfect mobile experience for customers has become a necessity instead of being an option.

PWA helps to meet these requirements. It combines the best features of mobile applications (including push notifications, geolocation) and browsers (easy access and no need to download).

From the article you’ll find out:

  • What is PWA;
  • What are the demands of PWA;
  • How it affects SEO and performance;
  • Is it worth implementing PWA on Magento and how to do it;
  • How others did it and what they gained.

What’s a PWA?

PWA (Progressive Web Apps) is a set of rules for designing a web application, promoted by Google, which makes it user-friendly for mobile devices and resembles using a native Android or iOS application.

How does it work?

PWA is not so much a specific technology as an approach that aims to maximize the user experience when using a web application.

PWA consists of:

  • work that had to be implemented in the browser capabilities of the Internet giants;
  • the use of an appropriate web application architecture;
  • (and even) the development of mobile devices that would not be able to handle the requirements of this application without adequate computing power (and we’re not talking about flagships devices, but about the phone models used by the majority of consumers).

PWA’s demands

In order to correctly state that the application is PWA it must be:

  • progressive,
  • responsive,
  • independent of the network,
  • similar to a native application,
  • always up to date via Service Worker,
  • Secure with HTTPS,
  • with an application manifesto,
  • involving, thanks to the push notifications,
  • can be stored on the home screen,
  • operating without the need for installation.

Below I will discuss the three most important ones, and the whole checklist can be found here – PWA Checklist.

The application is reliable – regardless of the quality of the Internet connection (or even its absence), the application should work without delays. In order to achieve the best possible effect, caching techniques are used to cache resources, download subsequent elements in the background. Of course, the application does not have to work with full functionality in offline mode. An extremely minimal example of meeting this requirement will be to display information about low quality/lack of Internet connection to the user instead of allowing him to play a jumping dinosaur:

Dinosaur Game

At the moment, Service Workers are very important, which you can read more about here: https://developers.google.com/web/fundamentals/primers/service-workers/

The application is fast – users of mobile devices may experience worse results when using Internet applications, due to a weaker connection in a given place. However, such cases are becoming less frequent and the speed of data transmission from mobile devices is usually high. In good conditions, the application must generate content as quickly as possible so that the user does not feel delays. The emphasis on the speed of the application is based on research on how it affects user interactions and conversions. Everyone can check their application from this point of view, and also use a calculator of potential benefits, thanks to the Test My Site from Google:

test my site calculator

An application must be engaging – using a web application through a browser, the user must give away part of the screen space. Your task is to make sure that the browser thinks it’s worth it.

PWA App

With the Web App Manifesto, you can define the necessary elements that allow the user to add an application icon to the home screen and display it without browser elements. This will make it look even more like native applications.

Another way to increase user engagement is to send push notifications to users. Thanks to the use of two APIs that already support browsers: push and notification, we can get push notifications, just like in native mobile applications.

Browsers that support push and notification are:

It is worth noting that Safari unfortunately does not yet offer support for these APIs — the users of this browser unfortunately will not engage through a push from the web application.

These three elements are a general idea of what PWA is all about. If you decide to implement the Progressive Web App, I recommend you not to limit yourself to them, but to read the detailed list, available at the beginning of this paragraph.

What are the advantages of PWA?

PWA advantages

The implementation of PWA has many advantages for both the company and the end user. In X-Coding we believe that the user is the most important, so we will start with him/her.

Advantages for the end user

Push Notifications – they are commonly seen as a huge advantage rather than for a company that gains access to the user’s home screen and can direct its marketing activities there. It is no wonder that marketing professionals are fighting for permission to send these notifications. Meanwhile, users also gain profits — especially in e-Commerce, where push notifications allow the customer to receive information about the status of their order (e.g. that it has been packed or forwarded for shipping). This helps to build good relations with the brand, increases the sense of security when buying and relieves the customer service departments.

No need to enter the address into the browser – there is no need to add much here — the less time and effort the user has to put in to reach you, the better.

No need to install applications – App Store and Google Play applications are not lacking. You may even be tempted to say that there is an excess of them. And yours doesn’t have to be on the first page at all… Research has shown that the conversion decreases by 20% with each step that a potential user must take before using the application (Source: https://vaadin.com/pwa/learn/advantages-over-native-and-hybrid-apps). PWA keeps them to a minimum.

Offline browsing – useful option during the mentioned loss of range. PWA caches a dataset that allows the user to use the basic functions of the application until they reconnect to the Internet.

Advantages for e-Commerce

One version for iOS and Android devices – instead of making changes separately in the online store and applications for iPhone and Android, you do it in only one code. This saves you time and money, and you can simply make changes faster.

Ease of updating – you no longer have to worry about whether all users are using the new features you have introduced. The PWA application only needs an Internet connection to update to the latest version.

PWA vs. native apps vs. RWD

pwa  vs. rwd vs. app comparison

Implementation of the PWA for Magento

How quickly can PWA be implemented into Magento 2?

PWA implementation

The basic version, which will meet (almost) all the requirements of the checklist, can be implemented in a project in probably less than a week.

In order to do so, it would be necessary:

  • add manifest.json,
  • register ServiceWorker,
  • add a cache of several basic pages,
  • to handle the offline mode.

Our application will meet the requirements of being a PWA, but it will not work as responsibly as it may work if we do it well. In this case, the developer’s week will be too short.

How to do it in Magento and do it well?

Unfortunately, the standard Magento 2.3 template does not give us the benefits of PWA. Currently, we can use several ready-made solutions available on the market:

  • Vue Storefront,
  • Venia Storefront,
  • ScandiPWA.

The first solution has already had its production implementations. However, this is not a solution dedicated only to Magento. It is based on the Vue.js framework, which despite gaining popularity is less popular than the technological stack in the other two solutions.

Venia Storefront is a product of the Magento team, but it is currently in the development phase. For sure, in the future it will be the most beneficial solution, because the whole Magento development team will be behind it. Today, however, it is not yet a ready-to-use production solution. It uses React.

ScandiPWA is a dedicated solution for Magento, it easily integrates with the current project infrastructure. Like Venia Storefront, React is used here.

Which of these approaches should you choose? It depends on the available team, resources, level of modifications introduced in the store, further development plans (road maps). However, using one of the ready-made solutions and rebuilding for your own needs will usually be more advantageous than building everything from scratch.

PWA and SEO

One of the most important things to consider is SEO. Unfortunately, PWA solutions in terms of SEO is probably the worst thing that can be implemented ?

Why? Let’s take a look at a sample source code of a website that uses one of the popular frontend frameworks:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1">
        <link href=/static/css/app.8d66195e6524045ce3c111ac7787fa40.css rel=stylesheet>
    </head>
    <body>
        <div id=app style="display: flex; flex-direction: column;"></div>
        <script type=text/javascript src=/static/js/manifest.59bbaa6c906d43f698a0.js></script>
        <script type=text/javascript src=/static/js/vendor.2fa93b65efd49b334003.js></script>
        <script type=text/javascript src=/static/js/app.7786a9e7d608d76cc7fc.js></script>
    </body>
</html>

As you can see, there is no information about the content of the site. Of course, on the browser side, as soon as the page is loaded, everything that is needed on the website will be rendered, but the primitive robot will only see the source above.

Google is increasingly trying to support JavaScript elements, but we are still not sure if all the elements we use are supported. Moreover, despite the fact that Google is the leading browser, it is not the only one. Search engines like Bing, Yandex and others don’t have to keep up with their robots handle JavaScript. Unfortunately, we will not find out the details. Until we have official confirmation from a company such as Google or Microsoft that they fully support JavaScript from the level of indexing robots, in e-Commerce we must take into consideration the advantage of sites rendered in a traditional way over modern frameworks for SEO.

What can we do about it? There are some interesting approaches.

SSR

Server Side Rendering is the approach of rendering the basic HTML code on the server side, which is then sent to the user’s browser and already there the page works as if it had been downloaded in a PWA version immediately.

SSR is certainly a step in the right direction when it comes to SEO, but it also has its disadvantages. They are undoubtedly:

  • Increasing the requirements in terms of server resources,
  • SSR requires experience and keeping this in mind at every stage of implementation,
  • SSR also introduces an additional element to be tested (the page you click on is theoretically something else than the page you enter directly from the link).

Prefetch

Frontend frameworks usually allow static pages to be generated under specific addresses as early as the application development stage. This solution will work very well for static pages, but is unlikely to work for pages that require API communication to retrieve any data.

Traffic separation

Another approach may be to divide traffic based on HTTP request headers into regular traffic and indexing robot traffic. Normal users are directed to a standard application, robots are sent to previously prepared pages based on the page map (we can generate them e.g. every day using tools emulating browsers with JavaScript support). Even if our site will not be fully supported, we will certainly generate HTML, which contains the data needed for the robots.

How does PWA affect performance?

The use of PWA very significantly affects the customer’s perception of our shop. Even if Magento will not work perfectly and there will be longer loading times (which of course should be improved as soon as possible), the customer is always in full interaction with the application (e.g. he gets a loader within the application instead of reloading the whole page).

Of course, PWA implementation will not eliminate the obligation to solve performance problems in Magento API (if any of them occur due to inadequate server resources), but indirectly will also reduce the use of the server to service some resources of our site.

Depending on the implemented SEO support mechanism, it may also require some computing power to maintain the SSR.

Is it worth it?

Statistics

The cost of implementing PWA may vary for different systems due to the modifications made, the current complexity of the system, the characteristics of the service. On the other hand, the effects of introducing PWA can be very significant (as can be seen e.g. at <www.pwastats.com>).

Everyone has to decide for themselves whether the potential benefits will translate into a return on investment in PWA (e.g. using the calculator already mentioned at the beginning).

You can predict the benefits of implementation based on the results of companies that have already done so:

  • Pinterest, after reducing the waiting time for website loading by 40%, increased the organic traffic and the number of registrations by 15%;
  • COOK increased the conversion rate by 7%, reduced the rejection rate by 7%, and increased the number of pages visited per session by 10% after reducing the page load time by 850 milliseconds.

And what could be associated with poor performance:

  • The BBC discovered that they are losing 10% of their users for every second of delay in loading a page.
  • DoubleClick from Google found out that 53% of mobile site visits were dropped when the site was loading for more than 3 seconds.

They’ve already decided

La Nature

La Nature is an online jewelry store based on the Magento platform, integrated with 1C USP, CRM Bitrix-24, a loyalty system, functionalities that make wholesale shopping easier for franchisees. The front-end developers opted for the Vue Storefront.

Thanks to PWA technology, La Nature customers can browse the entire brand offer at any time, even without an Internet connection.

The Hour Glass

The Hour Glass is a brand known for selling exclusive watches. With the launch of their new collection, NOMOS Glashütte, they decided to launch a pop-up shop using the Vue Storefront structure.

Malianta

Malianta is a handmade leather handbag and accessory company that describes itself as “an online fashion brand”. The lack of landline stores and the need to be seen as a luxury brand required Malianta to pay special attention to providing its customers with the best possible shopping experience.

Malianta’s new mobile store debuted in Black Friday, immediately proving it was worth implementing. It was able to handle 755% more traffic than the average week.

Summary

For several years now, PWA has been helping stores to attract new customers (e.g. to complete their shopping cart offline), keep their attention (e.g. with push notifications) and experience a seamless mobile experience (e.g. fast loading times). PWA is the future of m-Commerce, which is already here and it is worth to have your shop join it.