Progressive Web Apps promised Magento stores an app-like experience without an app store. That promise still holds, but the landscape around it has changed. Adobe now steers new storefront projects toward Edge Delivery Services, the free Hyvä theme has made fast server-rendered storefronts far more affordable, and many merchants discover that a full PWA is more project than they need.
This guide explains what a PWA really is, where Magento's PWA Studio stands today, how to choose between a PWA, Hyvä and other options, and how to build one if a PWA is the right call.
What Is a Progressive Web App?
A Progressive Web App is a website built with modern web technology that behaves like an app. Three building blocks make it work:
- HTTPS, which is required for the other features.
- A web app manifest, a small file describing the app's name, icons and colours so it can be installed on a home screen.
- A service worker, a script that runs in the background and handles caching, offline behaviour and push notifications.
- Installability. Shoppers can add your store to their home screen without visiting an app store.
- Fast repeat visits. Cached assets load instantly.
- Limited offline support. Previously visited pages and an offline fallback screen can work without a connection.
- Push notifications. You can re-engage customers with order updates and offers, with their consent. On iPhones, web push works only for PWAs added to the Home Screen.
PWA, Headless and Hyvä: Clearing Up the Terms
These ideas are often confused:
- Headless describes an architecture: the storefront is a separate application that talks to Magento through APIs, usually GraphQL. Magento keeps handling catalog, cart, orders and customers.
- A Magento PWA is usually a headless storefront (often built with React) that also includes PWA features.
- Hyvä is a different approach. It stays a server-rendered Magento theme, replacing Luma's heavy JavaScript with Tailwind CSS and Alpine.js. It is fast and does not require a separate frontend application.
Where PWA Studio Stands Today
PWA Studio is Adobe's official open-source toolkit for building a React and GraphQL storefront on Magento. It is not formally deprecated and existing stores keep running, but Adobe's active investment has moved to Edge Delivery Services, so major new features for PWA Studio are unlikely.
What that means in practice:
- New project? Be cautious about starting on PWA Studio unless you have a specific reason and a team that can own it long term. Compare it with Hyvä, Edge Delivery Services and other frameworks first.
- Existing PWA Studio store? There is no emergency. Keep it patched, plan your next storefront, and avoid investing heavily in new custom features on a platform with no roadmap.
- Magento Open Source? You can run a custom GraphQL-based headless frontend, but Adobe's Edge Delivery Services commerce path is aimed at its cloud commerce products. Check which editions and versions it supports before planning around it.
A PWA or headless storefront makes sense when:
- Most of your traffic is mobile and your Core Web Vitals are poor on the current theme.
- You need one backend to serve several frontends, such as web, app and kiosk.
- You want a highly custom shopping experience that a theme cannot deliver.
- You have a frontend engineering team, or a partner, to maintain it for years.
- Your main goal is speed. A Hyvä storefront delivers large performance gains at a fraction of the complexity, and you can add PWA features to it.
- You depend on many extensions. Extensions built for Luma generally do not work in a headless storefront. Each one needs GraphQL support and a matching frontend, which is often the biggest hidden cost.
- Your payment methods have limited headless support. For example, some payment providers support headless checkouts only on the back end and treat your frontend as out of scope.
- You have a small team. Headless means two applications to build, deploy, secure and monitor.
Where it helps
- Performance. Cached assets and optimised rendering give fast repeat visits and smooth navigation.
- Experience. Installability and app-like transitions feel polished on mobile.
- Engagement. Push notifications bring shoppers back, as long as you ask for consent and use them sparingly.
- Reach. One codebase works across desktop, tablet and mobile.
- Offline shopping is limited. Customers can browse cached pages, but checking out needs a connection.
- Conversion gains are not automatic. Faster pages help, but results depend on your audience and execution. Measure with your own data and A/B tests rather than relying on generic statistics.
- Platform differences remain. Install and push behaviour varies by browser and operating system, especially on iOS.
- It is not a replacement for a native app when you need deep device features.
1. Define goals and baseline
Write down what success means, such as better mobile Core Web Vitals, higher mobile conversion or app-like engagement. Record your current Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift, along with mobile conversion rate, so you can prove the result.
2. Choose the architecture
Use the options table above. Decide between a PWA on Hyvä, a headless framework or Adobe's Edge Delivery Services based on your edition, team skills, extensions and budget. Make this a deliberate decision, not a default.
3. Prepare the Magento backend
- Upgrade to a supported Magento or Adobe Commerce version first.
- Review your GraphQL coverage. A headless storefront relies on GraphQL for catalog, cart, checkout and account features, so check that each feature you need is exposed.
- Plan search and personalisation, since these often come from separate services.
- Fix backend performance. In a headless setup, every page depends on API response time, so GraphQL caching, indexing and hosting quality directly affect storefront speed.
List every extension with frontend behaviour: reviews, wishlists, loyalty, product labels, store locators, subscriptions, B2B features and payment methods. For each, decide whether to replace it, extend it with GraphQL and custom frontend code, or drop it.
5. Build the storefront
Set up your chosen framework, build the core journeys (home, category, product, search, cart, checkout and account), and connect them to Magento's GraphQL API. Keep design tokens and components reusable so the design stays consistent.
6. Add the progressive features
- Web app manifest with names, icons, theme colour and display mode.
- Service worker with sensible caching: cache static assets aggressively, use network-first for prices, stock and cart, and never cache checkout or account responses.
- Offline fallback page for when there is no connection.
- Install prompt shown at a sensible moment, not on the first page view.
- Push notifications, requested only after the shopper shows interest and with clear consent.
Target good Core Web Vitals on mobile. Optimise and size images properly, use modern formats, split JavaScript, defer non-critical scripts and keep third-party tags under control. Measure on real devices and slow networks.
8. Protect SEO
Search engines must be able to read your pages. Use server-side rendering or pre-rendering, keep URLs identical to the old site, and carry over canonical tags, meta data, structured data, XML sitemaps and redirects. Verify with Search Console after launch.
9. Handle privacy and consent
Push notifications, analytics and marketing tags need valid consent under laws such as GDPR and India's DPDP Act. Build the consent banner and preference management before launch.
10. Test thoroughly
Test the full purchase journey across devices and browsers, including every payment method, coupons, taxes, shipping options, guest and registered checkout, and error states. Check install and push behaviour on Android and iOS, and test offline and slow-network conditions.
11. Launch gradually and monitor
Roll out to a portion of traffic or one store view first. Monitor errors, Core Web Vitals, conversion rate and server load, and keep a rollback plan ready.
Adding PWA Features to a Hyvä Storefront
If you want installability and push without a full headless build, a Hyvä storefront is a practical alternative. The approach is:
- 1Migrate to Hyvä and confirm performance and compatibility first.
- 2Add a web app manifest and icons.
- 3Add a service worker with careful caching rules and an offline fallback.
- 4Add an install prompt and, if useful, push notifications with consent.
- 5Test on real devices.
- 6This keeps Magento's server-rendered architecture and extension compatibility while adding the features shoppers notice most.
Common Pitfalls
| Pitfall | Why it hurts | How to avoid it |
|---|---|---|
| Choosing PWA because it is trendy | Cost and complexity outweigh the benefit | Compare with Hyvä and set measurable goals first |
| Caching the wrong data | Customers see stale prices, stock or cart contents | Use network-first for dynamic data and never cache checkout |
| Aggressive push notifications | Users opt out and trust drops | Ask late, send rarely and keep messages relevant |
| Starting a new build on a platform with no roadmap | You inherit a maintenance burden | Check the vendor's current direction before you choose |
Frequently Asked Questions
Is Magento PWA Studio deprecated? Not formally. Adobe continues to release fixes and compatibility updates, but active investment has shifted to Edge Delivery Services, so new features are unlikely. For new builds, compare alternatives first.
Is a PWA the same as a headless storefront? No. A PWA is a set of web capabilities such as installability, offline support and push. Headless is an architecture. Many Magento PWAs are headless, but you can add PWA features to a server-rendered storefront too.
Is Hyvä a PWA? Not by itself. Hyvä is a fast, server-rendered theme. You can add PWA features such as a manifest, service worker and push notifications on top.
Do I still need a native mobile app? Often not. A PWA covers installability, push and a fast mobile experience. You still need a native app if you depend on deep device features or app store presence.
Will a PWA improve my SEO? It can, mainly through better Core Web Vitals, but only if your pages are properly rendered for search engines and your URLs, metadata and structured data are preserved.
Will my existing extensions work? For a server-rendered theme such as Hyvä, many do with a compatibility module. For a headless PWA, each frontend-facing extension needs GraphQL support and a matching frontend implementation.
Conclusion
A PWA can deliver a fast, engaging, app-like store, but it is no longer the obvious default for Magento. The technology and the ecosystem have moved: PWA Studio's roadmap is quiet, Edge Delivery Services is Adobe's direction for new storefronts, and Hyvä gives most merchants the speed they want at a much lower cost and risk. Start with your goals and your extensions, compare the options honestly, and choose the architecture you can maintain for years.
Planning a PWA, a headless build or a Hyvä migration? Wisenetic's Magento team can review your store and recommend the right approach. Contact us at info@wisenetic.com.
