Ins and Outs of Magento PWA You Should Know About

Working with React Native services is a challenging task. Plus, when you try to use the React component with Magento, things just become a lot more difficult. If you are an RN developer, you would know about the difficulties we are talking about.

Citing the difficulties faced by developers in the Reacticon Conference of 2018, Magento decided to unveil the power source for handling react components in Magneto with the PWA studio, a glee on the face of stakeholders was imminent. Though these were just the early days, and more was to come on these lines, they found that the react routing process in Magento became easier, much to the developer’s delight.

Here, we will talk about Magento PWA Studio: Routing and Root Components.

Why Do You Need a PWA Studio?

Mobile phones are ruling the internet space, and the chances of people logging into the website and placing an order are far less than shoppers picking up their mobile phones and making purchases. This called for PWA (Progressive Web Apps) architecture wherein the website looked like more of an app and functioned almost similar to one of the Android or iOS applications both on the web and the mobile devices.

But in reality, PWAs are just web applications that can be installed in the system and used offline; these are not typical apps that you find in the Apple and Google Play Store. For any e-commerce platform, they must leverage the latest technologies to drive more sales. PWA is that ideal technology adaptation that might boost the sales.

The inclusion of developer support solutions was necessary to address some limitations of working in Magento, especially from the React side of things. So, React-based support became a necessity, and we got in the form of a PWA studio. 

Benefits of Using Magento PWA

1. Boosts the mobile-eCommerce section of your business module, especially since more than 27% of mobile users are buying products on smartphones.
2. PWAs, which are normally written in web-based programming languages, like HTML, CSS, and Javascript, allows for better compatibility across various web browsers and devices.
3. Page Load Time factor is controlled as even one second delay in page load can cause visitors to bounce away. In the case of PWA, as soon as the user opens the platform an app shell is rendered, which hooks the customers to the platform for that extra second.
4. SEO is the backbone for any eCommerce website, and Magento PWA architecture is designed to be SEO-friendly from the outset.

How Does Routing Happen with PWA?

Back in the days when the Magento PWA studio did not exist, routing for React was a complicated process. It involved a lot of complexity to include React routing in Magento. So, how did the inclusion of Magento PWA solve this issue?

The Magento 2 PWA Studio is laden with built-in solutions to handle the routine activities, and the flexible nature of Magento 2 URLs augmenting the routing for the React process. The built-in solution that we are talking about here is nothing but the Magento Router component, which wraps around the React routing component.

Here, the Magento router is entrusted with the task of routing, similar to the way a react routing component would function.

The path to Magento Router Component:

packages/peregrine/src/Router/Router.js

URL supported by Magento Router

• CMS Pages
• Category Pages
• Product Pages

Steps Involved in the Routing Process Switch Magento PWA Methodology

1. In the very first step, the Magento router component passes the URL to the subsidiary component called the Magento router Handler Component.
2. Once the Magento Router handler receives the URL, it processes the query request forward to the Magento 2 using the Graph QL technology developed by Facebook for API interaction. It resolves the route query and returns a particular page type, depending on the query registered in the first place. The three-page types, which are in the discussion here, are the same as the above-mentioned.
3. If the URL for that particular query request exists, things are fine, or else it will throw a 404 error indicating the absence of the page. However, if the requested URL in the query is located, the Magento Router component comes into action as it renders a Root component to carry forward the page type requested.

Specifying a Root Component for a Specific Page

The very steps that you need to follow to specify a Root component are that you need to pool them together in the following path: src/RootComponents/.

In the PWA Studio, you need to take note of the fact that the Root component is not specified as the file type. Ideally, you can put this to your advantage and simplify things by naming the Root component as per the page type.

So, for CMS_PAGE type, the following folder schema can be employed

src/RootComponents/MyCMS/

Next, you follow the following coding snippet and create an Index.js entry point file

/**

* @RootComponent

* description = ‘Basic CMS Page’

* pageTypes = CMS_PAGE

*/

export { default } from ‘./path/to/cms/main/component;

Here, the index.js defines the Root component for navigating to a particular page type. Now, if we alter the value assigned to the variable Page Type from CMS Page to Product, it will route to the product page. So, the Root component will bear the page type – product regardless of the CMS Page specified earlier.

Conclusion

So, here we have covered various aspects of Magento PWA, and most importantly, how the Magento Router component is acting as a backup for the React routing. As mentioned earlier, enabling react routing functionalities is the very first gift of PWA Studio to Magento developers. It will be interesting to see how PWA Studios will incorporate other functions.

There are various other areas in which you can explore, and we hope after reading, you set on a Magento PWA voyage.