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!

• 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.

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

1. 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 HTTPS für Admidio-Webseiten.
2. Admidio Version 5.1 oder neuer
3. 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.

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

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

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

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:

1. 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.
2. Scrolle in der Liste der Aktionen nach unten und tippe auf „Zum Home-Bildschirm“ (Add to Home Screen).
3. Tippe oben rechts auf „Hinzufügen“.
4. Fertig! Admidio befindet sich nun als App-Symbol auf deinem Home-Bildschirm.

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

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.

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.

Unter Einstellungen > Allgemein gibt es den Schalter:

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.

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.

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).

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:

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!

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)

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.

1. Kein HTTPS: Prüfe, ob du Admidio über https:// aufrufst. Über unverschlüsseltes HTTP verweigern moderne Browser die PWA-Installation.
2. Bereits installiert: Wenn du Admidio bereits als App geöffnet hast, wird der Button absichtlich verborgen.
3. In Einstellungen deaktiviert: Prüfe unter Einstellungen > Allgemein, ob die Option „Progressive Web App (PWA) aktivieren“ eingeschaltet ist.
4. Desktop Firefox: Mozilla Firefox unterstützt PWA-Installationen auf Desktop-Rechnern nicht. Nutze bitte Chrome, Edge oder Brave.
5. 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ß.

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.

• 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….