====== Progressive Web App (PWA) ======

Ab Version 5.1 unterstützt Admidio moderne **Progressive Web Apps (PWA)**. Damit können Mitglieder und Administratoren deine Admidio-Installation direkt aus dem Browser heraus auf Smartphones, Tablets (Android, iOS/iPadOS) sowie auf Desktop-Betriebssystemen (Windows, macOS, Linux) als eigenständige App installieren – ganz ohne Umweg über einen App Store!

{{:de:2.0:pwa:pwa_overview_banner.png?direct&600|Admidio als Progressive Web App (PWA)}}

===== Vorteile auf einen Blick =====

  * **App-Feeling ohne App Store**: Kein Download über Google Play oder Apple App Store erforderlich. Die Installation erfolgt mit wenigen Klicks direkt über die Webseite.
  * **Vollbild & eigenes Fenster**: Die installierte App startet im sogenannten //Standalone//-Modus ohne störende Browser-Adressleiste oder Vor-/Zurück-Buttons.
  * **Schneller Zugriff**: Ein eigenes App-Icon auf dem Smartphone-Homescreen, im Windows-Startmenü, im macOS-Launchpad oder in der Taskleiste.
  * **Individuelles Vereins-Branding**: App-Name, Startfarben und Icons passen sich automatisch an den Namen und die Farben deiner Organisation an.
  * **Offline-Fallback & Schnelligkeit**: Statische Ressourcen (Designs, Schriften, Icons, Skripte) werden über einen integrierten Service Worker gecacht. Bei Verbindungsverlust wird eine übersichtliche Offline-Meldung angezeigt.

===== Voraussetzungen =====

Damit die PWA-Funktion von modernen Webbrowsern unterstützt und angeboten wird, müssen folgende Voraussetzungen erfüllt sein:

  - **HTTPS-Verschlüsselung (SSL)**: Moderne Browser erlauben Service Worker und Web App Manifeste aus Sicherheitsgründen ausschließlich über eine verschlüsselte HTTPS-Verbindung (oder lokal über ''localhost''). Falls deine Installation noch über einfaches HTTP läuft, findest du Hilfe unter [[de:2.0:https|HTTPS für Admidio-Webseiten]].
  - **Admidio Version 5.1 oder neuer**
  - **Ein moderner Browser**:
    * **Android**: Google Chrome, Microsoft Edge, Samsung Internet, Firefox Mobile, Brave
    * **iOS / iPadOS (iPhone & iPad)**: Safari (ab iOS 11.3, optimale Unterstützung ab iOS 16.4+)
    * **Desktop**: Windows 10/11 (Chrome, Edge), macOS (Chrome, Edge, Safari ab macOS Sonoma), Linux (Chrome, Chromium, Brave)
    * //Hinweis zu Desktop-Firefox//: Mozilla Firefox unterstützt auf Desktop-Betriebssystemen derzeit keine native PWA-Installation. Für ein eigenständiges App-Fenster empfiehlt sich dort die Nutzung eines Chromium-basierten Browsers.

===== Installation für Endanwender =====

Admidio erkennt automatisch das verwendete Betriebssystem und den Browser und bietet jeweils die passendste Installationsmethode an.

==== 1. Android & Desktop (Google Chrome, Microsoft Edge, Brave) ====

Auf Chromium-basierten Browsern bietet Admidio eine komfortable **1-Klick-Installation**:

  - Sobald du dich auf der Admidio-Seite befindest, erscheint in der oberen Navigationsleiste automatisch der Button **„App installieren“** (mit Download-Symbol).
  - Auf Android-Smartphones erscheint nach kurzer Zeit am unteren Bildschirmrand zusätzlich ein dezenter Installations-Banner mit dem Vereinslogo.
  - Klicke bzw. tippe auf **„App installieren“** bzw. **„Installieren“**.
  - Bestätige den Dialog deines Browsers mit **Installieren**.
  - Fertig! Das App-Icon wird auf deinem Startbildschirm oder in deiner App-Übersicht abgelegt und öffnet Admidio künftig als eigenständige Vollbild-App.

