Why Magento Merchants Are Moving to PWAs
Magento remains a common choice for open-source e-commerce, and increasingly merchants are asking whether it can support a progressive web app (PWA). The short answer is yes, but the more useful questions are why they should bother and which development route makes sense.
PWAs have existed for over five years, yet native apps still dominate both in total numbers and user downloads. However, adoption is accelerating. Research from Maximiliano Firtman on Chrome shows that the number of origins with PWAs grew by 170% in 2020, and Service Worker usage expanded by 38%. Still, by the end of that year only about 1% of websites included a Service Worker, and 2.2% had an installable Web App Manifest file.
PWAs have not displaced native apps to the extent once predicted, but analysts and major vendors see a clear trajectory. Gartner’s guidance on digital commerce is explicit:
“Progressive web apps are a cost- and a skills-effective way to reach a wide audience with a close-to-native app experience that supports the full customer life cycle. Application leaders for digital commerce technologies must plan for PWAs when designing digital commerce experiences.”
Large players have taken this seriously, with Amazon’s Luna, TikTok and Tinder among those deploying PWA technology. The conversion data backs the decision. Trivago reported more than a 97% increase in click-outs to hotel offers after launching its PWA, and an analysis by divante of 30 PWA case studies shows an average 36% larger mobile conversion rate compared with native applications.
Smaller merchants see similar gains. Magento PWA statistics record a 169% conversion increase for The Butcher of Blue and 162% for Rooted Objects following their launches. The German furniture store Garten-und-Freizeit, running a VueJS-based Magento PWA, achieved nearly a 40% bounce rate decrease and over 350% additional active users.
These results make the case for PWAs as a viable, often superior, alternative to native apps for e-commerce—particularly for merchants already invested in Magento.
Why Progressive Web Apps Make Sense For Magento Stores
Progressive web applications bring a set of practical advantages that matter specifically for large Magento e-commerce operations. Here is what the switch to a PWA actually buys you.
One Codebase, Multiple Devices
Development costs for a PWA are lower than for a native application because the same code base works across platforms. You write the code once, rather than maintaining separate Android and iOS implementations. That also removes the need to tailor the app to different device requirements, which shortens the time-to-market considerably.
Searchable Pages And No Installation Barrier
Because PWAs run in browsers, their pages have standard URLs. Those pages can be crawled, indexed, and ranked by search engines, which is a genuine advantage for e-commerce SEO — product pages can grow organically. Native apps installed from app stores don't have this property; their product pages are invisible to search engines and can't be promoted independently.
Users don't have to install a PWA from the App Store or Google Play. Visitors who open the store from a smartphone browser may not even realize they are using a progressive web app — they simply experience a site that performs well. For those who want the convenience of a shortcut, PWAs can be added to the home screen with an icon that looks native but takes up negligible space. A native retail app, by comparison, can consume 30, 50, or even 100 MB of internal storage.
The number of users who formally "install" a PWA is beside the point. Most mobile shoppers won't notice the difference, and well-executed PWAs exist to convert, not to count downloads. Google's own statistics back this up: half of smartphone shoppers are likely to visit a store's mobile site because they don't want to download an app from the marketplace. That dynamic matters especially for one-time purchases, so optimizing for mobile browsing — speed and UX — is the real goal.
A Design Language Built For Use
PWAs borrow the usability principles of native applications: navigation, element placement, and overall look feel familiar to anyone who has used a downloadable app. The difference is that this experience now lives in a browser with a mobile-first focus. Alibaba's path illustrates the trend: the company moved from a regular online store to a native app and then added a PWA to cover browser-based shoppers. Comparing the two on an iPhone, the icons look identical on the home screen, but the native app weighs 183.4 MB — which is why the browser version is often the more practical choice.
The Alibaba PWA keeps the look of a native application, showing key elements above the fold, using screen space rationally, and placing a bottom menu bar within easy thumb reach. The native app differs only slightly in design and element choice; both are equally easy to navigate.
Speed Gains And The Headless Path
Modern frameworks, advanced caching and rendering, and API-based data transmission can make a properly built PWA dramatically faster than a traditional Magento store. Speed has direct business consequences:
- 25% of users abandon a page that takes over 4 seconds to load.
- Each additional second of load time cuts conversion rates by nearly 4.5%.
- 7 out of 10 users say poor page speed pushes them to buy from a different store.
Many Magento stores struggle with performance because they are a decade old and rely on monolithic architecture. Headless architecture offers a more modern alternative: the frontend and backend are decoupled and communicate through an API such as GraphQL.
That decoupling supports multiple frontends for different touchpoints — a native app, a PWA, or interfaces for devices like smart speakers or smart refrigerators — all attached to the same backend and database. Each frontend can be designed for a specific device type, improving UX, performance, and conversions. Changes become easier and faster to implement when the store is decoupled.
A PWA is not a mandatory step to headless commerce, but it is a natural entry point. Building a Magento PWA means splitting the monolithic architecture. A well-built PWA improves both desktop and mobile performance, which matters because those two touchpoints drive most conversions for Magento stores today. Later, adding another "head" — say, for smart TV shoppers — becomes much simpler once the decoupling is already done.
Notifications, Offline Mode, And Honest Limitations
PWAs also support push notifications, a feature once reserved for native apps and crucial for retention strategies. Quality push messages can boost retention rates by 3 to 10 times.
Offline capability is another feature that has crossed over. Users can continue browsing cached parts of the site when the connection drops, so that advantage no longer belongs exclusively to traditional apps.
Progressive web apps are not flawless, particularly on iOS, where some restrictions remain — such as partial absence of in-app payment features. And building a Magento PWA is a genuinely time-consuming challenge from a development perspective. But those caveats hold for native apps and site optimization alike, and the feature set for PWA-based online retail continues to expand.
Weighing PWA Against Native
Native applications still hold an edge in certain sectors, particularly games and social media. For e-commerce, however, the question is whether your customers will actually install and repeatedly use a dedicated app. Downloading a heavy app from a marketplace is a significant barrier, and many users will delete it to free up storage.
A PWA remains accessible directly from the browser, which suits shoppers who avoid installing anything on their devices. That said, there are e-commerce cases where native apps have driven sales effectively. Some businesses run both a native app and a PWA to cover different user preferences.
Alibaba, for instance, offers repeat buyers incentives for purchasing through its native app, while also maintaining a PWA. The Tally Weijl online store similarly provides both options. Large brands with ample budgets often support two solutions, whereas smaller retailers with tighter resources typically choose a single approach.
Deciding between a PWA and a native app ultimately depends on your audience and business model. If the goal is to grow mobile commerce share and improve mobile conversions, the right choice varies by case, and each situation demands individual assessment.
Benefits of a PWA Build
Adopting a PWA for your Magento store improves both appearance and performance across desktop and mobile. Mobile shoppers can save a home-screen shortcut for quick access, while desktop users still get a comparable experience.
Rebuilding your store as a PWA also separates the backend from the frontend. This shift toward an API-based, headless architecture positions your business for the next five to ten years, when purchases may happen across a wider range of devices, including smart TVs and home assistants. A headless setup allows you to integrate support for those additional devices later without reworking the core infrastructure.
Three Development Paths for a Magento PWA
Once you've committed to building a PWA on Magento, the first major decision is choosing a development strategy. There are three primary routes: coding from scratch with a progressive framework, customizing an existing toolkit, or combining the two. Each path carries its own trade-offs in terms of time, complexity, and flexibility.
Building Custom With a Modern Framework
The from-scratch approach involves building the entire PWA using a progressive framework such as ReactJS, VueJS, or AngularJS. This path is best suited for developers with prior PWA experience, since you are responsible for the full application logic, structure, architecture, and code assembly.
The main advantage is the ability to implement highly customized features that an out-of-the-box toolkit cannot support. For example, a store offering product personalization with a multi-step customization builder requires custom coding to achieve such functionality.
Seven Steps to a Custom Build
A typical process for building a custom Magento PWA can be condensed into seven steps:
- Making system adjustments, such as configuring Ubuntu and installing the Node.js runtime environment.
- Installing a progressive framework like ReactJS, and implementing server-side rendering (for instance, via Razzle).
- Adding essential libraries, including GraphQL and Redux.
- Shaping the app’s architecture, using folders to maintain structure and navigation.
- Putting the app together by setting up Redux and GraphQL components, managing storage (reducers), configuring Razzle for component loading, and defining URL paths and routes.
- Assembling the UI parts: header, login, account, navigation menu, dynamic page elements, and footer.
- Creating a backend module with files and handling backend GraphQL queries.
Practical Considerations for Custom Development
Service workers are a common pain point. These JavaScript files handle caching, act as proxies for HTTP requests, and enable push notifications and offline functionality. A recommended approach is to use a Razzle JS plugin to configure them properly. For offline mode, pairing the service worker with the Cache API—prioritizing cached data over network requests—is a solid strategy.
Rendering is another area that requires careful planning. Client-side rendering needs optimization to ensure fast mobile performance, but modern frameworks supports both client- and server-side rendering. Server-side rendering can be configured via a headless browser (like Puppeteer or Selenium), a proxy, tools such as Next.js or Razzle, or a custom Node.js solution. Proxy-based implementations yield strong results but are time-intensive, while dedicated tools are simpler. A custom Node.js setup is worthwhile for very complex builds.
Architectural mistakes early on can be costly. Components that are too large hurt performance and trigger rerendering. Likewise, large GraphQL requests can slow down the app; keep the number of requests minimal and use Varnish to cache GraphQL calls when possible.
Pros and Cons of the Custom Approach
This is the right path for PWAs loaded with custom features or non-standard functionality. However, it is not for newcomers. Since everything falls on the developer, errors or overlooked requirements can lead to substantial code rewrites, making this a high-effort, high-risk approach.
Customizing an Existing Toolkit
Ready-made PWA toolkits are a more practical option for developers without prior PWA experience. These packages offer universal code solutions, making it easy to build standard Magento PWAs without coding every detail from scratch. However, the universality of the code becomes a hindrance when a project requires non-standard features—custom checkouts or unique business logic are hard to achieve without fighting against the toolkit’s assumptions.
The Main Magento PWA Toolkits
Magento PWA Studio is the official Magento toolkit, built on ReactJS. It provides ready-made components and front-end architecture. Notably, its non-monolithic design lets you use only the components you need. The framework and architecture come pre-configured, saving you from initial setup mistakes. Key parts include the PWA Buildpack CLI tools for environment setup, the Peregrine package with React hooks and components, the Venia package for store and UI components, UPWARD-JS for the server between the PWA and Magento, and project documentation.
Scandi PWA is a developer-oriented theme layered on top of Magento, offering ready-made components that can be modified. It covers a broader range of use cases than PWA Studio, with an extensive roadmap covering configuration basics, catalog and content handling (from simple to configurable products, price and stock management), client features like cart, login, orders, and wishlists, marketing tools such as feedback, product lists, and coupons, search and navigation features (menus, breadcrumbs, layered navigation, quick search), and checkout functionality including payment and shipping methods.
Vue Storefront is an open-source, headless solution built on VueJS that integrates with multiple e-commerce platforms, not just Magento. Its ready-made blocks include server-side rendering, the Vue Storefront API, CMS API, ElasticSearch support, Vue Analytics, and integrations for payment systems like PayPal, Stripe, Klarna, Mollie, and Adyen. A caveat is that Vue’s documentation is only partially complete, which can complicate installation and maintenance.
Toolkit-Based Development Process
Development with a toolkit is more about overriding than building from zero. With Magento PWA Studio, the workflow is shortened to four steps:
- Making system adjustments—configuring Ubuntu, installing the Node.js environment, and other prerequisites.
- Setting up a new project via the PWA Studio Buildpack.
- Overriding the default components from the Venia theme (ranging from the logo to menu parts) to fit your needs.
- Creating a backend module and handling GraphQL queries.
Tips for Toolkit Users
When overriding standard components, mind the styles. Unused default styles add file weight, so remove unnecessary code blocks to keep the PWA lean. GraphQL can be tricky since Magento PWA Studio rarely uses query fragments. Splitting large queries into smaller reusable parts is a potential workaround, but it is not universally applicable—using it in listings can backfire. Also, avoid mixing up talons and hooks: hooks are reusable, while talons are specific to context. A detailed explanation is available in the official documentation.
Weighing the Toolkit Pros and Cons
Toolkits are ideal for beginners or for standard storefronts where speed and reduced costs matter more than customization. The provided framework and architecture minimize early errors and setup time. On the flip side, any project that deviates from the assumed standard will face difficult code modifications. Excessive pull-in of unused elements can bloat the app, slowing load times and reducing overall performance.
The Combined Approach
For many teams, the hybrid model is the best of both worlds. Use the toolkit’s pre-built framework, architecture, caching, routing, and service worker handling, but write the frontend code yourself. This approach saves time on standard functionality while allowing custom code for the unique parts of the storefront.
The combined method introduces additional overhead: you must study the toolkit’s offerings in detail and sort through your code for compatibility. You may still end up with excess code inherited from the toolkit, which requires careful review and removal to optimize the PWA. Mixing your code with framework abstractions can also generate bugs that require untangling.
Weighing the Approaches
Magento PWA development is a significant undertaking, and the choice between extending a storefront theme and building from the ground up carries long-term consequences. A blended strategy often proves the most pragmatic: start with an established toolkit to handle the boilerplate, then apply custom code only where your requirements genuinely diverge from the out-of-the-box behavior.
This hybrid path reduces the risk of reimplementing mundane features while still leaving room for the unique interactions and workflows that differentiate a store. In practice, it means accepting the architectural conventions of the base theme for common components, while reserving deeper customization for checkout, product discovery, or account management—the areas where most merchants see conversion impact.
For teams evaluating the cost, remember that the initial build is only one phase. Maintenance, upgrades, and the ongoing addition of features will dominate the lifecycle. A codebase that closely tracks the upstream theme is cheaper to maintain; a fully custom one offers more control but demands continuous internal ownership of every dependency.
Further Reading
- How To Optimize Progressive Web Apps: Going Beyond The Basics
- The Basics Of Creating A Magento Module
- How To Design For High-Traffic Events And Prevent Your Website From Crashing
- Lesser Known Uses Of Better Known Attributes
