---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/deliver-the-storefront-as-a-progressive-web-app"
locale: en
meta:
  "og:title": "Academy Article"
---

[Go to home](https://academy.laioutr.com/en)

- [Hosting and operations](https://academy.laioutr.com/en/bereiche/hosting-and-operations)

- [Laioutr Cloud](https://academy.laioutr.com/en/leitfaeden/laioutr-cloud)

- [Deliver the storefront as a progressive web app](https://academy.laioutr.com/en/artikel/deliver-the-storefront-as-a-progressive-web-app)

# Deliver the storefront as a progressive web app

With the @laioutr-app/pwa app, a storefront becomes a progressive web app: visitors install it on their phone or desktop, and thanks to a service worker it starts even with a weak or missing connection.

## Before you start

<dl>

<dt>Plan</dt>
<dd>Any plan</dd>

<dt>Role</dt>
<dd>Developer with access to the project configuration</dd>

<dt>Duration</dt>
<dd>5 min</dd></dl>

### Prerequisites

- App icons at 192 × 192 and 512 × 512 pixels
- Delivery over HTTPS

Last reviewed on October 15, 2026

A **progressive web app** behaves like a native app: visitors add the storefront to their home screen or app list and open it from there. Browsers offer installation once the site runs over HTTPS, has a valid manifest and registers a service worker.

### What the app provides

- A **manifest** with name, short name, brand colour and icons
- A **service worker** that caches JavaScript, CSS, HTML and images so the storefront loads even on a weak connection
- **Automatic updates**: the next full page load uses the new version
- Optionally, a custom **install prompt**, for example as a banner

The defaults work without configuration. For the brand, the name, icons and brand colour are replaced. The app adds no tracking and no backend connections; it makes the existing storefront installable.

## Step by step

1. 1 ### Step 1: Add the app Add the `@laioutr-app/pwa` app to the apps in the project configuration.
2. 2 ### Step 2: Provide icons Place custom icons at 192 × 192 and 512 × 512 pixels in the `public` folder.
3. 3 ### Step 3: Adjust the manifest Set the name, short name, brand colour and icons in the app's `config` object in `laioutrrc.json`.
4. 4 ### Step 4: Choose the update behaviour Keep `autoUpdate` or choose `prompt` so visitors are asked to reload.
5. 5 ### Step 5: Deploy Start a deployment. The storefront has to be reachable over HTTPS.
6. 6 ### Step 6: Test the installation Open the storefront on a phone and install it from the browser menu.

## Check the result

The browser offers installation. Once installed, the storefront starts with its own name and icon and opens even with a weak or missing connection.

## Frequently asked questions

How do visitors get new versions?

By default, the service worker updates in the background and the next full page load uses the new version. With `prompt`, visitors are asked to reload.

Why does the browser not offer installation?

Usually a requirement is missing: HTTPS, a valid manifest with icons or the registered service worker. Not every browser supports installation.

Does the PWA add tracking?

No. The app adds neither tracking nor backend connections.

## Related

- [Start and check a deployment](https://academy.laioutr.com/en/artikel/start-and-check-a-deployment)5 min

  A deployment rebuilds the storefront of an environment and puts changes to apps, versions and configuration live. It is started in Cockpit under Deployments with Deploy; the status and build log show whether it worked.
- [Find, install and configure apps](https://academy.laioutr.com/en/artikel/find-install-and-configure-apps)6 min

  Apps are listed in the Cockpit catalogue under Apps, installed per environment and set up under Configuration. The storefront uses them from the next deployment onwards.
- [Set up a local development environment](https://academy.laioutr.com/en/artikel/set-up-a-local-development-environment)15 min

  With the App Starter, a login to the Laioutr npm registry and the project configuration from Cockpit, a custom Laioutr app runs locally within minutes. The Studio command Developer: Use Localhost then shows the local version directly in Studio.
- [Performance: caching and Orchestr](https://academy.laioutr.com/en/artikel/performance-caching-and-orchestr)6 min

  Laioutr speeds up storefronts with three cache layers: the Orchestr entity cache on the server, the HTTP cache at the edge and a store in the browser. Together they keep repeated requests from putting load on backends.

## [Laioutr Cloud](https://academy.laioutr.com/en/leitfaeden/laioutr-cloud)

Search this guide

1. [Hosting and edge delivery](https://academy.laioutr.com/en/artikel/hosting-and-edge-delivery)4 min
2. [Connect a custom domain](https://academy.laioutr.com/en/artikel/connect-a-custom-domain)6 min
3. [Password-protect the storefront until launch](https://academy.laioutr.com/en/artikel/password-protect-the-storefront-until-launch)5 min
4. [Deliver images through the Laioutr CDN](https://academy.laioutr.com/en/artikel/deliver-images-through-the-laioutr-cdn)4 min
5. [Deliver videos through the Video CDN](https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn)6 min
6. [Protect forms from bots and spam](https://academy.laioutr.com/en/artikel/protect-forms-from-bots-and-spam)7 min
7. [Deliver the storefront as a progressive web app](https://academy.laioutr.com/en/artikel/deliver-the-storefront-as-a-progressive-web-app)5 min

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "en",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "translationOfWork": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/deliver-the-storefront-as-a-progressive-web-app#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/en/artikel/deliver-the-storefront-as-a-progressive-web-app",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/artikel/deliver-the-storefront-as-a-progressive-web-app#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/en/artikel/deliver-the-storefront-as-a-progressive-web-app#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/deliver-the-storefront-as-a-progressive-web-app#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/deliver-the-storefront-as-a-progressive-web-app#/schema/question/3"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/artikel/deliver-the-storefront-as-a-progressive-web-app"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/deliver-the-storefront-as-a-progressive-web-app#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/en",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Hosting and operations",
          "item": "https://academy.laioutr.com/en/bereiche/hosting-and-operations",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Laioutr Cloud",
          "item": "https://academy.laioutr.com/en/leitfaeden/laioutr-cloud",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "Deliver the storefront as a progressive web app",
          "item": "https://academy.laioutr.com/en/artikel/deliver-the-storefront-as-a-progressive-web-app",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/deliver-the-storefront-as-a-progressive-web-app#/schema/question/1",
      "@type": "Question",
      "inLanguage": "en",
      "name": "How do visitors get new versions?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>By default, the service worker updates in the background and the next full page load uses the new version. With <code>prompt</code>, visitors are asked to reload.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/deliver-the-storefront-as-a-progressive-web-app#/schema/question/2",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Why does the browser not offer installation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Usually a requirement is missing: HTTPS, a valid manifest with icons or the registered service worker. Not every browser supports installation.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/deliver-the-storefront-as-a-progressive-web-app#/schema/question/3",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Does the PWA add tracking?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>No. The app adds neither tracking nor backend connections.</p>"
      }
    }
  ]
}
```