{{:de:2.0:pwa:pwa_install_prompt.png?direct&400|Installations-Button und Banner}}

==== 2. Apple iOS & iPadOS (Safari auf iPhone & iPad) ====

Apple Safari unterstützt keinen automatischen 1-Klick-Installationsdialog. Admidio blendet daher beim Klick auf „App installieren“ eine bebilderte Schritt-für-Schritt-Anleitung ein:

  - Tippe in der Safari-Menüleiste auf das **Teilen-Symbol** (Viereck mit Pfeil nach oben):
    * Beim **iPhone**: Menüleiste am unteren Bildschirmrand.
    * Beim **iPad**: Menüleiste am oberen Bildschirmrand.
  - Scrolle in der Liste der Aktionen nach unten und tippe auf **„Zum Home-Bildschirm“** (Add to Home Screen).
  - Tippe oben rechts auf **„Hinzufügen“**.
  - Fertig! Admidio befindet sich nun als App-Symbol auf deinem Home-Bildschirm.

==== 3. Firefox Mobile (Android) ====

  - Tippe auf das **Drei-Punkte-Menü** (⋮) neben der Adressleiste (oben oder unten).
  - Wähle den Menüpunkt **„App zum Startbildschirm hinzufügen“** bzw. **„Installieren“**.
  - Bestätige mit **Hinzufügen**.

==== Wo finde ich die Installation, wenn ich den Banner geschlossen habe? ====

Falls du den Installations-Banner oder den Button in der Kopfzeile mit dem kleinen Kreuzchen geschlossen hast, kannst du die Installation jederzeit nachholen:
  * Im **Benutzer-Profilmenü**: Klicke oben rechts auf deinen Namen – dort findest du den Eintrag **„App installieren“**.
  * Im **Seitenfuß (Footer)**: Ganz unten auf jeder Seite befindet sich ein unaufdringlicher Link **„App installieren“**.
  * Über das **Browser-Menü**: Klicke im Menü deines Browsers auf **„Admidio installieren...“** bzw. **„App installieren“**.

Sobald Admidio als App installiert wurde und im Standalone-Modus läuft, werden sämtliche Installations-Buttons und -Banner automatisch ausgeblendet.

===== Konfiguration durch Administratoren =====

Die PWA-Funktion ist in Admidio ab Werk standardmäßig aktiviert und konfiguriert. Administratoren haben jedoch volle Kontrolle über Aktivierung, App-Namen, Designfarben und App-Icons.

==== PWA aktivieren oder deaktivieren ====

Unter //Einstellungen > Allgemein// gibt es den Schalter:
^ Einstellung ^ Beschreibung ^ Standardwert ^
| **Progressive Web App (PWA) aktivieren** | Steuert die Bereitstellung des Web App Manifests, des Service Workers und der Installations-Hinweise. | **Aktiviert** (Ja) |

Wird die Option deaktiviert:
  * Werden keine Installations-Buttons, Banner oder geführte Modaldialoge geladen.
  * Wird der Service Worker nicht registriert.
  * Gibt der Aufruf von ''system/manifest.json.php'' einen HTTP-Status 404 zurück.

==== Name der Web-App anpassen ====

Der Name und Kurzname der installierten App richten sich automatisch nach den Stammdaten deiner Organisation:
  * **App-Name (Volltext)**: Entspricht dem eingetragenen **Langen Namen** deiner Organisation (Feld ''org_longname'').
  * **App-Kurzname (unter dem Icon)**: Entspricht dem eingetragenen **Kurznamen** deiner Organisation (Feld ''org_shortname'').
  * Du kannst diese Angaben jederzeit unter //Organisation > Stammdaten// anpassen.

==== Farben der Web-App anpassen ====

