PWA for an Online Store: When the Technology Is Justified, Benefits and Limitations

PWA for an Online Store: When the Technology Is Justified, Benefits and Limitations

A mobile user expects an online store to open quickly, keep the cart and not force them through unnecessary steps before a purchase. The business, in turn, wants to bring customers back, send relevant notifications and avoid maintaining several completely separate products without need.

At this intersection, a PWA — Progressive Web App — often appears. It is described as “a website that works like an app”, but this wording is too simplified. A PWA does not turn any website into a full-fledged native app and does not guarantee automatic sales growth. It is a set of web capabilities that, with the right architecture, make the mobile experience faster, more reliable and closer to an app.

Let’s look at when a PWA for an online store really solves a business problem, what limitations it has and what needs to be checked before investing.

What a PWA is

A Progressive Web App is a web application that uses modern browser capabilities and progressive enhancement. It remains accessible via a URL but can gain additional properties: installation on a device, a separate window, caching, working with an unstable connection and push notifications where supported.

Main components:

  • HTTPS;
  • a web app manifest with the name, icons and display settings;
  • a service worker for managing network requests and cache;
  • a responsive interface;
  • a well-thought-out update strategy;
  • correct behavior with a weak or missing connection.

A PWA can work like a regular website in the browser if a certain feature is not supported. This is the principle of progressive enhancement: the basic scenario is available to everyone, and additional capabilities are enabled where they work reliably.

A PWA is not the same as a responsive website

Responsive design adapts the interface to the screen size. A PWA adds a layer of capabilities and control over the app’s behavior.

A store can be responsive but have no manifest, service worker or installation. Conversely, a technically installable PWA can have an inconvenient checkout and poor mobile UX.

That is why the first step is not to “add a PWA” but to fix the basic mobile journey: catalog, search, product page, cart, payment and speed. Technology does not compensate for weak design.

A PWA is not the same as headless

A PWA describes frontend capabilities and interaction with the device. Headless describes an architecture in which the frontend is separated from the CMS or commerce backend and works via an API.

Different combinations are possible:

  • a traditional CMS without a PWA;
  • a traditional CMS with PWA features;
  • a headless storefront without installation;
  • a headless PWA.

So you should not buy headless commerce just for an icon on the home screen. The architecture should match the number of channels, the complexity of integrations and the pace of development. You can read more about this approach in the GL.ua article about Headless CMS.

When a PWA is useful for an online store

A large share of mobile traffic

If most users come from smartphones, improving mobile speed and repeat visits can have a significant impact. But the decision must be based on the analytics of a specific store: device share, conversion, bounces and problematic checkout steps.

Frequent repeat purchases

A PWA performs best where the customer returns regularly: groceries, pet supplies, cosmetics, pharmacy, consumables, B2B orders. Installation, saved state and fast relaunch are worth more there than in a store where people buy once every few years.

Unstable connection

A service worker can cache the app shell, part of the catalog or recently viewed pages. The user will not necessarily get a full offline store, but the app can explain the problem correctly and keep the available data instead of showing a blank screen.

The need for a single web codebase

A PWA can provide an app-like experience without creating separate iOS and Android products at the first stage. However, if the business needs deep device capabilities, complex background work or a specific presence in app stores, a native or cross-platform app may be better.

The need to bring users back directly

An icon, a separate window and push notifications can make repeat contact easier. But notifications must be voluntary and useful. Aggressive push notifications without segmentation quickly lead to users revoking permission or deleting the app.

When a PWA is not a priority

A PWA should be postponed if:

  • the mobile website still has basic UX problems;
  • the catalog and stock are unstable;
  • checkout does not work reliably;
  • the business has no repeat-use scenario;
  • the team is not ready to maintain the cache and service worker;
  • the main problem lies not in the channel but in the product range, price or logistics;
  • device capabilities are needed that the web platform does not support in the target browsers.

Sometimes optimizing the responsive website gives the business more than a full PWA. This must be checked with data, not by the popularity of the technology.

PWA, responsive website or mobile app

CriterionResponsive websitePWANative/cross-platform app
Access via URLYesYesUsually through an app store
InstallationNoYes, depending on the browserYes
Single web codebaseYesYesSeparate app stack
Offline/cacheLimitedFlexible via service workerDeep control
Access to device capabilitiesBasicDepends on the browserThe widest
SEOStandard web approachRequires correct renderingApp store pages, not a web catalog
Maintenance costUsually lowerMediumUsually higher due to platforms

The table does not determine a winner. It shows that the choice depends on the scenario.

How a service worker works

A service worker is a separate browser process that can intercept network requests and return data from the cache. It has no direct access to the DOM and can stop when it is not performing tasks.

For a store, it is important to define different caching strategies:

  • cache first for versioned static resources;
  • network first for data that must be up to date;
  • stale while revalidate for content that can be shown quickly and updated in the background;
  • a separate offline response for an unavailable network.

