Logo von nextlevels
DEEN
Request a project

Progressive web app (PWA)

Last updated on

In short

A progressive web app (PWA) is a web application built with the tools of the open web (HTML, CSS, JavaScript) that nevertheless feels like a native app to the user: it can be added to the home screen, starts in full screen without a browser bar, also works with a poor or missing internet connection and can send push notifications. The term was coined in 2015 by Google developer Alex Russell and designer Frances Berriman.

"Progressive" means that the app basically runs on every device and in every browser and gradually unlocks more functions depending on the capabilities of the device.

What distinguishes a PWA from a normal website

Technically, a PWA is initially a perfectly normal website. Three building blocks turn it into an "app":

  • Service worker: a JavaScript that runs in the background and sits as a proxy between the app and the network. It intercepts network requests, can cache content and can thus deliver pages even without a connection. The service worker is the heart of offline capability and push notifications.
  • Web app manifest: a small JSON file that tells the browser what the app is called, which icon it has, which start page it uses and whether it runs in full screen or with a browser bar. Only the manifest makes the app "installable".
  • HTTPS: PWAs only work over a secure, encrypted connection. This is a hard prerequisite, not an optional extra.

Once these building blocks are in place, the browser offers to "install" the app on supported devices. No classic installation package is downloaded; the app remains a website but gets an icon and a window frame of its own.

Why PWAs came about

PWAs are an answer to two problems. First, the friction of installing native apps: anyone who has to download an app from the store often drops out before the installation is complete, especially in retail, where many visitors only stop by once. Second, the cost and complexity of building and maintaining the same app separately for iOS, Android and the web. A PWA runs everywhere from one code base and bypasses the app store along with its commissions and approval processes.

PWAs in e-commerce

For online retailers, the PWA is particularly interesting because mobile performance has a direct impact on revenue. Long loading times cost conversions; a PWA that loads large parts from the cache after the first visit feels noticeably faster. Push notifications make it possible to inform customers about abandoned baskets, price reductions or items back in stock, a channel previously reserved for native apps. And "installing" on the home screen creates a direct way back in without the customer having to type in the URL again.

In the Shopware environment, there was a dedicated offering with the "Shopware PWA" (later as part of the "Composable Frontends" based on Vue.js and Nuxt) for delivering shops as a PWA operated headless. The front end communicates with the Shopware back end via the Store API, a typical headless set-up. Important to know: a PWA almost always requires headless operation, because the app-like front end is decoupled from the classic server-side rendered storefront.

Caching strategies

The service worker decides how content is cached. Common strategies are:

  • Cache first: look in the cache first and only ask the network if something is missing; ideal for static assets such as logos and fonts.
  • Network first: ask the network first and fall back on the cache if it fails; sensible for content that should be as up to date as possible, such as prices and stock levels.
  • Stale-while-revalidate: deliver the cached version immediately and update it in the background; a good compromise between speed and topicality.

In retail in particular, the choice of strategy is tricky: an outdated price or an incorrect stock level from the cache can become expensive. Prices and availability therefore never belong blindly in an aggressive cache.

A concrete example

A frequently cited example is the PWA of the fashion marketplace AliExpress, as well as Twitter's early PWA ("Twitter Lite"), which worked with just a few hundred kilobytes even in markets with slow networks. In its case studies, Google documents numerous retailers that measured shorter loading times and higher conversion rates after switching to a PWA. Such figures are, however, project-specific and not transferable one-to-one; they show the potential, not a guarantee.

Limits and disadvantages

PWAs are not a cure-all. On iOS, support was more limited than on Android for a long time, for example for push notifications, which Apple only enabled later (from iOS 16.4, 2023) for web apps added to the home screen. Access to certain device functions (Bluetooth, NFC, deep system integration) remains reserved for native apps or is restricted. And PWAs cannot be found in the app stores, or only via detours; anyone who depends on visibility in the store loses this channel. For compute- or graphics-intensive applications (elaborate games, video editing), the native app remains superior.

PWA, native app or responsive website?

CriterionResponsive websitePWANative app
Installation requiredNoOptional (1 click)Yes (app store)
Offline capabilityNoYesYes
Push notificationsLimitedYes (platform-dependent)Yes
Findable in the app storeNoLimitedYes
Development costsLowMediumHigh (per platform)

Common misconceptions

One misconception is that a PWA is "an app that you don't download from the store"; that falls short. A PWA is and remains a website; the app-like capabilities are progressive enhancements. A second misconception: PWAs are automatically fast. Speed does not come from the label but from clean performance work, the same levers that also improve the Core Web Vitals. Third, it is often overestimated how many users actually "install" a PWA; the greater value often lies in speed and offline robustness, not in the icon on the home screen.

Outlook

With the increasing maturity of the web platform (more browser APIs, better iOS support, more powerful frameworks), the boundary between web and native app continues to blur. For many retailers, the PWA is the pragmatic middle way: app-like experiences without the effort of separate native apps. Anyone who takes this route should understand it as part of a headless strategy and think about performance, caching and data topicality from the outset. The MDN Web Docs on progressive web apps offer a sound technical introduction.

FAQ

Do I need an app store for a PWA?
No. A PWA is delivered via the browser and can be used directly from the home screen. An optional listing in the stores is possible via packaging techniques but not required.

Does a PWA work on the iPhone?
Yes. Support was more limited than on Android for a long time but has improved; iOS has supported push notifications for web apps since version 16.4.

Is a PWA good for SEO?
In principle yes, because a PWA remains a website with real URLs. What matters is that content is rendered visibly for search engines; with purely client-side rendering, server-side rendering or prerendering is important.

What is the difference between a PWA and headless commerce?
Headless describes the separation of front end and back end via APIs. A PWA is a concrete form of front end that is typically operated headless.

Next step

A PWA instead of expensive app development?

PWA, cross-platform or native: we compare the routes for your use case and build the one that fits your budget.

Changelog

  1. · Created · Jan Schumann