Dynamische-UI-API

Ändern Sie native UI-Elemente wie die Statusleistenfarbe dynamisch aus Ihrer Web-App unter Android.

Mit WebViewGold können Sie die UI-Elemente in Ihrer Web-App dynamisch anpassen. Zu diesen Elementen können die Statusleiste, die untere Leiste (iOS), die Navigationsleiste (Android) und Pull-to-Refresh (iOS) gehören. WebViewGold umfasst die folgenden Befehle zur dynamischen Anpassung dieser Elemente:

statusbarcolor://
- Der MASTER-BEFEHL, um die Farbe der Statusleiste und automatisch aller anderen relevanten UI-Elemente zu ändern, wie z. B. die Textfarbe der Statusleiste, die Farbe der unteren Leiste (iOS), die Farbe der Navigationsleiste (Android) usw.
statusbartextcolor://
- Ermöglicht es Ihnen, die Textfarbe der Statusleiste manuell zu ändern (iOS und Android).
bottombarcolor://
- Falls ein UI-Element für die untere Leiste (iOS) oder die Navigationsleiste (Android) vorhanden ist, ermöglicht es Ihnen, dessen Farbe manuell zu ändern.
navbartextcolor://
- Ermöglicht es Ihnen, die Textfarbe der Navigationsleiste unter Android manuell zu ändern. Unter iOS wird die Anfrage ignoriert (die untere Leiste unter iOS enthält keinen Text).
hidebars://
- Ermöglicht es Ihnen, den Hintergrund der Status- und Navigationsleiste auszublenden.

Ändern der Farbe der Statusleiste (und automatisch anderer UI-Elemente):

Diese Funktion unterstützt eine Farbeingabe im folgenden Format:

RGB = {rot, grün, blau}

Dabei sind die Werte ganze Zahlen zwischen 0 (min) und 255 (max).

Verwenden Sie JavaScript mit einer solchen URL, um die Farbe der Statusleiste zu ändern:

<script>
// Example: red
window.location.href = "statusbarcolor://255,0,0";
</script>

Wenn Sie die Farbe der Statusleiste ändern, wechselt der Text der Statusleiste automatisch zu einer passenden Farbe (weiß oder schwarz), abhängig davon, wie dunkel die Farbe ist.
Bei optionalen UI-Funktionen wie Pull To Refresh (iOS), der unteren Leiste (iOS) und der Navigationsleiste (Android) werden die Farben ebenfalls automatisch angepasst.

Ändern der Farbe des Statusleisten-Textes:

Wenn Sie die Farbe des Statusleisten-Textes manuell auswählen möchten, können Sie dies über diese Option tun.
Diese Funktion unterstützt eine Texteingabe für die folgenden Optionen:

"white"
"black"

Verwenden Sie JavaScript mit einer solchen URL, um die Farbe des Statusleisten-Textes zu ändern:

<script>
// Example: white text
window.location.href = "statusbartextcolor://white";
// Example: black text
window.location.href = "statusbartextcolor://black";
</script>

Ändern der Farbe der Navigationsleiste:

Diese Funktion unterstützt eine Farbeingabe im folgenden Format:

RGB = {rot, grün, blau}

Dabei sind die Werte ganze Zahlen zwischen 0 (min) und 255 (max).

Verwenden Sie JavaScript mit einer solchen URL, um die Farbe der Statusleiste zu ändern:

<script>
// Example: red
window.location.href = "bottombarcolor://255,0,0";
</script>

Ändern der Farbe des Navigationsleisten-Textes:

Wenn Sie die Farbe des Navigationsleisten-Textes manuell auswählen möchten, können Sie dies über diese Option tun. Bitte beachten Sie, dass diese Anfrage unter iOS ignoriert wird.
Diese Funktion unterstützt eine Texteingabe für die folgenden Optionen:

"white"
"black"

Verwenden Sie JavaScript mit einer solchen URL, um die Farbe des Statusleisten-Textes zu ändern:

<script>
// Example: white text
window.location.href = "navbartextcolor://white";
// Example: black text
window.location.href = "navbartextcolor://black";
</script>

Ausblenden der Status- und unteren Leisten

Die hidebars-Funktionalität kann entweder on oder off sein.
Hinweis: Der Text der Statusleiste, wie z. B. die Uhrzeit und der Batterieprozentsatz, bleibt nicht für den Nutzer sichtbar. Diese können jedoch durch ein Wischen des Nutzers vom oberen Rand wieder eingeblendet werden.
Verwenden Sie JavaScript, um den Sichtbarkeitsstatus der Status- und Navigationsleiste zu ändern:

<script>
// Example: hide the bars from view
window.location.href = "hidebars://on";
// Example: redisplay the bars after being hidden
window.location.href = "hidebars://off";
</script>

Implementierungshinweise im SDK-Stil

Betrachten Sie diese Funktion als native Fähigkeit, die Ihrer Web-Ebene bereitgestellt wird: Behalten Sie Ihre Produktivwebsite oder PWA als zentrale Quelle bei und nutzen Sie anschließend die dokumentierten WebViewGold-Konfigurationsflags, URL-Befehle und JavaScript-Bridge-Aufrufe, um natives Android-Verhalten nur dort zu aktivieren, wo es einen Mehrwert bietet. So bleibt Ihre Codebasis wartbar, da dieselbe Webanwendung mit minimaler Fallunterscheidung Browser, WebViewGold für Android und die übrigen WebViewGold-Plattformen bedienen kann.

Für zuverlässige Ergebnisse empfehlen sich HTTPS-Endpunkte, stabile Routennamen, explizite Erfolgs-/Fehlerzustände in Ihrer UI sowie kleine JavaScript-Hilfsfunktionen, die native Aufrufe kapseln. Beispielsweise kann eine mit jQuery Mobile, Lovable, Base44, Bolt, WordPress, Bubble, einem eigenen React-/Vue-/Angular-Stack oder statischem HTML erstellte Web-App eine einzelne Schaltfläche oder einen Event-Handler bereitstellen, der die native WebViewGold-API auslöst und dennoch einen sauberen Browser-Fallback zeigt.

Empfohlenes Integrationsmuster: Erkennen Sie den App-Kontext, rufen Sie die WebViewGold-API auf und aktualisieren Sie anschließend Ihre Web-UI nach dem nativen Callback oder Routenwechsel.
Test-Checkliste: Prüfen Sie die Funktion auf einem echten Gerät oder in einem paketierten Build, überprüfen Sie Berechtigungen und Store-Prüftexte und stellen Sie sicher, dass reine Browser-Nutzer weiterhin einen sinnvollen Fallback erhalten.
SEO-Vorteil: Halten Sie Feature-Seiten, Routentitel und strukturierte Inhalte auf Ihrer Website indexierbar, während WebViewGold die native App-Hülle für Android-Nutzer bereitstellt.