---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/storefront-als-progressive-web-app-bereitstellen"
locale: de
meta:
  "og:title": "Academy Article"
---

[Zur Startseite](https://academy.laioutr.com/)

- [Hosting und Betrieb](https://academy.laioutr.com/bereiche/hosting-und-betrieb)

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

- [Storefront als Progressive Web App bereitstellen](https://academy.laioutr.com/artikel/storefront-als-progressive-web-app-bereitstellen)

# Storefront als Progressive Web App bereitstellen

Mit der App @laioutr-app/pwa wird eine Storefront zur Progressive Web App: Besucher installieren sie auf Smartphone oder Desktop, und dank Service Worker startet sie auch bei schwachem oder fehlendem Netz.

## Bevor du startest

<dl>

<dt>Tarif</dt>
<dd>Jeder Plan</dd>

<dt>Rolle</dt>
<dd>Entwickler mit Zugriff auf die Projektkonfiguration</dd>

<dt>Dauer</dt>
<dd>5 Min.</dd></dl>

### Voraussetzungen

- App-Icons in 192 × 192 und 512 × 512 Pixeln
- Auslieferung über HTTPS

Zuletzt geprüft am 15. Oktober 2026

Eine **Progressive Web App** verhält sich wie eine native App: Besucher legen die Storefront auf den Startbildschirm oder in die App-Liste und öffnen sie von dort. Browser bieten die Installation an, sobald die Seite über HTTPS läuft, ein gültiges Manifest hat und einen Service Worker registriert.

### Was die App mitbringt

- **Manifest** mit Name, Kurzname, Markenfarbe und Icons
- **Service Worker**, der JavaScript, CSS, HTML und Bilder zwischenspeichert, damit die Storefront auch bei schwachem Netz lädt
- **Automatische Updates**: Der nächste vollständige Seitenaufruf nutzt die neue Version
- optional eine eigene **Installationsaufforderung**, etwa als Banner

Die Standardwerte funktionieren ohne Konfiguration. Für den Markenauftritt werden Name, Icons und Markenfarbe ersetzt. Die App fügt weder Tracking noch Backend-Anbindungen hinzu; sie macht die vorhandene Storefront installierbar.

## Schritt für Schritt

1. 1 ### Schritt 1: App hinzufügen Die App `@laioutr-app/pwa` in der Projektkonfiguration zu den Apps hinzufügen.
2. 2 ### Schritt 2: Icons bereitstellen Eigene Icons in 192 × 192 und 512 × 512 Pixeln im Ordner `public` ablegen.
3. 3 ### Schritt 3: Manifest anpassen Im `config`-Objekt der App in `laioutrrc.json` Name, Kurzname, Markenfarbe und Icons setzen.
4. 4 ### Schritt 4: Update-Verhalten wählen `autoUpdate` beibehalten oder `prompt` wählen, damit Besucher zum Neuladen aufgefordert werden.
5. 5 ### Schritt 5: Deployen Ein Deployment starten. Die Storefront muss über HTTPS erreichbar sein.
6. 6 ### Schritt 6: Installation testen Die Storefront auf einem Smartphone öffnen und über das Browsermenü installieren.

## Ergebnis prüfen

Der Browser bietet die Installation an. Nach der Installation startet die Storefront mit eigenem Namen und Icon und öffnet sich auch bei schwacher oder fehlender Verbindung.

## Häufige Fragen

Wie erhalten Besucher neue Versionen?

Standardmäßig aktualisiert sich der Service Worker im Hintergrund, der nächste vollständige Seitenaufruf nutzt die neue Version. Mit `prompt` werden Besucher zum Neuladen aufgefordert.

Warum bietet der Browser keine Installation an?

Meist fehlt eine Voraussetzung: HTTPS, ein gültiges Manifest mit Icons oder der registrierte Service Worker. Nicht jeder Browser unterstützt die Installation.

Fügt die PWA Tracking hinzu?

Nein. Die App ergänzt weder Tracking noch Backend-Anbindungen.

## Passend dazu

- [Deployment starten und prüfen](https://academy.laioutr.com/artikel/deployment-starten-und-pruefen)5 Min.

  Ein Deployment baut die Storefront einer Umgebung neu und bringt Änderungen an Apps, Versionen und Konfiguration live. Gestartet wird es in Cockpit unter Deployments mit Deploy; Status und Build-Log zeigen, ob es erfolgreich war.
- [Apps finden, installieren und konfigurieren](https://academy.laioutr.com/artikel/apps-finden-installieren-und-konfigurieren)6 Min.

  Apps stehen im Cockpit unter Apps als Katalog bereit, werden je Umgebung installiert und unter Configuration eingerichtet. Die Storefront nutzt sie ab dem nächsten Deployment.
- [Lokale Entwicklungsumgebung einrichten](https://academy.laioutr.com/artikel/lokale-entwicklungsumgebung-einrichten)15 Min.

  Mit dem App Starter, einem Login in die Laioutr-npm-Registry und der Projektkonfiguration aus dem Cockpit läuft eine eigene Laioutr-App in wenigen Minuten lokal. Der Studio-Befehl Developer: Use Localhost zeigt die lokale Version anschließend direkt in Studio.
- [Performance: Caching und Orchestr](https://academy.laioutr.com/artikel/performance-caching-und-orchestr)6 Min.

  Laioutr beschleunigt Storefronts über drei Cache-Ebenen: den Entity-Cache von Orchestr auf dem Server, den HTTP-Cache an der Edge und einen Speicher im Browser. Zusammen sorgen sie dafür, dass wiederholte Aufrufe Backends kaum belasten.

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

In diesem Leitfaden suchen

1. [Hosting und Auslieferung über die Edge](https://academy.laioutr.com/artikel/hosting-und-auslieferung-ueber-die-edge)4 Min.
2. [Eigene Domain verbinden](https://academy.laioutr.com/artikel/eigene-domain-verbinden)6 Min.
3. [Storefront bis zum Launch mit Passwort schützen](https://academy.laioutr.com/artikel/storefront-bis-zum-launch-mit-passwort-schuetzen)5 Min.
4. [Bilder über das Laioutr CDN ausliefern](https://academy.laioutr.com/artikel/bilder-ueber-das-laioutr-cdn-ausliefern)4 Min.
5. [Videos über das Video CDN ausliefern](https://academy.laioutr.com/artikel/videos-ueber-das-video-cdn-ausliefern)6 Min.
6. [Formulare gegen Bots und Spam schützen](https://academy.laioutr.com/artikel/formulare-gegen-bots-und-spam-schuetzen)7 Min.
7. [Storefront als Progressive Web App bereitstellen](https://academy.laioutr.com/artikel/storefront-als-progressive-web-app-bereitstellen)5 Min.

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "de",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "workTranslation": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/storefront-als-progressive-web-app-bereitstellen#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/artikel/storefront-als-progressive-web-app-bereitstellen",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/artikel/storefront-als-progressive-web-app-bereitstellen#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/artikel/storefront-als-progressive-web-app-bereitstellen#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/storefront-als-progressive-web-app-bereitstellen#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/storefront-als-progressive-web-app-bereitstellen#/schema/question/3"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/artikel/storefront-als-progressive-web-app-bereitstellen"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/storefront-als-progressive-web-app-bereitstellen#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Hosting und Betrieb",
          "item": "https://academy.laioutr.com/bereiche/hosting-und-betrieb",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Laioutr Cloud",
          "item": "https://academy.laioutr.com/leitfaeden/laioutr-cloud",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "Storefront als Progressive Web App bereitstellen",
          "item": "https://academy.laioutr.com/artikel/storefront-als-progressive-web-app-bereitstellen",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/storefront-als-progressive-web-app-bereitstellen#/schema/question/1",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Wie erhalten Besucher neue Versionen?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Standardmäßig aktualisiert sich der Service Worker im Hintergrund, der nächste vollständige Seitenaufruf nutzt die neue Version. Mit <code>prompt</code> werden Besucher zum Neuladen aufgefordert.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/storefront-als-progressive-web-app-bereitstellen#/schema/question/2",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Warum bietet der Browser keine Installation an?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Meist fehlt eine Voraussetzung: HTTPS, ein gültiges Manifest mit Icons oder der registrierte Service Worker. Nicht jeder Browser unterstützt die Installation.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/storefront-als-progressive-web-app-bereitstellen#/schema/question/3",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Fügt die PWA Tracking hinzu?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Nein. Die App ergänzt weder Tracking noch Backend-Anbindungen.</p>"
      }
    }
  ]
}
```