Piyush Dankhra

moon indicating dark mode
sun indicating light mode

Last updated: January 09, 2021

What is the Magento PWA Studio?

Well! the simple answer is

  • It is a Progressive Web App (PWA) framework for Magento 2 framework.

Yes! We can build the headless frontend for Magento 2 using the PWA Studio, the official framework by Magento.

Cool! Now the question is, are there any other frameworks available for the same? As we know the popularity of Magento, so obviously we have some options like

Let’s get back to the PWA Studio. It is built on ReactJS and it uses GraphQl and RestAPI to communicate with the Magento as a backend.

The frontend of the PWA Studio is a building block of React components like Header, Footer, etc. In that, one component includes another component; let’s say the Header component includes Logo to render the logo inside the header.

Furthermore, a component consists of: logic and presentation.

  • Presentation is a visual part that we see on the frontend
  • Logic plays behind the scene

Overall, it is a building of React components that has its own logic for fetching and present data to the user.

So what’s new here than the typical Magento frontend as it is also doing the same job? The answer is in the following main bullet points.

  • Speed
    • On a typical website, when we traverse between pages, it loads whole page data and renders. While in PWA, it only loads the required data.
    • When the user goes from a category page to the product page, it only loads product data and presents it on the main section while it will not reload header, footer sections that one is app-like experience.
  • Offline mode
    • It caches the data of visited categories and products into the local storage, so if the user’s network connection is lost then also the site will serve data in the offline mode from the local storage.
  • Install app
    • The user can use your website as an app on the mobile/tablet/desktop.
    • So you no need to create or manage a separate mobile application as you can get this in one go.

Checkout more about PWA Studio here: https://magento.github.io/pwa-studio/

I'm Piyush Dankhra
Adobe Certified Expert - Adobe Commerce Developer / Front-End Developer / Business Practitioner
Adobe Subject Matter Expert - Adobe Commerce Front End Developer
Working on Magento 2 / PWA Studio