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.
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.
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.
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
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.
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!