Which PWA storefront should I use?

Konrad Jaguszewski
Published on 18 November 2022
Reading Time: 5 minutes

A PWA storefront seems like a rational step up from the traditional storefront, but the PWA concept is fairly new and there are not many storefronts that are built with PWA in mind.

It may be hard to decide which one of the available PWA storefronts you should choose. In this article we will cover some of the most popular PWA solutions for eCommerce and try to help you with choosing the right PWA storefront for your project.

What is a storefront?

A storefront in terms of eCommerce is a frontend of a store. It's a user interface that customers interact with. Thanks to it, customers can browse your catalog and order products. Without a storefront it would be very hard to reach customers and sell anything. Even the greatest eCommerce platform wouldn't generate much revenue without a good UI.

What is a PWA storefront?

A PWA storefront is a user interface of a store that implements Progressive Web App features (if you don't know what a Progressive Web App is, check this blog post). Thanks to that a PWA storefront should feel and look like a native mobile application. It should be installable, work in any network conditions (even offline), be fast and fully accessible.

A PWA storefront should provide engaging user experience and is a great way to step into the mobile world. Normally you would have to build a native mobile application to provide a better experience for mobile users, but with PWA you can build only one store that can be accessed through a browser, but can also be installed like a native mobile app and should work offline. This saves a lot of time and resources not to mention it's a great improvement also for the desktop users.

PWA Storefronts on the market

You already know what PWA is and how your business can benefit from having a PWA storefront. It’s still hard to choose the right storefront, so let's go through some of the most popular ones to help you with the decision.

Vue Storefront

Vue Storefront is a frontend framework for headless eCommerce. It supports many popular eCommerce platforms and is also the most popular PWA storefront - with over 100 official partners and a community of more than 5000 developers.

The modern tech stack includes Vue.js and Nuxt. It also makes use of ElasticSearch and GraphQL. It is created with the headless architecture in mind, so theoretically you should be able to connect it with any eCommerce platform.

There are two versions available - free, open-source Community edition and commercial Enterprise edition offering technical support, cloud infrastructure and additional integrations.

Integrations available in Vue Storefront

Currently Vue Storefront has open-source integrations available for multiple eCommerce platforms - Magento 2, Shopware, Shopify, Sylius, PrestaShop, Spree and Vendure.

Besides that, some integrations are only included in the Enterprise edition - BigCommerce, commercetools and Salesforce Commerce Cloud.

There are also CMS and payment providers integrations available, but most of them only in the Enterprise edition.

If you can't find your eCommerce platform in the list of available integrations, the platform agnostic approach should make it possible to develop the one you need.

Should I use Vue Storefront?

The size of the project, integrations list and the community behind the framework definitely places it in the area of interest when developing a new store.

The list of integrations is very impressive, and it's growing rapidly, but some of them are only available in the Enterprise edition (especially payment providers) and the open-source ones are in different stages of development.

Platform agnostic approach makes Vue Storefront potentially usable with any eCommerce platform, but depending on the needs of your project you may have to spend some time on developing required integrations.

If you are willing to take a risk and have a team of developers, then Vue Storefront may be a right solution for you. Thanks to the big community it's easy to find a solution to common problems. And the growing list of official partners makes me believe that Vue Storefront will keep growing and evolving.

Magento PWA Studio

If you are a Magento developer, then this name should be familiar to you. PWA Studio is a set of tools that helps with development of PWA storefronts for Magento 2. It's built in React and provides build tools, custom React hooks and components. The available tools should give you a solution for data fetching from the Magento backend, state management and values calculation.

As a showcase for PWA Studio a theme powered by it has been released - Venia. Venia is a demo storefront that uses all PWA Studio tools and combines it into a working theme. You can use Venia as a base for a theme development or just a reference.

Since it's a Magento-only solution the integration with headless Magento 2 shouldn't take much work.

Integrations available in Magento PWA Studio

Out of the box it doesn't provide many integrations. And the community engagement is not as big as with Vue Storefront, so it may be hard to find integrations for payment or shipping providers. You will have to rely on third-party agencies or your development team to build modules.

Should I use Magento PWA Studio?

Magento PWA Studio is a great collection of tools when you are planning to build a PWA storefront for Magento 2 from scratch. Venia theme is a good starting point, if you are willing to put a lot of resources into the development of missing features and integrations. For a basic Magento 2 store it can be sufficient, but if you are using a lot of custom or third-party modules it can take a good amount of time to build a fully functional PWA storefront.

ScandiPWA

ScandiPWA is another Magento 2 PWA. Similarly to PWA Studio it's built in React. However, ScandiPWA is only a theme, not a tools collection for building a storefront - but you can still customize it and it contains some helpful development tools. Out of the box over 350 Magento features are supported in ScandiPWA.

Its power is in the simplicity. Since it's just a Magento theme you should be able to get a working instance pretty fast. It's the most straight-forward PWA solution for Magento 2. It's easy to set up, doesn't require a qualified team of developers and can be used in your existing Magento 2 store without changes to the architecture.

Integrations available in ScandiPWA

ScandiPWA supports the most common shipping providers out of the box and offers integrations with payment providers through the extensions. There is a dedicated extensions marketplace that offers different integrations and additional features to the theme.

Unfortunately, some of the extensions in the ScandiPWA marketplace require installing other third-party Magento extensions to be fully functional. It means that they don't add functionality to the backend and need third-party extensions to work, so you may end up buying two extensions - one for Magento and another for ScandiPWA.

Should I use ScandiPWA?

If you have a basic Magento 2 store and don't have a team of developers, then ScandiPWA may be a good solution for you. It doesn't require much work for setting up and can be used on top of your existing architecture.

If the basic functionalities covered by ScandiPWA are not sufficient for you, you can add to them thanks to extensions marketplace. However, it may cost a bit more than buying an extension only for Magento.

Scandi PWA is straight-forward and probably the quickest way of enabling PWA features in Magento 2. It can be especially beneficial for small businesses without a development team.