Table of Contents
Tidio predicts that in 2024, approximately 187.5 million users will shop online via mobile, and the number of M-commerce sales will grow continuously, probably reaching $710 billion by 2027. These numbers show how important mobile ecommerce is and how people prefer shopping from their mobile devices due to the convenience of the method.
These and other ecommerce trends are among the reasons why more and more ecommerce store owners are starting to pay closer attention to Magento PWA development. Considering that Magento remains one of the biggest and most popular ecommerce platforms, it’s no wonder business owners want to transform their Magento stores into progressive web applications. In this article, we discuss Magento PWA, its main benefits, and potential challenges to consider.
What is a PWA?
A progressive web application is basically a combination of a website and a native mobile application. While still being a website, a PWA brings a native-like experience to users, thus significantly boosting user experience (and conversions). Also note that the creation of a progressive web application is usually the first step towards making your Magento store headless, so if you are considering headless architecture, you need to pay attention to PWA for sure.
Getting back to the topic, a PWA is built by using web platform technologies and can operate in both online and offline modes. Its strongest advantages over traditional websites are:
- Quick performance and faster page loading;
- Better UX;
- Support for push notifications;
- Work in offline mode.
The biggest question, however, is how a progressive web application can deliver a near-native experience if it is basically a website. Magento developers use a specific tech stack and follow several UX principles, which are essential for any good PWA.
Main UX principles and rules for a user-centric Magento PWA
Though the rules listed below are applicable to any software product, it is especially important to follow them during the frontend development of your app. Since PWAs are known for delivering seamless user experience, these UX principles will be a great aid:
- Display an important action on a new screen so the user understands its significance;
- Facilitate navigation as much as possible so store browsing is frictionless and intuitive;
- Do not make fonts and elements too complex; instead, go for more basic ones;
- Do not 100% reload pages when the data is refreshed;
- Try placing tappable elements near the bottom of the screen for easier use;
- Test the design on various devices to see if it looks and performs the same.
The main idea here is to make the app user-centric, not fancy or overloaded with visual elements and components. Obviously, you need to pay attention to its performance, since it’s the cornerstone of good UX.
Why should Magento store owners choose PWA?
By now, you might be wondering why Magento store owners should opt for a PWA instead of a native app or an ordinary website. Sure, a native app has a range of advantages over a progressive web application, like direct access to the device’s hardware. However, if you need a cross-platform solution and know that your customers access the store via web browsers, then PWA is a must. Here are the biggest benefits that you might expect.
Better performance
Due to the client-side rendering feature and caching, PWAs display better and faster performance than traditional websites. When a user performs an action on the Magento progressive web app, the browser responds by building cached templates without using dynamic content. In this way, the server sends only the requested data, greatly reducing server load.
Better UX
As mentioned above, PWAs follow the principles of native-like UX, like simplifying navigation or placing important and tappable elements in convenient areas. To better understand why PWA UX design is so good, let’s take a step back and look at the time when it was first introduced.
In 2015, Google came up with the concept of PWA and emphasized the importance of the mobile-first approach. That meant the mobile versions of websites had to perform and look as good as their native mobile counterparts. To achieve that, Google suggested using the same UX/UI principles for the web that were used for mobile, and this also became a gold standard for PWA development.
SEO optimization
Since PWAs are technically websites, they can be SEO-optimized for better online visibility and searchability. There is a common misconception that progressive web applications cannot be indexed because of Client-Side Rendering (CSR) due to Google’s inability to crawl JavaScript. That’s not entirely true, though: for example, Googlebot can successfully crawl the Client-Side rendered JS, but it requires extra time and effort. So, the good news for PWA owners is that their stores can be crawled and indexed. While manual SEO configuration might take too much time and effort, most Magento PWA themes already have built-in and perfectly optimized SEO tools. Sounds great, right?
Magento PWA development: three main methods to consider
Now, how exactly do you turn your Magento store into a PWA? There are three ways of doing so, each coming with its pros and cons:
- Design a custom solution from scratch by using frameworks like Vue.js or Angular.js;
- Use Magento PWA Studio;
- Use a specialized Magento PWA Theme.
To save you time and effort, let’s move on straight to the second and third methods. While custom development is valid and is sometimes preferred by store owners, it’s usually too cumbersome and time and resource-consuming. So, unless you need something truly unique and complex, it will be easier to choose between a Magento PWA Studio and a specialized Magento Theme. Hence, let’s look at each in detail.
Explaining Magento PWA Studio
The most obvious choice for building a progressive web application is Magento PWA Studio by Adobe. It is an official toolkit designed specifically for building a PWA store on Magento 2 and above. Magento PWA Studio provides you with all needed tools and libraries, and it also takes care of your app’s architecture. That means the architecture is pre-built and fully adheres to Magento coding standards, meaning you won’t have to worry about it and can use it selectively.
Before we discuss its main pros and cons in detail, you need to consider the tech requirements needed to work with the toolkit:
- You need to have a basic knowledge of React to efficiently set up and configure your store;
- The installed version of Node in your development environment needs to be v.14 or higher;
- The installed version of Yarn in your development environment needs to be v.1.12.0 or higher.
You can find more information about the requirements and Magento PWA Studio setup on its official website (Adobe Commerce).
Magento PWA Studio pros
Since it’s a native development toolkit by Adobe, Magento PWA Studio obviously offers several significant benefits for both developers and store owners.
Full compatibility with Magento
Though seemingly obvious, it is actually a valid and important benefit. Magento integration with different development tools can be tricky, so full compatibility with Magento PWA Studio can save you lots of development time and effort.
Modular nature
The solutions and components offered by Magento PWA Studio are not monolithic. This means they can be used selectively, depending on your needs, which adds a great deal of flexibility to the development process.
Pre-configured app builder
To facilitate and speed up the development process, Magento PWA Studio offers a pre-configured application builder, thus providing you with a rich array of ready-to-use site elements. While they can be used as they are, they are also customizable if you need to make any adjustments.
Configured routing and caching
The setup and configuration of routing and caching are integral parts of any PWA development process. Now imagine how easier the development becomes when routing and caching are already configured and there is no (or at least, minimal) need to modify them. This is exactly what Magento PWA Studio offers. This feature contributes to smoother user journey and faster development.
Pre-set service workers
Service workers are essential components of any PWA, and what’s great about them in the Magento PWA Studio is the fact that they are already set up. This eliminates the need for time-consuming manual configuration and serves as an additional advantage for developers.
Magento PWA Studio cons
On one hand, the solution is highly convenient and developer-friendly. However, it does have several drawbacks that one needs to consider.
Plain theme
Magento PWA Studio uses Venia theme, which is considered to be quite plain by some Magento developers. Sure, you can adjust and customize it as needed, but 1) it will take quite a bit of time and 2) you may not be able to implement all needed changes.
Excessive code
Because Magento PWA Studio is kind of a “one size fits all” solution, it has lots of excessive code to ensure that it covers the majority of potential problems and needs. Hence, you will need to invest some time into removing the unnecessary code. Otherwise, it will negatively affect the store’s performance and will significantly slow down the loading speed.
Complex code
In addition to being excessive, the Magento PWA Studio code is also too complex and may contain the following issues:
- Potential bugs;
- Unnecessary abstractions;
- Inconvenient solutions.
To prevent it from negatively impacting store performance, it’s recommended that the code be reviewed and that existing issues, like cutting out unwanted functionality or fixing bugs, be manually fixed.
Limited functionality
Though Magento PWA Studio was created as a ready-to-go solution, it still can’t fully satisfy all potential needs of different ecommerce businesses. Some features may be lacking and others are still under development. All that limits your customization options and may lead to extra costs in the form of custom extensions.
To sum up, Magento PWA Studio is a solid solution, but you need to be prepared for extra customization and development efforts if you want everything to work perfectly and according to your specific needs.
Top Magento PWA themes to consider
As said above, the use of a specialized Magento theme is another way to build a high-performing and user-centric Magento PWA on top of your existing store. Such themes are designed as readymade frontend solutions that you connect to your backend via the API. Often, a theme would require a certain amount of customization, but in general, it is packed with useful features and has a pretty solid functionality.
The main pros of using a Magento PWA theme are:
- Saving time and costs: because there is already a fully developed frontend, all you need to do is tweak it a bit in accordance with your needs;
- Ease of use: the implementation of a Magento theme does not require technical skills or knowledge, since it’s a readymade solution (though you will need some tech help for further customization).
As for the potential cons, they are:
- Customization: since these themes are quite generic, you will have to customize them to adhere to your brand, plus you will also have to go through the code and remove the excessive or unnecessary one;
- Limited functionality: this point relates to customization – chances are high you’ll need to add extra modules to your theme of choice due to its potential lack of features;
- Risk of bugs: since you do not control the theme development process, you can’t be sure it is 100% bug-free. Thus, you’ll need to double-check the security and quality of its code and eliminate possible glitches.
Now, onto the theme overview. For the sake of brevity, we won’t be looking at Venia since it’s present in the Magento PWA Studio and we already talked about it.
TigrenPWA themes
TigrenPWA offers three readymade PWA themes for Magento stores, each designed and fine-tuned precisely for Magento. It allows building a progressive web application in a very short time and is affordable, which makes it a perfect choice for startups and companies that need a short time to market.
Among the features present in these themes are:
- An app icon on a home screen;
- Push notifications;
- Sticky header;
- Popup manager;
- Social share;
- Responsive design.
These themes also support headless architecture, which is another advantage. As for the pricing, there are 3 different plans, each with a different level of customization and a different range of features.
Vue Storefront
Vue Storefront is an open-source framework for creating Magenta PWAs. It is a Nuxt.js project and comes with certain preinstalled modules and plugins, which makes this solution highly convenient for developers. And if you wonder why choose Nuxt.js as a project base, the official documentation states that it brings the following benefits:
- Plugins for resolving the most commonly met issues (internationalization, SEO, etc.);
- Versatility, flexibility, and support for custom integrations;
- Big and active community that can always provide help and support.
As for the theme development, Vue Storefront offers 50+ ecommerce components with its default theme and boasts a high level of customization. With this being said, Vue Storefront is a popular choice for creating responsive and user-centric PWA frontend.
ScandiPWA
ScandiPWA defines itself as a next-generation frontend for Magento 2. It is based on React and claims to support 95% of Magento features, which is quite impressive. Its biggest features include:
- Use of file overrides for theme development;
- App plugins for reusable extensions;
- Extensible architecture;
- Full customization of the theme.
Due to its broad range of Magento features, ScandiPWA is often preferred over other alternatives. This solution is also high-performing, scalable, and very developer-friendly. Plus, it has extensive documentation and a pretty active community, so if you need any help with theme installation, you will definitely find the answers.
Of course, there are many more Magento PWA themes options, but the ones listed above are the most popular and efficient. Now, let’s view the main components of a Magento progressive web application.
Key components of Magento PWA
For frictionless functioning and delivery of a great user experience, progressive web applications rely on several components.
Service workers
Remember we mentioned that PWAs can work in offline mode? Say thanks to service workers—virtual proxies between the browser and the network that cache static files and create a seamless user experience.
Service workers are JavaScript files that run on a separate thread in the background. This makes the API non-blocking and thus sends (and receives) communication between various contexts. Service workers are also responsible for push notifications and content updates but can handle and modify network requests.
Web app manifest
A web app manifest is a JSON file that tells the browser how your app is supposed to behave. Typically, the manifest contains basic information about the PWA, such as the name of your application, the icons that should be used, and the URL that should be displayed upon the app’s launch. Using the manifest ensures consistency of the app’s performance across various platforms and devices.
App Shell
An App Shell is another critical component for ensuring the progressive web application works offline. It is an architectural pattern that implies shipping the minimal critical resources needed for a powerful first-time load. Other non-critical resources are loaded later via the lazy loading method. This approach enables fast app loading and ensures that users can interact with the app before all of its dynamic content is rendered.
TLS protocol
The Transport Layer Security Protocol is responsible for a secure exchange of data between the server and the PWA. It is a standard protocol designed specifically to ensure data security and integrity during communications over the Internet and is used not only in PWAs but other apps. Also, you need to use the HTTPS protocol for extra data protection.
APIs
An Application Programming Interface is an essential component of any application. It enables communication between software components, and in a progressive web application, it is responsible for the communication between the frontend and the backend parts. By using various languages like GraphQL, developers can set up various processes, such as data retrieval.
Pop-up working principle
One more critical component (though more of a working principle) is the use of pop-ups. To improve and streamline user experience, PWAs rely on pop-ups to interact with users. In this way, a new pop-up opens for every new action, and this creates a smooth user journey.
Challenges of PWA Magento
We’ve talked a lot about the benefits of Magento progressive web application, but this solution also implies several challenges that are to be considered in advance. By understanding these potential limitations and bottlenecks, it will be easier for you to plan the development process and adjust the implementation of PWA into your business strategy.
Access to hardware
Because progressive web applications are not built with the same programming languages as native apps, they do not have full access to the device’s hardware and to all of its features, like GPS or camera. While not too critical, this limitation may become an issue in the future and is, in general, something to keep in mind. Also, different operating systems provide different levels of access to PWAs. Thus, Android is more welcoming of PWAs than iOS, so consider it too.
Time-consuming and costly development
As already mentioned, Magento is already a complex environment in terms of development and customization. Thus, creating a Magento PWA will also require a significant amount of time and resources (including financial). Even with ready-made solutions, you will still need to customize them and ensure that the code is secure and consistent.
Limited support on iOS
If you want to run your progressive web application on iOS, be prepared that 1) PWAs are supported only by Safari and b) not all of its features will be available. Hence, if the majority of your customers use iOS devices to browse your store, you might want to consider developing a native iOS application instead.
High requirements for tech expertise
Lastly, working with the Magento platform and creating a Magento progressive web application requires a rather high level of technical expertise to efficiently resolve potential issues and bottlenecks. So you either need to have a knowledgeable and skilled in-house team of Magento developers or reach out to a reliable provider and request custom Magento development services.
Best practices for developing a Magento PWA
We’ve discussed the pros and cons of creating a Magento PWA and ways of doing so. Finally, let’s discuss best practices for its development. These practices aim to help you avoid common pitfalls and mistakes and focus on improving your app’s performance and UX.
Avoid irrational component size
A great deal of pitfalls and bottlenecks lie in the frontend part of PWA development, and one of such issues is the irrational size of components. If your components are too large, they might 1) cause the rerendering of the whole page instead of its required parts and 2) slow down the browser load. Hence, try keeping all your components the same and small for better app performance.
Watch architectural components
Another issue related to the work with components is the layout of architectural components. In the case when they are laid out incorrectly and when the filter is changed, other filters get rerendered too. Which, as mentioned above, slows down the app’s performance.
Actively use caching
Caching in PWAs helps save a great deal of time upon the app’s loading. Thus, don’t forget to use service workers and browser caching to store frequently used resources and to handle requests more effectively.
Consider how you use GraphQL
When working on the PWA for Magento, there are several tips on using it in the most efficient way. They are:
- Avoid sending excessive GraphQL requests to prevent Magento from initializing every time a request is sent;
- Deploy Varnish for GraphQL caching – it’s much more efficient than internal Magento storage;
- Keep the GraphQL schema and the config cache apart.
Monitor third-party plugins
While you can fine-tune and control the performance of the app, you can not be 100% sure about the performance and reliability of third-party plugins that you add to the app. Thus, before their integration, double-check the performance of these plugins and ensure they do not impact the app and its SEO and UX.
Optimize content delivery and loading
Seamless user experience is critical for any app and Magento PWA is no exception. To improve its usability and ensure that the existing content does not slow down the performance, you can do the following:
- Use lazy loading, which implies displaying only the requested content and gradually; loading the rest as the user scrolls;
- Optimize images so they do not slow down the performance;
- Compress your files to speed up the loading time.
Regularly review the performance of your PWA
One more thing that you can do when working on the app and its optimization is to constantly monitor its performance. For that, use specialized tools (i.e., Lighthouse) that allow not only to assess how well your app performs but also suggest areas for improvement.
Summing up
Magento PWA is a great solution for any Magento store owner who cares about delivering a seamless user experience and strengthening their online presence. However, the development of the Magento progressive web application requires a high level of technical expertise and thus, our best recommendation would be to contact a knowledgeable Magento development company and partner with it for the development of a custom and powerful PWA solution for your store.
Comments