PWAs are growing in popularity by the month, particularly in the eCommerce world. More and more online retail businesses are opting for modern and progressive web apps on Magento. Either the stores are currently migrating to Magento 2 or are already running on the platform’s second version, there’s always room for improvement, right?
In this article, we’ll introduce you to everything you should know about building a PWA with the use of the PWA Studio. We’ll explain the pros and cons of using the PWA Studio, give a detailed explanation of what to keep in mind when working on a progressive web app’s UX and UI. Then, we’ll walk you through what should be done to build the progressive web app with code examples and detailed instructions. As a final touch, we’ll share handy tips from the pros.
What to Expect From This Magento PWA Studio Guide
A Quick Introduction to PWAs
Progressive web applications for eCommerce stores are becoming a real hit. The number of users who shop from their mobile devices is continuously increasing. In essence, a PWA is not actually an application that we’re used to in the conventional sense. It’s a very modern, fast, and highly-optimized mobile version of a website.
And progressive web apps, undoubtedly, have many benefits over good-old native applications, here are some of them:
- PWAs are faster,
- they don’t have to be downloaded to the device from Google Play or the AppStore,
- they practically take up zero storage space on the user’s device,
- they have the same impeccable UX and UI as native applications do and are very simple to navigate,
- they are available offline,
- and generally PWAs cost less in terms of development (at least if compared to natives that have to be built-up as at least two different apps in terms of coding languages so as to fit the standards of iOS and Android, to provide an example).
In a nutshell, this to a great extent explains the current high demand for PWAs in the sphere of eCommerce and online sales. Put simply, everything used in the PWA leads to a boost in how convenient the site is for users. In turn, this helps to lower the bounce rate, enhance the conversion rate, and result in the growth of sales. So, a growing number of online store owners wish to invest in progressive web apps of their own. Opting for headless commerce in the form of first getting a PWA is also a step that can help stores prepare their architecture for the users’ shopping habit changes later on.
But what do you have to understand about the process?
The Approaches to Developing PWAs
Let’s begin by making it clear that there are multiple approaches to progressive web application development on Magento. Just as in the case with the construction of buildings, PWA developers can opt for several different paths to reach more or less the same result:
- develop the whole PWA from scratch via custom coding using a progressive framework (just plain React.js, Angular.js, or Vue.js);
- building the progressive web application by customizing ready-made themes (these are the PWA Studio that’s officially brought by Magento, or other third-party themes like the Scandi PWA toolkit or the Vue Storefront, to give a couple of examples);
- opting for a combination of custom coding and theme customization (this supposes a blend of the aforementioned two points).
💡 If you are planning to create a highly customized Magento PWA, you can’t rely on the samples provided by the toolkit. Plain ReactJS coding would be the best option here. If your dev team doesn’t have a good command of React, turn out to our Magento PWA developers, who clearly understand how the PWA architecture should be organized.
What This Article Focuses on
Now that this is clear, we’d like to point out that this article is devoted to progressive web application created with the help of the PWA Studio.
Keep in mind that for this specific case we will operate from the idea that your online store is in the process of migration to Magento 2 that’ll be fitted with a PWA. But this guide is equally relevant if your store is already running on Magento 2 and you’d like to opt for a headless Magento solution and get a PWA.
In this article, we’ll cover the following things:
- Give an introduction to the Magento Studio tool for PWAs, as well as the main strengths and weaknesses of its use.
- Go over the UX and UI peculiarities that have to be taken into account when creating a progressive web application.
- Provide step-by-step instructions in the Magento 2 PWA Studio tutorial block on how to create a homepage of a PWA with the use of Magento’s PWA Studio (providing examples of code).
- Bring up some of the points that regard the work with the PWA’s backend if building the app via the Studio.
- Lastly, we’ll share recommendations on the use of the tool, as well as which mistakes you can bypass when working with the Studio.
Let’s get started!
1. Introducing the Magento 2 PWA Studio
As it was briefly mentioned a bit earlier, the PWA Studio Magento 2 is a toolkit. It was designed by the official Magento team specifically for helping developers build progressive web applications on the Magento 2 platform. The tool is composed of ready-to-use out-of-the-box solutions that can come in handy during app development.
Yet if everything’s available out-of-the-box, why do developers even bother to code everything (or partially) from scratch? Well, to be fair, the Magento PWA Studio has its own benefits and weaknesses. Below, we’ll tell you more about them.
Advantages of Using the Magento PWA Studio
1. The PWA Studio is not monolithic
This surely is a beneficial thing that simply means that the available solutions of the Adobe PWA Studio for Magento can be used partially. You won’t need to resort to the entire code in an obligatory manner. For instance, you can make use of just some of its parts, such as Peregrin or the PWA Buildpack.
2. The app’s architecture and framework are out-of-the-box
This is a very crucial point worthy of note. The thing is that developers often end up atoning for their mistakes if they’ve made irrational choices when building the application’s architecture at an early development stage. If something was organized illogically, and this pops up far ahead in the development process, a lot of time will be needed for the fixes.
When the architecture is available as a ready solution, consider that this point is already safely taken care of. Thus, this is among the handiest Magento PWA Studio features worth noting.
3. The application builder is already configured
Having the opportunity to save some development hours and time on handling the setups of the application builder is another bright side of the PWA Studio. Everything in the app builder is already configured for you to use.
4. The ready-made app elements are flexible
The PWA Studio has quite an extensive range of ready-made site elements that you can choose from and use during development. The greatest thing about them is that they can be used entirely as they are. Yet, if necessary, the elements can be modified and customized according to the needs (be they due to design or those changes that are required solely for the time of app development).
5. Routing & caching can be used without being tweaked
The matters of routing and caching are also the PWA Studio’s strong points. These solutions are provided in a way that there’s no need to tweak or modify them. Note that this applies to the case if you’re using the standard Magento-way routing in your PWA.
6. The service workers are already set up & out-of-the-box
The Service Worker is a commonly used browser resource caching tool on Magento PWAs. The Studio has already taken care of the time-consuming setup work and is in its ready-to-run shape.
Downsides of Using the Magento PWA Studio
1. Code excessiveness
Because the Magento team did their best to develop more or less universally applicable solutions, this obviously resulted in lots of excessive code. This basically means that developers will need to invest their time in “cutting out” those parts that aren’t relevant to their app. Why is this step required? To say the least, excessive code negatively influences page loading.
2. Code complexity due to abstractions
Ready-made PWA Studio code solutions mean that their use often implies the re-use of unwanted abstractions or probable bugs. This also means that the code is at times complicated, inconvenient in some places, and, thus, takes time to figure out and untangle.
That said, keeping in mind particular specifics of the store that you’re building, many solutions by the Studio can be unnecessary for your case. For instance, if your store doesn’t need to have a product cart, the provided functionality will be out of place. This will lead you to cut out the code and contexts that don’t fit your project.
3. Lots of time for studying the ready-made code
When provided with an out-of-the-box solution, in the application development case, you should be looking a gift horse in the mouth. Developers do their best to take their time and study the existing code before they get their hands on creating their own. Primarily, this is done so as to not end up reinventing the wheel (writing code for something that already exists).
4. No multi-store
Such an environment is required when there’s a necessity to support and manage more than one eCommerce website based on a single platform with a shared database. Multi-stores are also commonly used for chains of online stores. As of now, such functionality is absent in the PWA Studio toolkit, meaning the need for custom code.
Side note: there may be a possibility that the official Magento PWA Studio team has already fixed this point by the moment you’re reading this.
2. Creating Ultimate UX/UI for a Flawless PWA
Because a progressive web application has to offer amazing navigation, it’s quite self-explanatory that the app’s UX and UI have to be given much consideration.
To say the least, if you’re migrating a website to Magento 2, your old design is a no-go. And even if you have worked on optimizing your mobile design, it will still most likely need some additional improvement because of the high UX/UI standards for PWAs.
To give you a few examples of the trends that designers tend to follow lately, it has become customary to place crucial page elements closer to the bottom of the screen. Such elements can include buttons, site menus, drop-down lists, pop-ups, etc.
This is done to make all the major “touchpoints” thumb-reachable. Especially, if you keep in mind that the screen sizes of smartphones are getting bigger, meaning that element placement at the top of the screen will require “unnatural” movements. Feel free to browse these examples of Magento PWAs for some inspiration.
Thus, just shrinking the desktop version to fit mobile screens is, by all means, not enough. Accessibility and reachability are some of the key points to note when working on PWA designs. Below we’ll list more principles that are best to follow.
Must-Follow UX/UI Principles
It’s not just about what your PWA will look like on a mobile screen, it’s all about how user-friendly and easy it is to use. These are the 10 main rules not to forget about when creating prototypes for the future PWA:
- Achieving the shortest possible page load times should be among the top goals.
- Dedicate a separate pop-up or screen for every meaningful action on the page.
- Site navigation and any move should be easy for the user.
- Try to stick to simpler and more basic fonts and elements.
- Those parts of the page that can be tapped on should be highlighted for visual help.
- Major elements that can be clicked on should be positioned in the lower part of the screen.
- Remember that some devices can by default take up half of the screen if the user opens their keyboard.
- Fall back on universally-applicable UX/UI “rules” that regard different sizes of screens.
- Don’t forget about how the pages will differ if used offline.
- Ideally, data should be refreshed without a full page reload.
UX/UI for a PWA on Examples
In order to not multiply words, we’ve decided to provide you with some visually understandable examples. We’ve overviewed the mobile versions of several page types of various websites. For each of them, we have prepared our own prototypes which portray how the current design could be improved if the site owners would request a PWA. To make things clear, we’ve explained each of our UX/UI choices that you can see in the comments below the prototypes.
a) Homepage – House of Fraser
Let’s start by taking a closer look at the homepage example. We’ve chosen the one on the House of Fraser website. In the table below, we present you with the whole original design and the full prototype that you can scroll through.
| How the current mobile design looks like (full screenshot) | Our full prototype for the PWA mobile design |
|
|
|
Below, we’ve broken down the designs into pieces and will share our ideas on what should be changed and why.
| How the current mobile design looks like | Our prototype for the mobile design of the PWA |
 |
 |