You cannot cache everything the same way. An outdated logo image is a minor problem. An outdated price or availability is a direct risk to sales and trust.

Catalog, prices and cart with an unstable network

A PWA must clearly separate information that can be shown from the cache from data that must be confirmed on the server.

It is safe to cache:

  • the interface shell;
  • icons and styles;
  • reference content;
  • recently viewed products with a note that the data may have changed.

Before an action, you need to re-check:

  • price;
  • availability;
  • discount;
  • delivery cost;
  • cart contents;
  • the possibility of placing the order.

If the user is offline, the store can save the intent or a draft cart, but it must explain that the order is not confirmed until the connection is restored.

Installation and manifest

The web app manifest describes what the PWA looks like after installation: name, icons, start URL, theme color and display mode. Installation requirements differ between browsers and operating systems, so the scenario must be tested on real target devices.

You should not show an invitation to install the PWA right after the first visit. The user does not yet know the value of the product. It is better to offer installation after a useful action: a repeat visit, a purchase, creating a wish list or setting up a regular order.

SEO for a PWA

A PWA remains a website, so the usual principles of search engine optimization apply to it. It is critical that every category and product has a separate accessible URL, a correct HTTP status and crawlable links.

Google executes JavaScript, but server-side or pre-rendering is still useful for speed and for making content available to other bots. The main content, title, description, canonical and links must be available in the initial HTML or a correctly rendered page.

Check:

  • unique URLs for indexed pages;
  • regular <a href> for navigation;
  • 200 for real pages and 404 for missing ones;
  • canonical;
  • XML sitemap;
  • product structured data;
  • availability of categories without internal search;
  • rendering in URL Inspection;
  • no soft 404s in client-side routing.

A PWA does not improve SEO automatically. A poorly implemented JavaScript app, on the contrary, can hide content or statuses from search engines.

Performance and Core Web Vitals

A service worker and cache can speed up repeat visits, but the first load still depends on the size of JavaScript, the server, images and architecture.

Google uses three main Core Web Vitals:

  • LCP — loading of the main content;
  • INP — responsiveness to interaction;
  • CLS — visual stability.

A large JavaScript bundle can worsen INP even if the app opens quickly from the cache. That is why code splitting, prioritization of critical resources, image optimization and control of third-party scripts are needed.

Push notifications without spam

Push notifications can bring the user back to an abandoned cart, announce that a product is back in stock or report an order status. But permission should be requested in the context of a clear benefit.

Before launch, define:

  • which events justify a notification;
  • frequency limits;
  • segmentation;
  • easy opt-out;
  • token retention periods;
  • metrics for clicks and unsubscribes.

You should not use push as a cheap substitute for a retention strategy. The number of messages sent is not a KPI if they do not help the customer and do not lead to a useful action.

How to estimate the cost

A PWA is not a single module. The budget depends on the state of the current website, rendering, catalog, API, caching, authorization, push, analytics and browser testing.

The TCO should include:

  • mobile UX design;
  • development of the manifest and service worker;
  • server-side or pre-rendering if needed;
  • integrations with the e-commerce backend;
  • testing updates and cache;
  • error monitoring;
  • maintaining browser compatibility;
  • content and re-engagement campaigns;
  • further development.

If the store already has a fast responsive frontend and stable APIs, implementation will be easier. If the catalog, checkout and backend need to be rebuilt first, the PWA will be just one stream of a larger project.

Implementation roadmap

  1. Analyze the mobile funnel and repeat purchases.
  2. Define the business scenario for the PWA.
  3. Check the browsers and devices of the audience.
  4. Fix the basic mobile UX and performance.
  5. Design the cache and data freshness rules.
  6. Add the manifest and installable mode.
  7. Implement the service worker and offline behavior.
  8. Set up analytics for installation, repeat visits and purchases.
  9. Launch for a limited audience.
  10. Scale only after checking the KPIs.

Which KPIs to track

  • the share of users who see and accept the installation offer;
  • repeat visits;
  • load time of the first and repeat visit;
  • mobile conversion;
  • add-to-cart and checkout completion;
  • the share of errors with a weak connection;
  • push notification effectiveness;
  • app removals or notification opt-outs;
  • Core Web Vitals stability;
  • revenue per returning user.

You need to measure not only those who installed the PWA. They may have been more loyal even before installation. To assess the causal effect, it is useful to run controlled experiments or compare similar segments.

Conclusion

A PWA for an online store is justified when it solves a specific problem: slow repeat access, an unstable connection, the need for installation or regular customer return. It is not a synonym for responsive design, a native app or headless commerce.

The GL.ua team starts such projects with an analysis of the mobile funnel, architecture and data. Sometimes the best first step is optimizing the current website, sometimes a PWA, and sometimes a separate app or a new storefront. If you are planning online store development, the right choice should be made at the requirements stage so that the technology supports the business model rather than complicating it.

Order a site now!

Just one step to your perfect website

Accessibility menu
Contrast settings
Font size
Letter spacing
Line height
Images
Font
Reset the settings