Claude Code + Navigation
Ein Hamburger-Menü und ein Website-Header sind der schnellste Weg, eine Claude Code-App wie ein Lesezeichen wirken zu lassen, und genau das bewerten Reviewer unter Guideline 4.2. WebViewGold ergänzt auf iOS eine native Tab-Leiste oder Sidebar und auf Android eine Material-Bottom-Navigation oder einen Drawer, jeweils in einer einzigen Datei konfiguriert, während deine Web-App weiter das Routing übernimmt.
Ab $109 einmalig pro Plattform, oder unser Team erledigt alles ab $698.
Alle vier laden beim Antippen eine URL deiner Web-App in der Haupt-WebView, an deinem Routing ändert sich also nichts. Wähle pro Plattform ein primäres Muster.
Setz showNavFooter in Config.swift auf true und beschreibe drei bis fünf Tabs in FooterBar.json: ein Label (name), ein SF Symbol (sf_symbol) und die URL, die der Tab öffnet (redirection_link), dazu colour mit dark oder light für die ganze Leiste.
Setz enableSidebar auf true und füll Sidebar.json mit denselben Feldern. Ein schwebender Button öffnet ein natives Slide-Menü, praktisch, wenn du mehr Bereiche hast, als in eine Tab-Leiste passen. Die Sidebar funktioniert allein oder zusammen mit dem Footer (Sidebar-Doku).
ENABLE_NAVIGATION_FOOTER in Config.java ergänzt eine Bottom-Navigation in Material 3. Einträge, Icons und Labels kommen aus res/menu/menu_drawer.xml; Google empfiehlt drei bis fünf Ziele auf oberster Ebene. Hell- und Dunkelmodus folgen automatisch dem System.
ENABLE_NAVIGATION_DRAWER ergänzt einen schwebenden Menü-Button, der einen Material-Drawer öffnet, gesteuert von derselben Menüdatei. Bottom-Navigation und Drawer lassen sich kombinieren, zum Beispiel die Hauptbereiche unten und Einstellungen, Hilfe und rechtliche Seiten im Drawer.
Füge das in Claude Code ein, um die Web-App-Seite umzusetzen. Prüfe das Ergebnis, veröffentliche und teste dann in der WebViewGold-App.
Lies https://www.webviewgold.com/llms-full.txt (Abschnitte Native Navigation Footer und Navigation Drawer & Bottom Navigation Footer). Die Web-App in diesem Repository läuft in WebViewGold, und ihr User Agent enthält "WebViewGold". Das iOS-Projekt liegt in ./ios-app, das Android-Projekt in ./android-app. 1. Wähle die vier oder fünf Routen der obersten Ebene und prüfe, dass jede beim direkten Aufruf korrekt rendert. 2. iOS: Setz showNavFooter = true in Config.swift und schreib FooterBar.json mit colour und einem layout-Eintrag pro Tab (name, sf_symbol, redirection_link auf meiner Produktionsdomain). 3. Android: Setz ENABLE_NAVIGATION_FOOTER = true in Config.java, definiere dieselben Einträge in res/menu/menu_drawer.xml und weise jedem seine URL zu, wie die Dokumentation es beschreibt. 4. Füge in der Web-App isNativeApp() hinzu, lass in der App das Header-Menü und die Linkspalten im Footer weg und ergänze Zurück-Buttons auf Detailseiten. 5. Füge einen Test mit WebViewGold-User-Agent hinzu, der jede Tab-URL lädt und prüft, dass der Website-Header fehlt. 6. Ergänze diese Regeln in CLAUDE.md und fasse jede Datei zusammen, die du in beiden nativen Projekten geändert hast.
Großartige Möglichkeit, eine Web-App in eine native App zu verwandeln! Schnelle Umsetzung und ein toller Weg, Apps in die App Stores zu bringen, ohne eine komplett native App entwickeln zu müssen!
| Native Leiste (WebViewGold) | Tab-Leiste in der Web-App | Website-Header mit Hamburger-Menü | |
|---|---|---|---|
| Sieht aus wie | Das System: SF Symbols auf iOS, Material 3 auf Android | Was immer du gestaltest, passend zu deiner Marke | Eine mobile Website |
| Wo du sie änderst | FooterBar.json, Sidebar.json, menu_drawer.xml; kommt mit einem Store-Update | In deiner Web-App, live mit jedem Deploy | In deiner Web-App |
| Home-Indikator und Safe Area | Nativ gelöst | Braucht Padding mit env(safe-area-inset-bottom) | Oft vom Home-Indikator verdeckt |
| Was ein Tippen bewirkt | Lädt die Tab-URL in der WebView (ein Seitenaufruf) | Clientseitiger Routenwechsel; sofort, der Zustand bleibt erhalten | Öffnet erst ein Menü, dann die Seite |
| Am besten für | Drei bis fünf feste Hauptbereiche | Bereiche, die sich oft ändern, Badges und Zähler | Nur die Website; in der App ausblenden |
Rund 30 Minuten für beide Plattformen, plus ein neuer Build.
Typisch sind Start, eine Hauptliste oder Suche, ein Posteingang oder eine Erstellen-Aktion und das Konto. Alles andere lebt innerhalb dieser Bereiche. Jedes Ziel braucht eine eigene URL in deiner Claude Code-App, die beim direkten Aufruf den richtigen Bildschirm öffnet, nicht nur über Klicks innerhalb der App.
Setz showNavFooter auf true und leg pro Tab einen Eintrag mit name, sf_symbol (zum Beispiel house, magnifyingglass, tray, person.crop.circle) und dem vollständigen redirection_link auf deiner Produktionsdomain an. Stell colour passend zu deinem Theme ein. Referenz: iOS-Dokumentation.
Setz ENABLE_NAVIGATION_FOOTER (Leiste unten) oder ENABLE_NAVIGATION_DRAWER (seitlicher Drawer) in Config.java auf true, definiere Einträge, Icons und Labels in res/menu/menu_drawer.xml und weise jedem Eintrag seine URL zu, wie in der Android-Dokumentation beschrieben.
Leg in Config.swift (useragent_iphone, useragent_ipad) und Config.java (USER_AGENT) einen eigenen User Agent mit einem Token wie „WebViewGold“ fest und lass deine Claude Code-App das Header-Menü, den Hamburger-Button und die Linkspalten im Footer nicht mehr rendern, sobald sie ihn erkennt. Zwei Navigationssysteme auf einem Bildschirm sind die häufigste Design-Anmerkung.
iPhones haben keinen System-Zurück-Button. Tabs öffnen die Bereiche; Seiten, die man von dort erreicht, brauchen einen sichtbaren Zurück-Pfeil im Header. Lass enableswipenavigation eingeschaltet, damit auch die Wischgeste vom linken Bildschirmrand auf iOS zurückführt; Android-Nutzer haben zusätzlich die System-Zurück-Geste.
Tippe jeden Tab direkt nach dem Start an, nach dem Login und nachdem die Session abgelaufen ist. Ein Tab, der zur Login-Seite umleitet, sollte den Nutzer danach zu genau diesem Tab zurückbringen, nicht zum Dashboard.
Ersetze die URLs durch die Routen deiner Claude Code-App auf deiner Produktionsdomain. Sidebar.json hat dieselbe Struktur. Prüfe die Icon-Namen in Apples App „SF Symbols“.
{
"colour": "light",
"layout": [
{ "redirection_link": "https://app.yourdomain.com/", "sf_symbol": "house", "name": "Start" },
{ "redirection_link": "https://app.yourdomain.com/search", "sf_symbol": "magnifyingglass", "name": "Suche" },
{ "redirection_link": "https://app.yourdomain.com/inbox", "sf_symbol": "tray", "name": "Posteingang" },
{ "redirection_link": "https://app.yourdomain.com/account", "sf_symbol": "person.crop.circle", "name": "Konto" }
]
}Kein einzelnes Feature ist Pflicht. Guideline 4.2 fragt, ob die App mehr bietet als eine neu verpackte Website, und 4.0, ob sie den Design-Konventionen von iOS folgt. Eine native Tab-Leiste ist für beides eines der deutlichsten Signale, besonders zusammen mit Push-Benachrichtigungen und einem ordentlichen Offline-Bildschirm, aber sie ersetzt keine mobilfreundliche Web-App.
Bei der nativen Leiste nicht: FooterBar.json, Sidebar.json und menu_drawer.xml stecken im Build. Die Seiten hinter den Tab-URLs aktualisieren sich mit jedem Deploy. Ändern sich deine Bereiche oft, bau die Tab-Leiste stattdessen in deiner Web-App und zeig sie nur in der App.
Ja. Jeder Tab lädt seine URL in der WebView, also muss dein Hosting jede Route mit der App beantworten (ein SPA-Fallback auf index.html) und dein Router beim direkten Aufruf den richtigen Bildschirm öffnen. Teste das, indem du eine Tab-URL in einen frischen Browser-Tab einfügst.
Nimm den Footer für drei bis fünf Hauptbereiche. Ergänze die iOS-Sidebar oder den Android-Drawer für Nebenziele wie Einstellungen, Hilfe und rechtliche Seiten. Wiederhole dieselben Links nicht in beiden.
Behalte es für die Website und lass es in der App per User-Agent-Prüfung weg. In der App übernimmt die native Leiste; ein zweites Menü-Icon im Header verwirrt Nutzer und Reviewer.
Gleiches Ergebnis, unterschiedlich viel Arbeit auf deiner Seite. Alle drei kommen mit Genehmigungsgarantie und 24/7 Support von echten Menschen.
$109 pro Plattform, einmalig
Die WebViewGold-Lizenz: ein fertiges Xcode- oder Android-Studio-Projekt. URL einfügen, Name und Icon setzen, Features einschalten, bauen und einreichen. Kostenlose Updates für immer.
Pakete auf der Hauptseite ansehen$349 pro Lizenz, einmaliges Add-on
Kein Mac, kein Xcode, kein Android Studio: Du konfigurierst im Browser, wir bauen beide Apps in der Cloud und übergeben sie an App Store Connect und die Play Console.
So funktioniert der Cloud Builder Kostenlose Demo ausprobieren$698 pro Plattform $798
Schick uns deine URL und dein Icon. Unser Team konfiguriert, baut und liefert deine App innerhalb von 72 Stunden, White-Label, inklusive Quellprojekten. Beide Plattformen für $1,158.
Full-Service-Details Powered by
Winter-Sale-Preise gültig bis 31. Dezember 2026.
App Store & Google Play Genehmigungsgarantie – oder Geld zurück innerhalb von 14 Tagen
Lieber abgeben? Full Service: Wir konfigurieren, bauen und liefern innerhalb von 72 Stunden, ab $698 pro Plattform. Fragen? Chatte mit uns – 24/7.
Erstattungen erfolgen zu den in unseren FAQ genannten Bedingungen: eine nicht inhaltsbedingte Ablehnung durch Apple und/oder Google, geltend gemacht innerhalb von 14 Tagen nach dem Kauf.