Die Farbgestaltung der App-Titelleiste und des Startbildschirms (Splash Screen) wird automatisch aus deinen Theme-Einstellungen bezogen:
  * **Theme-Farbe (Titelleiste & Browser-Rahmen)**: Verwendet die unter //Einstellungen > Design// konfigurierte **Primärfarbe** (Standard: Admidio-Türkis ''#349aaa'').
  * **Hintergrundfarbe (Splash Screen)**: Verwendet die unter //Einstellungen > Design// konfigurierte **Hintergrundfarbe** (Standard: Weiß ''#ffffff'').

===== Eigene App-Icons (Branding) hinterlegen =====

Damit deine Mitglieder auf ihrem Homescreen sofort das eigene Vereinswappen oder Firmenlogo sehen, verfügt Admidio über ein intelligentes, mehrstufiges Auflösungssystem. Du kannst eigene Icons hinterlegen, **ohne** Core-Dateien modifizieren zu müssen:

^ Priorität ^ Speicherort / Dateiname ^ Empfohlene Auflösung ^ Zweck ^
| **1 (Beste Wahl)** | ''adm_my_files/app_icon_512.png'' | 512 × 512 px (PNG) | Hochauflösendes Haupt-App-Icon für Homescreen und App-Launcher. |
| **1b** | ''adm_my_files/app_icon_192.png'' | 192 × 192 px (PNG) | Standard-App-Icon für Mobilgeräte und Taskleiste. |
| **1c** | ''adm_my_files/app_icon.png'' | min. 512 × 512 px (PNG) | Universelles App-Icon (wird automatisch für alle Größen skaliert). |
| **2** | ''adm_my_files/admidio_logo_512.png'' | 512 × 512 px (PNG) | Alternatives Vereinslogo im Datenordner. |
| **3** | ''themes/<DeinTheme>/images/admidio_logo_512.png'' | 512 × 512 px (PNG) | Theme-spezifisches Icon im Theme-Ordner. |
| **4** | Konfiguriertes PNG-Favicon unter //Einstellungen > Design// | Beliebig (PNG) | Fallback auf das Favicon. |
| **5 (Fallback)** | ''system/logo/admidio_logo_512.png'' | 512 × 512 px (PNG) | Admidio-Standardlogo. |

> **Tipp**: Lade dein Logo einfach als quadratische PNG-Datei mit mindestens 512×512 Pixeln unter dem Namen ''app_icon_512.png'' (oder ''app_icon.png'') in den Ordner ''adm_my_files/'' hoch. Da der Ordner ''adm_my_files/'' von Admidio-Updates unberührt bleibt, ist dein Icon absolut updatesicher!

==== Maskable Icons für Android (Adaptive Icons) ====

Auf modernen Android-Geräten werden App-Icons je nach Gerätehersteller (Samsung, Google Pixel, Xiaomi etc.) dynamisch in verschiedene Maskenformen geschnitten (Kreis, abgerundetes Quadrat, Squircle).

  * **Vermeidung von Farbverfälschungen**: Transparente PNG-Logos werden von Admidio standardmäßig als reguläre Icons (''purpose: any'') deklariert. Dadurch wird verhindert, dass Android den transparenten Bereich eigenmächtig mit der Theme-Farbe füllt (was dazu führen könnte, dass gleichfarbige Logos im Hintergrund untergehen).
  * **Vollflächiges Maskable-Icon (optional)**: Wenn du möchtest, dass dein Icon den gesamten Symbolbereich vollflächig und randlos ausfüllt, erstelle ein Icon mit vollflächigem Hintergrund (zentriertes Logo im sicheren Kernbereich von 80 %) und speichere es als:
    ''adm_my_files/app_icon_maskable_512.png'' (oder ''adm_my_files/app_icon_maskable.png'')

===== Technische Details & Architektur =====