- When we’re taking a homepage into consideration, it’s important to let the shoppers know that the application is available for download at the very top of the page. This is why we’ve moved the rounded elements with Google Play and App Store logos all the way from the bottom of the page (where they’re located on the original design).
- Plus, we removed the unnecessary first stripe that duplicates the special offer (“70% off reduction”) since it’s described in the main banner. On a side note, it makes sense to display this specific stripe at the top of other page types, such as Categories, to serve as a reminder.
- What’s for the second stripe (with the “£10 voucher”), we’ve decided to leave it as it is on the homepage yet added the “Close” button. Such advertisement stripes and larger banners are often very distracting, especially if presented in GIF format, thus, there should be an opportunity to close them.
- The main banner with the “Sale” categories was extended into more than one scroll on the initial design. Because the mobile application approach is vital (its main idea lies in the fact that one screen should fit a single section without the necessity to scroll down), we’ve narrowed down the block with the “Sale” categories to just one screen.
| How the current mobile design looks like (full screenshot) | Our full prototype for the PWA mobile design |
|
|
|
- This homepage design has product categories lined out one by one. This doesn’t make too much sense, so we’ve reassembled them into smaller category blocks.
- For the same reasons, we’ve reorganized the items presented in the “Don’t Miss” section into a slider format.
| How the current mobile design looks like | Our prototype for the mobile design of the PWA |
 |
 |
