PWA in Magento 2: How to Use It?

Table of Content

margarita nikolenko lead frontend developer
Posted in: Magento 2 Guides

The Magento community filled with rumors about PWA support in the new Magento release. Magento 2.3 came in late 2018, but PWA support was not there. It was not until Jan 2019 that PWA Studio was deployed. How I felt? Thrilled, as it offered Magento 2 stores a vast array of new opportunities.

PWA gives your store a range of new features:

  • Increased page speed;
  • The “mobile” mode that allows you to send push notifications;
  • Offline mode availability;
  • Handy and responsive user interface.

This is not to mention that PWAs work well on the regular web.

As for the development, PWA uses a popular modern tech stack that includes ReactJS, Redux, GraphQL, Apollo and webpack. Such technology as React is used to create a PWA storefront for Magento 2. To Magento developers, this offers new opportunities to explore. However, the PWA philosophy has little to do with the one we are accustomed to in Magento. From the approach to development to the classic understanding of the “theme” concept, it’s absolutely different.

In the article, I’ll explore the nature of the PWA in detail and discuss the opportunities it offers to the e-commerce business.

How does PWA work? User vs. Developer perspective

I decided to consider the technology for the 2 key players - a regular e-store user and a Magento developer.

PWA User

A user may view PWA as a common website that works perfectly on the web. Besides, it interacts with the user just like a native app: when the user visits the site, they see an offer to install it on their mobile device. After the set-up, the site starts working as an offline mobile app that even sends push notifications.

PWA Developer

For a developer, PWA makes a separate project located in the root of a standard Magento 2. It’s a React application that uses GraphQL to interact with the backend. So you can get themes for Magento 2 with the help of React for your frontend. Here are some other components of the project:

  • pwa-buildpack CLI tools, build and development tools help set up and optimize the components and the local environment;
  • Peregrine hooks and components is the collection of ready-made useful components and React hooks that enable reusing of the common functions, such as routing, product or price display, etc.;
  • Workbox, Google’s library for offline mode support;
  • Venia store and visual components - the theme nucleus and the ready-made visual components;
  • UPWARD,  a specification describing how the server should react to data queries. It’s an intermediary between the PWA storefront and the Magento backend with diverse APIs that locates all queries in one place and provides for returning the expected response.

PWA vs. Magento themes: what’s the difference?

The basic PWA theme from Magento is called Venia. However, it’s not like the standard Magento themes.

Regular Magento theme is a component that determines the look of the store. Magento theme is deeply integrated with the Magento functionality and is always inherited from the parent theme. At the top of the Magento inheritance chain, there is Magento Blank. These are the core theme files. Any other theme is based on these files, redefining and resetting them.

Unlike Magento, PWA themes are not inherited from the parent theme. These themes for Magento 2 consist of React components that offer different functionality. You can relocate these components to change the theme behavior or delete them altogether. In Magento, inheriting the theme involves some risk - if the parent theme changes, the child theme may also change unpredictably.

PWA uses a modular approach that allows building a theme from scratch with the help of different ready-made modules. This approach ensures greater flexibility and control in building the store showcase.

As the theme components are modular and independent, the adverse effects of updating each part are reduced to a minimum.

Each approach has its pros and cons. However, PWAs aren’t going to stop improvements any time soon. The project is in active development. If you check the relevant GitHub repositories, you’ll see the issues aiming at adding “theming” to PWAs. This will unite the pros of the 2 strategies and facilitate the customization of the store looks.

Why would I choose PWA for my Magento 2 store?

If I had an online Magento 2 store, I'd go for PWA without second thoughts. Why so?

  • Extensive coverage. You can open a PWA simply clicking a link in a social network, or when browsing, or when searching in Google. No AppStore or PlayStore involved. This feature offers greater info coverage than that of native apps.
  • Cross-platform nature. One and the same PWA covers iOS, Android and web. You don’t need to create 3 apps to cater to all platform users. You just need a PWA.
  • Relatively small size. PWAs are far smaller than native apps; the set-up takes seconds, and the work is fast. Why so? PWAs extensively use the capabilities of browsers and cache.
  • No installation required. A PWA will work on any platform even without installation.

Such big players as AliExpress, eXtra Electronics, Konga, 5miles have already increased their conversion rates by 60%-100% due to PWA pros. And this is not the limit.

PWA cons

The key PWA disadvantage is that the technology is very young, and it hasn’t seen many implementations yet. The newness also accounts for the fact that not all browsers support PWA in full (mobile set-up is not available).

However, as I've noted above, this peculiarity doesn’t hamper PWA operation - it will work on the web anyway. So is it a drawback? That’s for you to decide .

Summing up

PWA is a new technology that offers users and developers a range of new features. They include mobile set-up, push notifications and the ability to work offline. It also opens up new business horizons, including product distribution outside the web or an app store.PWA is a new Magento project that is actively developing and growing, and which will delight us with new opportunities and gimmicks.

I hope this overview will be useful for you. Maybe you've already used PWAs? Please share your experience in the comment below.

PWA & GraphQL compatible mods by Amasty

We do keep track of the industry trends and try to bring the most to our customers. So we’ve started off with ensuring our Magento 2 product compatibility with GraphQL, which enables you to use modules in your PWAs.

Here's what we have now:

And the work is on. Stay tuned for updates!

October 23, 2019
October 25, 2019
October 22, 2019
October 29, 2019
Lilly Hedin
November 6, 2019
Ok, and what about AMP? What is the difference between these technologies? Could you please explain it?
Polina Litreyeva
November 6, 2019
Hi, thanks for reading and commenting! You see, it looks like it could be rather complicated to answer your question in a single comment. We'll try to see if we can cover this question in future articles.
November 13, 2019
It is not entirely true that PWA a "young" technology. The idea of such pages exists since 2007-2008. But only in 2018, all browsers, iOs, and Android systems became able to support their seamless work.
Polina Litreyeva
November 14, 2019
Hi Ingvarr, thanks for leaving the useful addition!
March 26, 2021
useful info about PWAs, no cap, they r becoming rly trendy these days
Vladimir Derachits
March 26, 2021
Hi, there, thanks for your feedback! We are glad to share our experience and be helpful.
January 28, 2022
Great article. I find it hard to implement PWA because it cut down on the user experience. Essentially it's a trade-off between speed vs functionality.
Leave your comment

Your email address will not be published

This blog was created with Amasty Blog Pro

This blog was created with Amasty Blog Pro