Für Entwickler und Administratoren, die verstehen möchten, wie die PWA unter der Haube funktioniert:

  * **Dynamisches Web App Manifest (''system/manifest.json.php'')**:
    * Generiert das Manifest dynamisch zur Laufzeit als JSON mit korrektem Content-Type ''application/manifest+json''.
    * Start-URL und Gültigkeitsbereich (Scope) werden dynamisch aus der Konstante ''ADMIDIO_URL'' ermittelt. Dadurch funktioniert die PWA sowohl auf Root-Domains (z. B. ''https://verein.de/'') als auch in beliebigen Unterordnern (z. B. ''https://example.com/admidio/'') vollkommen reibungslos.
  * **Service Worker (''sw.js'')**:
    * Verwaltet das Caching und die Lebenszyklen der PWA.
    * **Pre-Caching**: zentraler Basis-Assets werden beim ersten Aufruf gecached.
    * **Network-First-Strategie** für dynamische Seiteninhalte: Admidio-Module, Mitgliederdaten und Formulare werden immer live vom Server geladen, damit stets aktuelle Daten angezeigt werden.
    * **Cache-First-Strategie** für statische Ressourcen: CSS-Dateien, JavaScript-Bibliotheken, Schriften und Bilder werden im lokalen Cache gespeichert, was Ladezeiten und Serverlast drastisch reduziert.
    * **Offline-Fallback**: Bricht die Internetverbindung ab, zeigt Admidio eine saubere zweisprachige Offline-Meldung mit einem Button zum erneuten Laden.
  * **Sicherheit & Datenschutz**:
    * Im Service-Worker-Cache werden **keine** sensiblen Benutzerdaten oder Datenbankinhalte gespeichert.
    * Der Zugriff auf den Browserspeicher (z. B. das Merken geschlossener Installations-Hinweise via ''localStorage'') ist fehlertolerant gekapselt (''try/catch''), sodass selbst im strikten Privatmodus / Incognito keine Scriptfehler auftreten.

===== Häufig gestellte Fragen (FAQ) =====

==== Warum wird mir kein Installations-Button angezeigt? ====
  - **Kein HTTPS**: Prüfe, ob du Admidio über ''https://'' aufrufst. Über unverschlüsseltes HTTP verweigern moderne Browser die PWA-Installation.
  - **Bereits installiert**: Wenn du Admidio bereits als App geöffnet hast, wird der Button absichtlich verborgen.
  - **In Einstellungen deaktiviert**: Prüfe unter //Einstellungen > Allgemein//, ob die Option „Progressive Web App (PWA) aktivieren“ eingeschaltet ist.
  - **Desktop Firefox**: Mozilla Firefox unterstützt PWA-Installationen auf Desktop-Rechnern nicht. Nutze bitte Chrome, Edge oder Brave.
  - **Zuvor ausgeblendet**: Falls du auf „Nicht mehr anzeigen“ geklickt hast, ist der Button in der Kopfzeile ausgeblendet. Du findest die Option jedoch weiterhin im Profilmenü oben rechts oder im Seitenfuß.

==== Wie wird die App aktualisiert? ====
Die PWA aktualisiert sich vollautomatisch. Sobald du auf dem Server ein Admidio-Update einspielst oder Dateien veränderst, registriert der Service Worker die Änderungen im Hintergrund und aktualisiert den lokalen Cache nahtlos (über ''skipWaiting'' und ''clients.claim''). Du musst die App auf den Endgeräten nicht neu installieren.

==== Wie deinstalliere ich die Web-App wieder? ====
  * **Android**: Halte das App-Symbol auf deinem Startbildschirm gedrückt und tippe auf **Deinstallieren** (oder ziehe es auf das Papierkorb-Symbol).
  * **iOS / iPadOS**: Halte das App-Symbol gedrückt und wähle **Lesezeichen löschen** bzw. **App löschen**.
  * **Windows / macOS**: Öffne die App, klicke in der Fenster-Titelleiste auf das Drei-Punkte-Menü (⋮) und wähle **[App-Name] deinstallieren...**.