Technical Challenges With Magento PWAs

Magento Progressive Web Apps (PWAs) are on the rise, the software to develop them is getting better, and the tools we can use to host them are getting more advanced, however developing a complex Magento PWA is still quite a task and if you’re planning to build one, be ready to face some challenges.

Payment Methods

Some of the payment methods are PWA-ready and the documentation is easy to understand, however adding support for some may cause you a headache.

The PWA Studio documentation and Magento GraphQL documentation are getting better, however not all use-cases are covered at the time of writing this article. When you decide to add support for a 3rd party module that is not PWA-ready, you may find yourself in a difficult situation. For example, when implementing Stripe into our PWAs we faced few issues with the documentation and the core implementation. To make a fully working example of a Stripe payment method, we had to reverse-engineer the classic Magento Stripe JavaScript module, reverse engineer the way 3D Secure works, build a custom JavaScript module for handling payments in React, and tweak some server-side implementation.

This has been a bit of a challenge for us, but gladly our awesome team didn’t give up and spent hours on investigation, implementation, and testing to achieve the required results.

Content Management

Some of the content is coming from Magento, but a lot of non-product related content is coming from a headless CMS (in our case, Prismic). To build a content-rich online store we needed a great tool to pull the content from, Prismic has turned out to be a choice for our use-cases. The biggest challenges we have faced when managing content have been matching Magento Products and Categories with Prismic documents, Prismic and Magento routes, subcategories and in-store links, complex document schemes describing core configuration, blog posts, or navigation.

The Prismic implementation has however turned out to be very useful and is allowing us to reuse the majority of the document definitions and code handling the data fetching and data manipulation.

Hosting & Services

There are very few recommendations on how to host a Magento PWA and because of that we had to do a lot of investigation, and we had to do a lot of Try/Fail cycles to achieve the current state of the application. Sonassi for hosting, PM@ for managing the server instances and deployments, Rendertron for server-side rendering, Yarn for managing packages, GitLab for hosting git repositories, Sentry for capturing errors, React GTM for tracking, and so on.

Server Side Implementation

Magento is on its way to becoming PWA-ready, however, when building a complex PWA using the platform, you may end up with a need to change the backend side to fix some cart issues, checkout issues, filtering issues, adding support for a new GraphQL query, investigating some unexpected behaviour, or any other things not mentioned.

Server Side Rendering

As we need search engines to be able to crawl our ecommerce sites, we needed a proper solution. PWAs are usually made using one single static HTML file, as JavaScript renders the content, but this makes it more difficult for search engines to crawl. We are running a Rendertron instance in the background which is then using some caching techniques to serve static HTML content for search engines. We also had to implement a custom sitemap generator to display all routes from Prismic and from Magento.

Tracking

You may need to track errors or user actions in the PWA. Some are easier to trace than others. Sentry has turned out to be a very easy to use solution for tracking client errors. However, Google Analytics tracking has been more complex. As each page-view needs to be handled in a different way than on usual websites, this adds more complexity. We have faced issues with page views not being recorded, data missing in tracking events, or experiencing some events to be tracked multiple times instead of one time. The documentation is however very good and for a person with some experience with React and hooks, it shouldn’t be a huge issue.

Wrap Up

When it comes to creating a new Magento PWA, it is much more than creating a nice UI with an epic UX experience but there is much much more going on to make everything happen so expect the unexpected. All of the open-source work is still in development but is getting better and in the future, we believe, it will be easier than ever before to build a Magento PWA.

If you want to know more about our PWAs or want to chat through your ecommerce project, get in touch!