PWA in Magento 2: How to Use It?

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:

• Magento 2 Automatic Related Products for v. 2.5.3
• Magento 2 Contact Form v. 1.11.0
• Magento 2 Blog Pro v. 2.4.0
• Magento 2 Custom Menu v. 1.5.0
• Magento 2 Showcase v. 2.9.1

And the work is on. Stay tuned for updates!