> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# PWA Setup

> Grundeinstellungen, App-Konfiguration, Icon, Farben und Push Notifications der DZM PWA

Im Tab **PWA Setup** konfigurierst du alle grundlegenden Einstellungen der Progressive Web App – von der App-Konfiguration über das Icon bis hin zu Push Notifications.

## Allgemein

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/mkqIoK56t6WIUjYV/images/dzm-pwa-setup-allgemein.jpg?fit=max&auto=format&n=mkqIoK56t6WIUjYV&q=85&s=ada07f1b9803d438063d4aab0802feda" alt="Allgemein – Plugin aktiv" width="2020" height="256" data-path="images/dzm-pwa-setup-allgemein.jpg" />
  </Frame>
</div>

<ParamField path="Plugin aktiv" type="boolean">
  Aktiviert die PWA-Funktionalität im Frontend. Muss aktiv sein, damit die App installiert und Push Notifications gesendet werden können.
</ParamField>

## App-Konfiguration

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/mkqIoK56t6WIUjYV/images/dzm-pwa-setup-app-konfiguration.jpg?fit=max&auto=format&n=mkqIoK56t6WIUjYV&q=85&s=fefa07c5f4be1d692d3a70f7691ec3f9" alt="App-Konfiguration – Name, Start-URL, Anzeigemodus" width="2010" height="486" data-path="images/dzm-pwa-setup-app-konfiguration.jpg" />
  </Frame>
</div>

<ParamField path="App-Name" type="string">
  Name der App auf dem Homescreen und im Manifest. Dieser Name wird dem Nutzer bei der Installation angezeigt.
</ParamField>

<ParamField path="Start-URL" type="string">
  URL die beim Öffnen der App geladen wird. In der Regel die Startseite deines Shops.
</ParamField>

<ParamField path="Anzeigemodus" type="select">
  Wie die App nach der Installation dargestellt wird. Mögliche Werte:

  * **Standalone** – Keine Browser-Leiste, vollständige App-Ansicht (empfohlen)
  * **Fullscreen** – Vollbild ohne jegliche Browser-UI
  * **Minimal UI** – Browser-UI wird minimiert, die App wirkt nativer
  * **Browser** – Normale Browser-Ansicht
</ParamField>

So unterscheiden sich die Anzeigemodi in der Darstellung:

<Tabs>
  <Tab title="Standalone">
    <div style={{width: '358px'}}>
      <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
        <Frame>
          <img src="https://mintcdn.com/dzm/kSjJD7IoTa6Ya0SD/images/dzm-pwa-anzeigemodus-standalone.png?fit=max&auto=format&n=kSjJD7IoTa6Ya0SD&q=85&s=f113f245d66c14e0643d7d684db6d7e3" alt="Anzeigemodus: Standalone" width="512" height="1136" data-path="images/dzm-pwa-anzeigemodus-standalone.png" />
        </Frame>
      </div>
    </div>
  </Tab>

  <Tab title="Fullscreen">
    <div style={{width: '358px'}}>
      <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
        <Frame>
          <img src="https://mintcdn.com/dzm/kSjJD7IoTa6Ya0SD/images/dzm-pwa-anzeigemodus-fullscreen.png?fit=max&auto=format&n=kSjJD7IoTa6Ya0SD&q=85&s=692c5ba07ba440d58f108695a6314e8c" alt="Anzeigemodus: Fullscreen" width="512" height="1136" data-path="images/dzm-pwa-anzeigemodus-fullscreen.png" />
        </Frame>
      </div>
    </div>
  </Tab>

  <Tab title="Minimal UI">
    <div style={{width: '358px'}}>
      <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
        <Frame>
          <img src="https://mintcdn.com/dzm/kSjJD7IoTa6Ya0SD/images/dzm-pwa-anzeigemodus-minimal-ui.png?fit=max&auto=format&n=kSjJD7IoTa6Ya0SD&q=85&s=1fe69b95aae21af8ffaa53be3e334850" alt="Anzeigemodus: Minimal UI" width="512" height="1136" data-path="images/dzm-pwa-anzeigemodus-minimal-ui.png" />
        </Frame>
      </div>
    </div>
  </Tab>

  <Tab title="Browser">
    <div style={{width: '358px'}}>
      <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
        <Frame>
          <img src="https://mintcdn.com/dzm/kSjJD7IoTa6Ya0SD/images/dzm-pwa-anzeigemodus-browser.png?fit=max&auto=format&n=kSjJD7IoTa6Ya0SD&q=85&s=8ce3bbb0a7a70b9d57863864078db086" alt="Anzeigemodus: Browser" width="512" height="1136" data-path="images/dzm-pwa-anzeigemodus-browser.png" />
        </Frame>
      </div>
    </div>
  </Tab>
</Tabs>

<div style={{height: '1px', backgroundColor: 'silver', margin: '24px 0'}} />

So sieht der Installationsdialog für den Nutzer im Browser aus:

<div style={{width: '360px'}}>
  <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
    <Frame>
      <img src="https://mintcdn.com/dzm/mkqIoK56t6WIUjYV/images/dzm-pwa-install-beispiel.png?fit=max&auto=format&n=mkqIoK56t6WIUjYV&q=85&s=21f38217b0bcc0af00588e92e6f8b1b1" alt="Installationsdialog – App installieren" width="1008" height="675" data-path="images/dzm-pwa-install-beispiel.png" />
    </Frame>
  </div>
</div>

