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”.
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.
Our initial set up with Magento PWA Studio
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.
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.