- On a similar note, the current mobile design has an inexplicit swiper design of the “Top Sale Picks”. As you can notice, it seems as though there’s just one item. By making the second top-pick product “peek” on the right side, we make the slider more apparent.
- Last but not least, the “Stay in the Know” section for email sign-up has a strange “Men/Women” choice solution. We’ve decided to use a checkbox to make it not look like buttons with links that can lead you to some other page.
b) Category Page – Costco
The category page example we’d like to cover in our overview is the Costco website. In the first table that follows, you can find the whole version of the prototype and the original design.
| How the current mobile design looks like (full screenshot) | Our full prototype for the PWA mobile design |
|
|
|
- As you can see, the header area is very large in the original layout. We’ve decided to minimize many of the areas, for example, the stripe with the COVID text that takes up too much space. Likewise, we moved the “Set Delivery ZIP Code” to the section by the filter and sorting.
- Because the ongoing design doesn’t provide the opportunity to change the layout from a listing to a grid, we’ve added this point for navigation convenience.
- The solution that’s used for the “Member Only Item” blocks is also quite crude. For starters, we added the “Special Event” label atop the picture and the star rating too. Furthermore, instead of having a field that states that “More colors are available”, we added more useful functionality that actually shows the color variations, materials, and sizes that a product can come in. Importantly, since the price isn’t visible on such items, we’ve made it more obvious that you have to sign in to see the price of the item.
- The wishlist icon that’s used on the category is irregular, it looks like a bulleted list with a tiny “plus” sign in the top corner. We decided to change how it looks and moved the wishlist functionality to the product page altogether.
- For convenience, we added the feature for autoloading products as the user scrolls the category and an indicator for the page number.
- Mentioning the “Related Categories” section, we believe that this block isn’t that necessary here as all the categories are readily available on the menu.
| How the current mobile design looks like | Our prototype for the mobile design of the PWA |
 |
 |
