What is Magento PWA and Why do you need one?

Aug 13, 2020 Update: UB PWA Mega Menu v1.1.9 is fully compatible with Magento PWA Studio v.7.0.0.
Jan 10, 2020 Update: Check out UB PWA Mega Menu v1.1.8 that helps you build a flexible mega menu on top of Magento PWA Studio. It uses GraphQL, React & other technologies as part of PWA Studio stack. Check out the features & demo here
.

Magento has introduced Magento PWA studio for some time. It is supposed to bring us a suite of tools which you can use to build online stores that behave like apps.

Why is PWA growing in popularity? Will it soon dominate the Magento 2 landscape? And where you can learn more about the Magento PWAs? This article will shed some light on those questions.

What is Magento PWA?

PWA stands for Progressive Web Application which was originally talked about by Google back in 2015. A PWA is essentially a website that can be made to look and feel like a mobile app on a smartphone, tablet delivered through the web. It allows for an app-style experience such as notifications, offline use.

Along with this trend, Magento 2 is becoming a Progressive Web Application platform. Magento has announced the PWA Studio, a set of tools used for developing and maintaining a PWA storefront on top of Magento 2.

Why does Magento PWA Studio matter?

In it’s core, Magento PWA Studio is expected to be the next big thing for the mobile web.

Instead of separate websites and apps across iOS, Android, PWA allows to create an app icon just like a shortcut to the website on the user’s device. PWA is still just a website, however it can bring native-app-like performance and the benefits of mobile user experience.

Compared to a classic App Store model, for the most part, the native app adds duplication of development effort across platforms -- websites and apps. It also gives businesses a hard time attracting and retaining users, even for ones who invest tens of thousands of dollars developing and promoting the applications. In addition, another critical obstacle still exists -- both mobile apps and responsive web don’t convert well. As a consequence, online stores need a new set of solution to tackle such obstacles more efficiently.

This is where Magento PWA Studio come into the picture. You will be able to build PWA on top of Magento 2 with all benefits that make a PWA great over traditional web shops:

  • Fast load time (The performance is the key to PWA Studio. Data shows that 53% of visits are abandoned if a mobile site takes longer than 3 seconds to load)
  • Accessibility regardless of network conditions
  • Offline mode

Who does Magento PWA Studio affect?

It’s the benefits to both developers and customers. Essentially, PWA Studio allows you to make online customers’ purchase journey easier and faster. User can use the website as an app by simply adding the website to the home screen. If not, user can still return to the website through the browser. The websites remain searchable by search engines.

From a developer’s perspective, PWA Studio is a new front-end architecture which allows you to build PWA on top of Magento and manage all channels via one code base, one deployment, and app. It will include a new PWA optimized reference theme, called “Venia”.

Magento PWA Studio - Service Workers

Service workers supported by browsers -- Source: Caniuse.com

PWA Studio leverages modern browser features, such as service workers (a service worker is a script that your browser runs in the background which are responsible for pulling in notifications, cache material, and store data), and a web app manifest (centralized place to store meta information about your store). PWA studio also requires GraphQL which is part of the development version of Magento 2.3. Taking into account the current suite of tools that PWA Studio provides, it will bring new features like push notifications, full-screen mode, offline mode, secure payments etc.,

When is Magento PWA Studio happening?

Magento will be releasing PWA studio as part of the Magento 2.3 release this November, but its beta version is currently available here.

Although PWA Studio is still in early development, it shows a lot of promise by providing possibilities to decouple the frontend from the Magento 2 backend. It is supposed to give frontend developers a flexible toolkit for creating PWA themes for Magento 2.

How do I start using Magento PWA Studio?

You can get your hands on the Magento PWA studio (beta) here. While it does not offer full PWA functionality yet, it’s enough to get familiar with the technology.

Magento PWA Studio - Initial Venia

Our initial set up with Magento PWA Studio

Magento PWA Studio - Packages

Current Magento PWA Studio packages on our testing instance

The PWA studio documentation is a good place to start with that offers you all sort of technical guidance, tools, techniques, and components to build better-working PWA frontends.

(Dec 18, 2018 Update) You can get started with our demo shop below which was built fully on Magento PWA Studio (beta). Please note this demo remains a work-in-progress and does not offer full PWA functionality yet.

 Magento PWA Studio Demo

Conclusion

At Ubertheme, we believe it’s only a matter of time before Magento 2 entirely shifts it into a PWA platform and natively supports headless Magento 2. PWA is definitely a step in the right direction to build online stores with app-like experiences, all with significantly less development effort than a traditional standalone app. Since PWA studio is a work in progress, I suggest heading to the PWA Studio Github repository to keep yourself in the loop.

Written By

Head of UberTheme Team

Comments
  • Katarina Grumy

    Great article! Thanks for sharing. I’m glad that Magento supports a PWA technique. It’s really great!

  • Ashwin Parkar

    How would Magento PWA would affect my growth and performance of my. I have seen the article https://www.cloudways.com/blog/magento-pwa/ which has covered some details about it. Can you please cover it in detail on your blog?

  • Katarina Grumy

    I think that PWA technology is necessary. I personally use some progressive applications with my phone: beauty, cook, and marketplace PWAs. They are useful and take no place/memory. Moreover, PWA development cost less than mobile app: developing both an Android and iOS app can cost $25k – $80k while progressive application can be developed for a fraction of this cost – at around $7k – $20k, depending on the style and functions you include.

    • Hi Katarina,

      Thanks for stopping by.

      For Magento, PWA is a broader e-commerce stack with React, GraphQL etc., And we can expect a beginning of the next-gen storefronts once the PWA Studio makes new progress in the coming time.

      Regards,
      Ubertheme team

  • elaine ko

    Hi. Recently I’ve read an interesting article about the best examples of progressive web apps (PWA) in retail and ecommerce in 2019 and found out that a case study from Google reveals that the implementation of a Progressive Web App led to a fast and reliable mobile web experience and delivered a 76% increase in their conversions across browsers. Moreover, the number of monthly users grew by 30% on Android and by 14% on iOS.

  • Kadam Technologies

    Your Information help many visitors..
    Great article! Thanks for sharing. I’m glad that Magento supports a PWA technique.