Logo von nextlevels
Hey!
Back to the wiki

Progressive Web App (PWA)

A Progressive Web App (PWA) is a web application that is built using open web tools (HTML, CSS, JavaScript) but feels like a native app to the user: it can be placed on the home screen, starts in full screen without a browser bar, works even with a poor or no 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 runs on any end device and in any browser and gradually unlocks more functions depending on the device's capabilities.

What distinguishes a PWA from a normal website

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

  • Service Worker: A JavaScript that runs in the background and acts as a proxy between the app and the network. It intercepts network requests, can cache content and thus deliver pages even without a connection. The service worker is the centrepiece of the 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 via a secure, encrypted connection. This is a hard requirement, not an optional extra.

If these components are present, the browser offers to "install" the app on supported devices. No classic installation package is downloaded - the app remains a website, but is given an icon and its own window frame.

Why PWAs were created

PWAs are an answer to two problems. Firstly, the friction of installing native apps: People who need to download an app from the store often bounce before the installation is complete - especially in retail, where many visitors only stop by once. Secondly, the cost and complexity of building and maintaining the same app separately for iOS, Android and the web. A PWA runs everywhere from a single code base and bypasses the app store and its commissions and approval processes.

PWAs in e-commerce

The PWA is particularly interesting for online retailers because mobile performance has a direct impact on sales. 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 shopping basket cancellations, price reductions or re-availability - a channel that was previously reserved for native apps. And "install" on the home screen creates a direct re-entry without the customer having to type in the URL again.

In the Shopware environment, the "Shopware PWA" (later as part of the "Composable Frontend" based on Vue.js and Nuxt) was a separate offer to deliver shops as a headless PWA. The frontend communicates with the Shopware backend via the Store API - a typical headless setup. Important to know: A PWA almost always requires headless operation because the app-like frontend is decoupled from the classic server-side rendered storefront.

Caching strategies

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

  • Cache First: Check the cache first, only ask the network if it is missing - ideal for static assets such as logos and fonts.
  • Network First: Ask the network first, fall back to the cache in case of failure - useful for content that should be as up-to-date as possible, such as prices and stock levels.
  • Stale-While-Revalidate: Immediately deliver the cached version and update in the background - a good compromise between speed and up-to-dateness.

The choice of strategy is particularly tricky in retail: An outdated price or incorrect stock from the cache can be expensive. Prices and availability therefore never belong blindly in an aggressive cache.

A concrete example

A much-cited example is the PWA of the fashion marketplace AliExpress and the early PWA of Twitter ("Twitter Lite"), which also worked in markets with slow networks with just a few hundred kilobytes. In its case studies, Google documents numerous retailers who have measured shorter loading times and higher conversion rates after switching to a PWA. However, such figures are project-specific and cannot be transferred one-to-one - they show the potential, not a guarantee.

Limitations and disadvantages

PWAs are not a panacea. For a long time, support was more limited on iOS than on Android - for example with push notifications, which Apple only released later (from iOS 16.4, 2023) for web apps added to the home screen. Access to certain device functions (Bluetooth, NFC, deep system integration) is reserved for native apps or is restricted. And PWAs cannot be found in the app stores or can only be found in a roundabout way - anyone who relies on visibility in the store loses this channel. The native app remains superior for computationally or graphically intensive applications (complex games, video editing).

PWA, native app or responsive website?

CriterionResponsive websitePWANative app
Installation requiredNoOptional (1 click)Yes (App Store)
Offline capabilityNoYesYes
Push notificationsRestrictedYes (platform dependent)Yes
Findable in the app storeNoRestrictedYes
Development costsLowMediumHigh (per platform)

Common misconceptions

One misconception is that a PWA is "an app that you don't download from the store" - that's not enough. A PWA is and remains a website; the app-like features are progressive upgrades. A second misconception is that PWAs are automatically fast. Speed does not come from the label, but from clean performance work - the same levers that also improve core web vitals. Thirdly, 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 start screen.

Outlook

As the web platform matures - more browser APIs, better iOS support, more powerful frameworks - the line between web and native app continues to blur. For many retailers, the PWA is the pragmatic middle ground: app-like experiences without the effort of separate native apps. Those taking this route should see it as part of a headless strategy and consider performance, caching and data up-to-dateness from the outset. The MDN Web Docs on Progressive Web Apps provide 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 is not required.

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

Is a PWA good for SEO?
Basically yes, because a PWA remains a website with real URLs. The decisive factor is that content is rendered visibly for search engines - server-side rendering or prerendering are important for purely client-side rendering.

What is the difference between PWA and headless commerce?
Headless describes the separation of frontend and backend via APIs. A PWA is a specific frontend version that is typically operated headless.

Further reading