The PWA Game Plan
March 11, 2020
It was early 2016 when the buzz began: Progressive Web Apps. The next major development in eCommerce! I was immediately enthusiastic because PWAs open a whole new world of possibilities for the front-end customer experience. This was something I wanted to learn more about! Because the technology was in its early stages and knowledge was limited at first, my team and I decided only to build a demo environment halfway through 2018. This was essentially our proof of concept (POC) with Magento PWA Studio technology.
Why then? Because I like to be a pioneer, and I believe it's important to invest time in new opportunities such as this. Experius is also a pioneer in new developments. By being an early adopter, we are able to offer our clients better eCommerce solutions that give them an edge in a competitive environment. In turn, they can offer their customers a fast and reliable shopping experience.
The POC was the evidence my team and I needed that we could build a PWA with Magento PWA Studio – in our own way. The next challenge was to find a client that was willing to embrace this innovative approach to transforming its online store and – more importantly – was hungry to drive greater advantage in the market and maintain it in the coming years.
My team and I were able to attract the enthusiasm of Eleganza, one of Experius’ clients, and so we could get started. We made a concerted effort over three months to launch the PWA shop before MagentoLive Europe in Amsterdam. This meant Experius was the very first in the Netherlands to build a PWA online store on Magento PWA Studio and launch it. The project offered my team exciting new challenges, which they met head on to deliver results of which we're all incredibly proud.
Although we launched the project within three months, not everything went as smoothly as we would have liked. In recent months, I've learned a lot about both Magento PWA Studio and myself as a developer. I'll share my key technical and personal insights below. I hope you can benefit from them.
This was perhaps one of the greatest challenges I faced. While Google normally delivers a complete page to the user from the server, this isn't the case with a PWA. With Magento PWA Studio, a PWA is composed on the client side. This makes it more difficult for search engines to index the PWA. In the end, my team and I resolved this by using a customised version of Rendertron called SeoSnap that we open-sourced This allows us to serve prerendered versions of the static pages to bots. This means Google can properly index the PWA and lets you have perfect SEO values.
Want to use multilanguage functionality? Make sure you take this into account from the start. My team and I added this later, but it was a lot of work. You forget things like making all text in components translatable. Or you face problems that could have been dealt with more easily at an earlier stage. That includes proper localization detection and switching between stores with and without store codes in the URL while making sure to save them to SW cache properly per language. Incorporating multilanguages from the start saves time and frustration in the end.
Clear The Cache
In addition to multilanguage, it also makes sense to set up the “Services Worker” as part of the process from the start. At the end of the project, my team and I discovered that we couldn't invalidate the Apollo persistent cache properly. We then decided not to cache all our GraphQL queries in local storage, but to have them captured by the Service Worker. The lesson is: Make sure you think about this in time, that you know what you're doing, and that you can clear the cache at all times. Otherwise users will see the same data again and again, and that's no use to them.
Choose Your Strategy Based On Your Skill Level
It's important to decide your strategy before you start building a PWA. You can do so by carefully estimating your own skill level and honestly assessing your abilities. For example, knowing we had a tight deadline, we decided that we didn’t want to start from scratch and chose to build on top of the Venia theme in Magento. That’s why I’ve created a Fallback system called Fallback Studio (open source) on top of Venia that allowed for rapid development of the Eleganza case. It’s basically the same principle that we know from default Magento theming: You can stack themes on top of themes.
Keep It Simple
You can build really amazing things with Magento PWA Studio, but the trick is to keep it simple at first. Make sure you have a basic PWA that works for both the client and your development team. Once this is live, you can add functionality.
It's also important to avoid overcomplicating things during development. For example, I had to deal with the Magento checkout at a certain point, and I found myself overthinking everything. Once I realised the only thing a checkout does is to constantly send a form to the backend, I saw that you can often deal with problems in a simpler way. Tip: By thinking simply and sticking to the core, the most complex technical issues are often not as hard as they seem.
What You Give Is What You Get
If you actively participate in the Magento community, your Magento PWA Studio project is likely to be more successful. Everyone was a beginner once and faced certain problems, and this means the community is a great way of dealing with these issues. But don't just ask questions — help others, too! If you help others with their problems, you'll notice that they're more likely to help you, too. You also learn a lot yourself from the challenges and solutions of others. This means that, thanks to the Magento Community, you can also gain many new insights. So it's advisable and fun to play an active role.
In the end, Magento PWA Studio is an amazing toolset that helps you create PWAs without having to do the heavy lifting yourself. If you’re facing any problems or issues, please get in touch. I’d be happy to help!
About Jordan Eisenburger and Experius
Jordan has worked within the Magento ecosystem for five years. He is PWA tech lead at Experius and is a real innovator. Besides that, he is the first official Maintainer of Magento PWA Studio. Experius is a fast-growing eCommerce agency in Utrecht, the Netherlands. It develops, builds, and implements successful B2B and B2C Magento Commerce solutions for their customers.