Magento 2 PWA and Which Magento version is necessary?

Question

Which PWA better for Magento 2?

Magento 2 PWA Studio? or vue storefront PWA?

Also If we use Magento 2 PWA Studio then it's only work on garter 3.0 Magento 2 version?

Thanks in advance.

Answer 1

This is quite a question of personal preference as both products have some differences.

PWA Studio is made directly from magento/adobe and has a react based frontend

VueStoreFront is using vuejs and is also compatible with magento1 or shopware.

Working for a german e-commerce hosting company I've seen very nice shops with both.

I see a tendency of VueStorefront being more asked for through but it's possible this differs with the country and the company size.

Not sure what you mean with garter but you can use PWA Studio with any magento 2.3 both enterprise and open source.

Answer 2

Answering your last question, you need to have minimum 2.3.1 to use magento2-pwa-studio but i recommend to upgrade your magento version to 2.3.3 to use the Magento PWA studio 5.0.0 which is the most recent and stable version version. check this

Answering your first question, (which PWA is better Magento PWA studio or VueStoreFront ?)

it greatly depends up on your requirements and your understanding, knowledge and comfortableness with the technology stack used by the different PWA offerings for the Magento platform.

just for the sake of comparing Magento2 PWA studio with VueStoreFront

TechStack

Magento2 PWA studio uses React, Redux (ReactHook), WebPack, GraphQl and ofcourse PHP and Javascript

VueStoreFront uses VueJs and Magento REST. It has a middleware (Vue Storefront API middleware) which plays a major role in the connection between your Magento2 store and VueStoreFront PWA.

pros

Magento2 PWA studio is an officialy supported and recommended PWA solution from Magento and great many people like Sergi and magento pioneers like Inchoo involved with this community project. It's getting more mature and more stable. Using GraphQl and webpack are handy and powerful, as well as magento2-GraphQl- modules are officially released and supported by Magento. GraphQl is very much flexible and powerful than REST which brings great chemistry between PWA and GraphQl. Well documented.

VueStoreFront is pretty much simple to setup, plug and run. It supports almost any magento 2 version (even the versions before 2.3.x and even Magento 1.x platform). It uses their custom REST API which acts a middleware between Magento REST APIs and PWA store front. VueJs has quicker learning curve than ReactJs for most people, i believe. It's also backed by great community and some of the renowned core Magento frontend presentation layer evangelists like Filip Rakowski.

Cons

Magento2 PWA studio tech stack built up with ReactJs has steeper learning curve for most of the Magento2 front end developers (atleast in the beginning days). I dont see much performance / caching optimizations though its a PWA, has good google lighthouse performance audit score and faster compared to Magento 2 KO js based store front.

VueStoreFront Its not an officially supported project by Magento (an Adobe company). GraphQl support is not available for all modules except products, categories, taxrules. (dont know much cons about this platform, may be some one who is using this platform can share with the community )

Other PWA solutions

Besides Magento2-PWA-Studio and VueStoreFront, there are also other competitive PWA offerings

ScandiPwa

Deity

FrontCommerce

Must Read

Introducing Magento PWA Demo by Inchoo

PWA & Headless Magento 2

Magento conundrum: Vue or React?

Hope am giving you the right direction to begin.

This answer will be improved in the future.....Thanks for the question BTW

Answer 3

Magento introduced the Magento PWA Studio project in Magento 2.3* version. So, you need to have Magento 2.3.* version for using the PWA Studio.

Answer 4

// PWA Studio version -> Magento version.
module.exports = {
    '8.0.0': '2.4.0 - 2.4.1',
    '7.0.0': '2.3.5 - 2.4.0',
    '6.0.1': '2.3.4 - 2.3.5',
    '6.0.0': '2.3.4 - 2.3.5',
    '5.0.1': '2.3.3 - 2.3.4',
    '5.0.0': '2.3.3 - 2.3.4',
    '4.0.0': '2.3.2 - 2.3.3',
    '3.0.0': '2.3.1 - 2.3.2',
    '2.1.0': '2.3.1',
    '2.0.0': '2.3.0'
};