PWA integration with Magento 2 and its nuances
Our previous article described PWA and its benefits for eCommerce projects in detail. There is no doubt that it really is the future of eCommerce. So this time, we want to focus more on applying this technology in combination with Magento 2, namely the solutions that will make it happen (regardless of whether you use Adobe Commerce or Magento Open Source).
We at Default Value know a lot about PWA development and have had pretty interesting cases with it. So let’s go!
Why should you apply PWA to your Magento stores?
Before we take a look at PWA integration tools, let’s talk a little bit about why we should apply this technology more specifically to Magento 2 stores:
- Compared to standard apps, it costs much less to develop and maintain PWAs on Magento 2 because, in the case of apps, you have to organize development separately for Android and iOS. In contrast, PWA uses a single codebase and is compatible with both platforms.
- User experience on mobile devices improves noticeably if we talk about using PWA, which is confirmed by many owners of Magento 2 stores who have already managed to implement this technology.
In addition, we should not forget about the benefits that we noted in our previous article:
Well, that all sounds like a good reason to implement PWA. Let’s see what can help us do that.
PWA and eCommerce
Developing a progressive web app has its nuances. Before jumping into it, make sure that your online store on Magento meets the following requirements
- You are not using HTTP but a secure data transfer protocol, HTTPS.
- Each page of the site has a separate URL.
- The coding of each page of the site is adaptive.
- The version of Magento you’re using is 2.3 and higher.
If you meet all these points, you need to choose an integration tool. We can choose from three options.
Magento PWA Extensions
When integrating PWA with a Magento store, the first things that come to mind are paid and free extensions from all sorts of vendors on the official Adobe marketplace. They take just a couple of hours to install. Of course, everyone likes to save money, and paid extensions usually cost about $100-150, but in our experience, not all PWA modules are suitable for eCommerce projects because of the limited functionality—often, it is not even half of our above list of benefits, but 1-2 features. Therefore, we recommend carefully examining the selected extensions for the needed functionality when choosing this option.
Magento PWA Studio
Magento PWA Studio is a tool that is compatible with Magento version 2.3 and higher. Its clear advantage is that it takes a few days to deploy, and the tool offers connectivity to the backend via APIs and extensive functionality that meets Google PWA requirements. However, for the most part, Magento PWA Studio is only your PWA development assistant, and you’ll need to do a lot more work to see it through.
Magento 2 PWA Theme
In addition to the tools mentioned above, there is also Magento PWA Theme, which is based on PWA Studio, GraphQL, and ReactJS. There is no need for additional third-party solutions, which is a plus—Magento PWA Theme provides all the necessary PWA functionality and API access.
Despite this advantage, many store owners who have already used PWA for their projects report that this solution may be inferior to PWA Studio due to better optimization of the latter. Also, if you use additional extensions or custom functions, you will need to check whether they are compatible with PWA and update the API if they are.
Third-party PWA solutions
In addition, there are also 3rd-party PWA solutions for Magento (or compatible with Magento) that are worth mentioning – Vue Storefront and ScandiPWA.
Vue Storefront
Vue Storefront is a Vue.js-based and opensource frontend solution that covers many business needs in mobile commerce through an API-first approach. It’s compatible with Magento and, in addition to the standard benefits of fast page loading, a smooth and pleasant shopping experience, and so on, Vue Storefront supports the largest number of integrations compared to PWA Studio and ScandiPWA and is compatible with many payment systems.
It’s also worth noting that Vue Storefront has the most votes on Github, even compared to PWA Studio, as well as a huge developer community, which is a great advantage. On the other hand, sites that use Magento PWA Studio have higher ratings.
ScandiPWA
ScandiPWA is also a PWA theme for Adobe Commerce and Magento Open Source. This solution has more than 350 features, is open source, and offers a very easy and convenient migration process without the need for middleware. It’s worth noting that companies developing PWAs for their eCommerce projects based on ScandiPWA have high online sales volumes. In addition, ScandiPWA is the only company that created its own extensions marketplace for PWA. There are currently 49 of them, and that number is gradually growing.
Unfortunately, the number of integrations with payment services is lower than Vue Storefront’s. Also, if you need to manage multiple stores from one shell, it is worth paying attention to Magento PWA Studio because, in ScandiPWA, this function still has flaws and errors.
Conclusions
Even though PWA development is much easier than creating an app, applying this technology to Adobe Commerce can have its pitfalls. But it is a process that is definitely worth the effort. For this reason, if you’re not confident in your abilities, we’re happy to help you with this task. Leave an application in the feedback form—the future is not waiting!
