Progressive Web Applications (PWAs) are the next big thing in eCommerce. This topic has been on everyone’s lips and under everyone’s fingertips from the initial conversations around Magento 2 frontend and the introduction of the headless concept.
If you are a merchant considering this new frontend concept, you may be wondering what the fuss is all about, whether it makes sense to invest in PWAs, and how big of an investment should you plan? Here is a quick rundown of the main questions and answers for anyone still on the fence about PWAs in Magento, from a merchant’s perspective.
What is the main advantage of PWAs as opposed to native apps or a responsive website?
PWAs are native-like applications, they can’t mimic all the native apps features, but they are quicker to deploy, no need to go through lengthy approval processes, updates are done on the single instance (so, you don’t have to update/fix an Android app, followed by the iOS one, and then worry about the website itself independently… so everything is done from one place).
Perhaps the most important advantage from your customer’s standpoint – there is no need to go to the App Store or Google Play to download the app – it can be simply added to Home screen from the browser. And you get them all for a fraction of the cost of what it would take to build standalone native apps.
PWAs also work when your users/customers are offline, which is something responsive websites can’t offer.
Take a look at the graphic below comparing PWAs to native apps and responsive websites.
So, do PWAs only bring value for mobile users? What’s the advantage if I have mostly desktop customers?
Primary use cases are currently evolving around mobile PWA solutions and the emphasis is on the benefits for mobile users. However, with the performance improvements that PWAs bring, the desktop interfaces will benefit equally, so your website visitors will see performance improvements regardless of the device from which they are accessing your website.
Additionally, desktop PWAs are also becoming a thing, and a number of browsers already adding support for desktop PWAs, so this will be the next step in creating full PWA websites.
And those who adopt PWA as a concept on time, will have fewer challenges going full-PWA as the time goes by.
But I don’t need the native apps – I didn’t have them before, why start now?
While you don’t feel you need the apps, your website visitors are almost certainly accessing your website via their smartphones (have you checked your Analytics data?). And as a rule of thumb, those sessions usually convert at a much lower rate than desktop sessions, or in other words, users choose a more comfortable experience for the purchase.
With PWAs, the mobile experience can be much better optimized for the mobile users and ensure higher conversion rates. And this is something that can and should happen even if your customers never use the native-like features of the app (if they never add it to their home screen).
The main benefit for them is the loading times and ability to access and use the website even when offline or in places with poor connectivity.
How are PWAs exactly created? Are developers using the theme of an existing Magento site as a starting point and then some customizations are made to it?
Not exactly. You can use the core, backend features of Magento 2 with PWA, those don’t need to be changed, perhaps some logic will need to be added to features where APIs are used. As for anything on the frontend – PWAs are not using Magento theme layouts and structure.
Essentially, the entire frontend experience is re-done (if comparing with the old Magento themes concept) with PWAs.
Should I go with Magento PWA Studio? Why not Deity, Vue Storefront or ScandiPWA?
You may have heard that there are different products, services and tools to help you get started, and while you don’t necessarily need to go into technical details about every option out there (you should have a quality partner to help you make this decision), it is good to at least understand what’s out there.
Both Deity and Vue Storefront have quality solutions, ScandiPWA is out there, and PWA Studio is a set of tools that allow merchants and developers to create their own custom interfaces. The existing state of the solution, including the showcase theme called Venia, is developed to the point where agencies can work on live projects for merchants, even though further customizations will be required for each client (which is true for any PWA solution out there).
With Deity and Vue you can get a faster head start, however you still need assistance of developers who know their way around PWAs and Magento. Additionally, we can’t know in which way these outside solutions will evolve or pivot.
In any case, if you opt to go with any of these solutions, I’d simply quote Eric Erway (Sr Product Manager at Magento, an Adobe Company) on this:
Ultimately we all win, especially customers. PWAs are the future and working together on standards will make this easier, faster and less expensive in the future at a @Magento community. ??
— Eric Erway (@ericerway) December 5, 2018
As for Inchoo, we decided to join Magento’s PWA Studio as contributors. We like the fact that a strong community support for delivering the basic product and innovative solutions is being nurtured and well organized.
PWA Studio should always be compatible with the latest Magento product releases and architectural changes (for instance GraphQL which replaces REST as of 2.3 version), which we can’t say for the other solutions. We are also betting heavily on React rather than Vue library because we see it as a more powerful and more flexible solution that can work with the powerhouse that is Magento in the eCommerce world.
How much does it cost to get the full eCommerce website built with PWA?
The actual cost depends, much like for the “regular” eCommerce projects, on your project needs and requirements, and in particular on how much of the already PWA-ready components you (with the assistance of a Magento Solution Partner) will be able to (re)use, and how many of the more complex workflows and features will need to be implemented.
This is why we would advise you to get in touch with solution partners who will be able to evaluate your project and prepare time and cost estimates. However, within the investment cost in the new, PWA-driven eCommerce solution, you will also get native-like apps for Android and iOS users across all devices (tablets, smartphones) with no additional cost into creating standalone apps.
The benefits outweigh the initial costs tremendously, in light of future upgrades as well, as the codebase will need to be updated in a single place, and not for each operating system separately (which would be the case if you go with native apps approach).
I’m running a Magento 1 website and I’m still on the fence about Magento 2. Can I take advantage of the PWA concept or will I have to upgrade to Magento 2?
Magento 2 is prepared for PWA on architectural level and it is more native to the way the software was intended to be used. With the APIs available in M2 as opposed to M1 it is possible to create the PWA solution much faster and with less modifications to the core.
While it would be possible to create a PWA solution for a Magento 1 website, this is not something we would advise. For this to work, much more additional preparation work would be needed, or some additional 3rd party extension that would allow for PWA concepts in M1 should be used. If that is the case, the M1 installation would most likely be less upgradable and it would be much costlier to maintain it over time. On top of that, M1 is not going to be supported for much longer (June 2020), so it’s questionable from investments perspective whether a full PWA project should be based on M1 core.
Our suggestion is to use Magento 2 for any PWA project considerations.
Who should I contact to get the conversation started?
You can start right here ?? We have recently launched a Magento PWA demo store!.
— Inchoo (@inchoo) March 4, 2019
Contact us using this form and we will get in touch to gather the basic information about your project to suggest the best approach.
Check out our PWA demo store!
Additional useful links on the topic:
Progressive Web Apps – Google Developers
Magento 2.3: New Tools to Fuel Your Growth in 2019 – Magento blog