- The filter area is also worth changing. In the original design, the filter doesn’t open to the full scale of the page, we expand it to the full screen so that all options are easier to tweak. We also changed the way the price range is indicated, allowing manual input or to move around the price range instead of selecting it as a checkbox. What is more, we now show the matching results at the bottom. Pressing the “Apply” button puts the filter in action and closes the filter section.
| How the current mobile design looks like | Our prototype for the mobile design of the PWA |
 |
 |
- Lastly, the design of the “Sort by” element is a bit awkward, it takes up a full line and has an inconvenient dropdown. Our variant with a button that opens as a pop-up is much more user-friendly, this way the options are easier to tap on and, when selected, the sorting is applied.
c) Product Page – Rebecca Atwood
Thirdly, what’s for our product page, we’d like to overview the Rebecca Atwood website. Just as in the two previous examples, we first show you the full version of the designs, and then the broken down pieces with our ideas on how to improve the product page presentation.
| How the current mobile design looks like (full screenshot) | Our full prototype for the PWA mobile design |
|
|
|
Once again, below we’ve broken down the designs and gave comments.
| How the current mobile design looks like | Our prototype for the mobile design of the PWA |
 |
 |
- The first point that we decided to change was how the breadcrumb path was displayed and shortened it to one line.
- The size of the price digits is very small and needs to be enlarged. This is needed because how much an item costs is a very important point.
- The element for choosing the item’s size is located too low although it’s more important than the product description text. We moved it up and got rid of the dropdown, using buttons for every separate variation instead.
- We also moved the “Quantity” element up and introduced the “+/-” for indicating the number of items. This is much simpler than using the keyboard for inputting the digit.
| How the current mobile design looks like | Our prototype for the mobile design of the PWA |
 |
 |