## App-Icon

Logo für den Homescreen und das Manifest. Das Icon sollte quadratisch und mindestens **512×512 px** groß sein.

<ParamField path="Icon hochladen" type="string">
  PNG oder JPG. Das hochgeladene Bild wird automatisch in alle benötigten Größen für verschiedene Geräte generiert.
</ParamField>

<ParamField path="Icon Hintergrundfarbe" type="color">
  Hintergrundfarbe hinter dem Icon (für maskable Icons). Standard: `#ffffff`
</ParamField>

<ParamField path="Icon Padding" type="number">
  Abstand zwischen Icon und Rand in Prozent (0–50). Höherer Wert = mehr Abstand.
</ParamField>

## Farben

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/mkqIoK56t6WIUjYV/images/dzm-pwa-setup-farben.jpg?fit=max&auto=format&n=mkqIoK56t6WIUjYV&q=85&s=39216350465cb0e03e905132f260dda0" alt="Farben – Theme Color und Background Color" width="2004" height="384" data-path="images/dzm-pwa-setup-farben.jpg" />
  </Frame>
</div>

<ParamField path="Theme Color" type="color">
  Farbe der Statusleiste und des Browser-UI. Wird auf Android-Geräten im Browser und bei installierter App angezeigt. Standard: `#ffffff`
</ParamField>

<ParamField path="Background Color" type="color">
  Hintergrundfarbe beim Laden der App (Splash Screen). Standard: `#ffffff`
</ParamField>

## PWA generieren

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/mkqIoK56t6WIUjYV/images/dzm-pwa-setup-generieren.jpg?fit=max&auto=format&n=mkqIoK56t6WIUjYV&q=85&s=e63fc764a22096e9efe1a62bae900ba6" alt="PWA generieren" width="2016" height="274" data-path="images/dzm-pwa-setup-generieren.jpg" />
  </Frame>
</div>

<ParamField path="Ressourcen generieren" type="string">
  Generiert Icons, Manifest und kopiert den Service Worker ins Root-Verzeichnis des Shops.
</ParamField>

<Warning>
  Nach jeder Änderung am Icon oder den Farben muss **PWA generieren** erneut ausgeführt werden, damit die Änderungen aktiv werden.
</Warning>

## Push Notifications

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/mkqIoK56t6WIUjYV/images/dzm-pwa-setup-push-notifications.jpg?fit=max&auto=format&n=mkqIoK56t6WIUjYV&q=85&s=c14cf8553aa3b07b9dd44596b3b541e5" alt="Push Notifications Einstellungen" width="2006" height="986" data-path="images/dzm-pwa-setup-push-notifications.jpg" />
  </Frame>
</div>

<ParamField path="Push aktivieren" type="boolean">
  Ermöglicht es Kunden, Push-Benachrichtigungen zu abonnieren.
</ParamField>

<ParamField path="Push-Banner anzeigen" type="boolean">
  Zeigt einen Banner im Frontend, über den Besucher Push aktivieren können. Wenn deaktiviert, wird stattdessen direkt der Browser-Dialog getriggert.
</ParamField>

<ParamField path="Banner-Position" type="select">
  Wo der Banner im Frontend erscheint. Mögliche Werte: **Unten**, **Oben**
</ParamField>

<Tabs>
  <Tab title="Unten">
    <div style={{width: '320px'}}>
      <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
        <Frame>
          <img src="https://mintcdn.com/dzm/mkqIoK56t6WIUjYV/images/dzm-pwa-banner-unten.png?fit=max&auto=format&n=mkqIoK56t6WIUjYV&q=85&s=047d55b7e42b1a0e04ac0a3b904a1b25" alt="Banner-Position: Unten" width="1008" height="1961" data-path="images/dzm-pwa-banner-unten.png" />
        </Frame>
      </div>
    </div>
  </Tab>

  <Tab title="Oben">
    <div style={{width: '320px'}}>
      <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
        <Frame>
          <img src="https://mintcdn.com/dzm/mkqIoK56t6WIUjYV/images/dzm-pwa-banner-oben.png?fit=max&auto=format&n=mkqIoK56t6WIUjYV&q=85&s=0f7600dacaece5b42468109bc695b806" alt="Banner-Position: Oben" width="1008" height="2127" data-path="images/dzm-pwa-banner-oben.png" />
        </Frame>
      </div>
    </div>
  </Tab>
</Tabs>

<ParamField path="Banner-Farbe" type="color">
  Hintergrundfarbe des Banners.
</ParamField>

<ParamField path="Banner-Textfarbe" type="color">
  Textfarbe im Banner.
</ParamField>

<ParamField path="Erneut anzeigen nach (Tage)" type="number">
  Nach wie vielen Tagen der Banner erneut erscheint, wenn er vom Besucher geschlossen wurde. `0` = nur für die aktuelle Session. Standard: `7`
</ParamField>

<ParamField path="Versand-Titel" type="string">
  Titel der automatischen Push-Nachricht bei Versand. Platzhalter: `{orderNo}` für die Bestellnummer. Standard: `Deine Bestellung wurde versendet!`
</ParamField>

<ParamField path="Versand-Text" type="string">
  Text der automatischen Push-Nachricht bei Versand. Platzhalter: `{orderNo}` für die Bestellnummer. Standard: `Bestellung {orderNo} ist auf dem Weg.`
</ParamField>

<div style={{height: '1px', backgroundColor: 'silver', margin: '24px 0'}} />