-
- Characteristics and details that are located below the description don’t take up much space, so there’s no need to hide them in pop-ups, we rearranged the layout of the text in a more readable way.
- The “Delivery Details” is a hardly visible element, the color is not the best choice. We placed it into a visible section that’ll show the details in a pop-up.
| How the current mobile design looks like (full screenshot) | Our full prototype for the PWA mobile design |
|
|
|
- The original design is missing product reviews. We believe that even if there isn’t any feedback on the item yet, it’s crucial to have this section to encourage users to add reviews.
- The “Related” products are placed quite inconveniently on the ongoing version of the page. A slider format can make such data look a lot more organized.
- Furthermore, we’ve decided to cut down the space that the newsletter sign-up block took up.
- Lastly, we believe that the social media shortcuts belong in the footer area, so we moved them down. Similarly, we reworked the footer area a bit so it is consistent, simple to navigate, and to the point.
💡 If you are stuck on the stage of creating UX prototypes for your future PWA, our experienced Magento PWA pros are ready to offer a helping hand. We know how to make an enhanced UX and give your site a native-app-like feel. With this combo, you can increase your conversions and reduce acquisition costs.
3. Building a PWA Using the Magento PWA Studio: Frontend Works
Now that the design part of the progressive web app is more clear, let’s move on to the part of this Magento 2.3 PWA Studio guide that’s devoted to actually creating a PWA with the use of the PWA Studio.
Objectives
Let’s begin by lining out what we’d like to accomplish. Our major goal is to create a PWA with the help of the PWA Studio toolkit. We’ll be crafting only the homepage and will make the theme more adapted for desktop use. The reason for that is that the out-of-the-box theme is geared towards the mobile-first design. We plan to:
- Replace the standard out-of-the-box Venia logo with our own.
- Add an expanded category menu (since in the Studio it comes in a format that’s tailored to mobile devices).
- Move the sign-in authorization into a pop-up.
Step 1: Getting Started
a) Configurations & setups preparation
We’ll run the PWA on Ubuntu 18.04. Start by handling the required configurations on Ubuntu 18.04, install nodeJS and the needed auxiliary software.
|
1 2 3 |
sudo apt -y install curl dirmngr apt-transport-https lsb-release ca-certificates curl -sL //deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt install nodejs |
We also need the Yarn package manager. This Javascript package manager is noted for being a quick, safe, and trustworthy analog of NPM. It is capable of substituting the workflow that’s currently used for the npm client and it can support the current npm registry.
|
1 2 3 |
curl -sS //dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - echo "deb //dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list sudo apt update && sudo apt install yarn |
b) Creating a new project
Now move on to the Magento 2.3 PWA Studio setup by creating a new project with the help of the PWA Studio Buildpack as shown in the code below. One of the parts of the PWA Studio that’s shown in the code example below, Venia, is responsible for displaying components.
|
1 2 3 |
mkdir venia-create-app && cd venia-create-app yarn create @magento/pwa |
After running the previous command you can move step by step and fill out all the values for the buildpack command. Alternatively, use the following code line to replace the variable values with your own.
|
1 |
buildpack create-project ./ --template "venia-concept" --name "pwa-studio-shop" --author "onilab" --backend-url "//master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/" --braintree-token "sandbox_8yrzsvtm_s2bg8fs563crhqzk" --npm-client "yarn" |
After installation we get the following file structure:
c) Overriding inner components
For further development based on the Venia Concept by the Magento PWA Studio, we need a mechanism for replacing the internal components with our own. For this reason, we need:
- a Webpack plugin that will perform component substitution,
- a file for mapping our components and those of the Studio,
- to add everything to the Webpack configuration file (webpack.config.js).
d) Project folder
Create a folder that’ll contain our future components.
|
1 |
сd venia-create-app/src && mkdir components |
As a result, we get the following page. Below you can take a look at what the Venia PWA Studio home page looks like after installation.
Step 2: Changing the PWA’s Logo
Now we’ll give you a detailed example of how to make changes to the theme. To start, we’ll replace the logo.
a) Copy the component folder completely
To make any changes, you need to copy the entire component to your folder. In the following example, we show how you can override an entire component via component override.
Copy the component from:
|
1 |
venia-create-app/node_modules/@magento/venia-ui/lib/components/Logo |
To:
|
1 |
venia-create-app/src/components/Logo |
b) Set up the override components
Carry out the setups in componentOverride. Here we add the override component for the module. Now instead of searching for the component the standard way, Magento will search for it in the way we’ve specified in this example:
c) Replace relative paths with absolute ones
In order for our component to have the opportunity to use the Studio components, replace the relative paths with absolute paths as shown in this example for the logo.
Change this part:
|
1 2 3 |
import { mergeClasses } from '../../classify'; import Image from '../Image'; import logo from './VeniaLogo.svg'; |
To look like this:
|
1 2 3 |
import { mergeClasses } from '@magento/venia-ui/lib/classify'; import Image from '@magento/venia-ui/lib/components/Image'; import logo from '@magento/venia-ui/lib/components/Logo/VeniaLogo.svg'; |
d) Change the logo
Remove the Venia logo that’s provided by the Studio and upload your own logo instead, using your file.
|
1 |
import logo from './onilab-logo.svg'; |
Step 3: Rebuilding the Menu from Its Mobile Version to Desktop Format
Moving on to a more complex example. By default, all menus (even the desktop menu) are hidden in Venia. So we need to reveal it.
a) Create a new component
Let’s create a new component that will display categories. Follow the example below:
b) Add the component to the menu
The next step is to add the component to the menu. To do this, replace and edit the header components.
Copy this file from:
|
1 |
venia-create-app/node_modules/@magento/venia-ui/lib/components/Header/header.js |
To:
|
1 |
venia-create-app/src/copmponents/Header/header.js |
c) Replace relative paths & swap the menu
Add the code that’ll allow you to hide the trigger of mobile navigation on the desktop version. Then add the code to display our new component on the output of menu categories.
- Start with the following:
- Replace the relative path with the full path:
- Import the desktop menu component and use WindowSize from Peregrine to detect mobile:
- Replace the relative path with the full path once more:
- Continue by:
- Indicate that the header elements depend on the screen size:
- Depending on the trigger (whether the current screen size is mobile), we display a specific menu, mobile or desktop:
Step 4: Redesigning the Sign-in Area
In this step, we transfer the user sign-in and user authorization/registration menu to the pop-up format.
a) Install the library for modal windows
First, install the react-modal library which we will need to display the components in pop-up windows:
|
1 |
yarn add react-modal |
b) Create a modal window component
Make a simple modal window component that can easily be expanded and improved if necessary.
c) Change the component
Now we need to re-assign some of the default functionality of the PWA Studio once again. In our example, we take the AccountMenu component and redefine only the one file we need.
Copy this file from:
|
1 |
venia-create-app/node_modules/@magento/venia-ui/lib/components/AccountMenu/accountMenu.js |
To:
|
1 |
venia-create-app/src/components/AccountMenu/accountMenu.js |
d) Replace relative paths & implement the changes
Make changes in such a way that everything related to authorization and registration will work in the modal window. What’s for the authorized user, the sign-in should stay within the drop-down window (like it was previously before we made changes).
4. Building a PWA Using the Magento 2.3 PWA Studio: Backend Peculiarities
In this section of the article, we’d like to show how to create a Magento module that would return a product list that’s shown within the slider.
Step 1: Create a module & the required files
Begin by creating a Magento 2 module, we’ll name it PWA_MyProductList. We need several files that make up the required minimum in Magento 2 in order to create modules.
- We need a registration.php file.
- Next, let’s create a module.xml file.
Step 2: Create schema.graphqls file
Now it’s time to create a file that’ll contain the GraphQL schema for the request. This file should also indicate the resolver that’ll process the request.
Step 3: Create a resolver
All that’s left at this point is making a resolver that’s responsible for returning the necessary product list.
Step 4: Create a GraphQL query
As of now, the product list is returned by Magento 2. For the progressive web app that we’re building we need this to be handled by GraphQl instead. Therefore, create a file that’ll contain such a GraphQL query.
Step 5: Create a Magento query
The final step is creating a Magento 2 query thanks to which we can get a product list in the slider.
Plus, as shown in the file below, create a talon for obtaining the product list:
5. PWA Studio Tips from the Pros
Now that it’s clear how to build a PWA with the use of the PWA Studio, let’s go over some of the recommendations given by the pros. The following block will give more information on how to use the instrument and which mistakes to avoid.
1. Talons or Hooks
The first point in the overview regards what talons are in the PWA Studio and how they differ from hooks.
Put simply, React components have sections for logic and visualization. In the PWA Studio, these components are split into Peregrine Talons (that are used for logic) and Venia UI components (needed for content visualization). In their turn, Peregrine Talons are a type of React hooks that are used to provide standard functionality and logic for Venia UI components. Unlike Peregrine Talons, Peregrine hooks can be reused.
You can read more about talons and hooks here.
2. Possible Launching Issues with Windows
When using Windows, you may encounter additional launching problems. In an ideal case scenario, you should avoid using the Windows object since it can cause additional problems during the launch. You can take a look at such a webpack issue example here.
3. Reusable Constants
It is possible to implement new environment variables yet there is no proper structure that would allow reusing regular constants in the project. There’s a workaround solution for this. For instance, you can make a “Constants” folder (like we have done in our step-by-step Magento PWA Studio tutorial), define them in it, and then reuse them. The official Magento team brings up one more example with environment variables that you can also check out.
4. Fragmenting GraphQL Queries
The PWA Studio does not use (or hardly ever uses) fragments for GraphQL queries. But you can break large queries into chunks and then reuse them a large number of times.
To give an example of when this is applicable, you can use this in case you need to add a field to the requests of all types of product cards. This way, you’ll just add this field to a single fragment.
Make sure to apply this advice carefully when you work on your Magento 2 PWA Studio setup. Do your best to request only the necessary data minimum in your GraphQL queries. Note that if you apply this method without due thought, this may have consequences. For instance, in the case of listings, if you add the description field to the product, you can greatly increase the duration of the Magento server response time, the load time, and the space occupied in the cache.
5. Caching
When handling the caching matter, do not forget about the localStorage limitations. Otherwise, an overflow may occur.
What is more, the caching of some objects must be configured separately for the Apollo cache.
Plus, when you build the webpack it is possible to cache configurations and the URLs of your resolvers within the environment variables or in the template.
6. Overriding Standard Components
Another thing you should keep in mind is that when you override standard components there may be extra styles. In turn, this can increase the total weight of the files which isn’t good. This is why it’s worth investing time in cutting out excessive code blocks with styles.
Final Thoughts
We have shown several examples of how you can make changes to the Magento Studio-built PWA when building a progressive web application on Magento 2. If your UX is very different from what PWA Studio offers, then you will have to redefine many components this way. As a result, it may turn out that the PWA Studio will be completely redefined and, essentially, you will not need it. If this is the case, it’ll take a couple of days to tweak it, simplify the code, and reduce the weight of the application.
But in any event, the PWA Studio is a great start for those who are building a progressive web app for the very first time. If you need help with Magento PWA development, don’t hesitate to contact us and browse our work!