Website-Elemente ausblenden
Cookie-Banner, Store-Badges, Newsletter-Pop-ups, Desktop-Navigation, das „Edit with …“-Badge des Builders. Je eine CSS-Regel in custom.css.
Typische Änderungen nur für die App
App-typisches Layout
Größere Touch-Flächen, Safe-Area-Abstände für fixierte Leisten, eine Bottom-Navigation (oder die native Navigationsleiste von WebViewGold), ausgeblendete Seitentitel, die die App-Leiste schon zeigt.
Verhalten ändern
Externe Links im In-App-Browser öffnen, nach dem Absenden von Formularen successhaptic:// aufrufen, den Web-Checkout für digitale Güter ausblenden und stattdessen den IAP-Button zeigen.
Prompt für Cursor
Füge das in Cursor ein, um die Web-App-Seite umzusetzen. Prüfe das Ergebnis, veröffentliche und teste dann in der WebViewGold-App.
Prompt für den Cursor-Agenten
Diese Web-App läuft im nativen Wrapper WebViewGold, dessen User Agent "WebViewGold" enthält. 1) Erstelle lib/native.ts mit isNativeApp(), einmal ausgewertet. 2) Finde jedes Element, das nur auf die Website gehört (Marketing-Navigation, Footer, Cookie-Banner, App-Store-Badges, Banner „in der App öffnen“), füge data-web-only hinzu und rendere es nicht, wenn isNativeApp() true ist. 3) Füge eine Komponente BottomNav mit vier Hauptrouten hinzu, unten fixiert, padding-bottom: env(safe-area-inset-bottom), nur in der nativen App gerendert; blende dort die obere Navigation aus und ergänze Abstand am Inhalt. 4) Füge einen Playwright-Test hinzu, der den userAgent so setzt, dass er "WebViewGold" enthält, und prüft, dass die Web-only-Elemente fehlen und die BottomNav vorhanden ist. Melde jede geänderte Datei.
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!
Zwei Wege für Cursor
Nimm den, der zu deiner Arbeitsweise passt.
Option A: custom.css / custom.js in WebViewGold
Bearbeite die beiden Dateien in den Projekten für Xcode und Android Studio (oder in den Feldern des Cloud Builders). Sie werden in jede Seite injiziert. Kein Deploy deiner Web-App nötig; ein neuer App-Build liefert die Änderung aus.
Option B: die App im Web-Code erkennen
Setze in Config.swift / Config.java einen eigenen User Agent (zum Beispiel mit angehängtem „WebViewGold“), ergänze in deiner Web-App eine Body-Klasse, sobald er erkannt wird, und gestalte
.in-app-Varianten in deinem normalen Stylesheet. Änderungen gehen mit jedem Publish live, ohne App-Update.Beides kombinieren
Nutze die User-Agent-Klasse für Dinge, die sich oft ändern (Navigation, Aktionen), und custom.css für einmalige Aufräumarbeiten an Elementen, die du im Builder nicht so leicht ändern kannst.
Unter Review-Bedingungen prüfen
Öffne die App auf einem iPhone und einem Android-Smartphone, im Hoch- und Querformat, und auf einem iPad: kein Desktop-Header, kein horizontales Scrollen, nichts unter der Notch.
custom.css zum Start
Pass die Selektoren an das Markup deiner Cursor-App an:
css
/* Elemente, die nur auf die Website gehören */
#cookie-banner, .newsletter-popup, .app-store-badges, #lovable-badge, a[href*="lovable.dev"] { display: none !important; }
/* Desktop-Navigation und Footer-Links */
header .desktop-nav, footer .link-columns { display: none !important; }
/* Safe Area für fixierte Leisten */
.bottom-bar { padding-bottom: env(safe-area-inset-bottom); }
/* bequeme Touch-Flächen */
button, .btn, a.nav-item { min-height: 44px; }Häufig gestellte Fragen
Ändert eigenes CSS meine Website?
Nein. Es wird nur innerhalb der App injiziert. Besucher in Safari oder Chrome sehen die Seite wie bisher.
Kann ich JavaScript-Bibliotheken injizieren?
Ja, custom.js läuft bei jedem Seitenaufruf in der App. Halte es klein und defensiv: Seiten deiner Web-App können je nach Framework vor oder nach deinem Skript fertig geladen sein.
Brauche ich für CSS-Änderungen eine neue Store-Version?
Für Änderungen in custom.css ja (die Datei wird mit der App ausgeliefert). Wenn du Änderungen sofort live haben willst, nutze stattdessen die User-Agent-Erkennung in deiner Web-App.
Drei Wege, deine App in die Stores zu bringen
Gleiches Ergebnis, unterschiedlich viel Arbeit auf deiner Seite. Alle drei kommen mit Genehmigungsgarantie und 24/7 Support von echten Menschen.
Selbst machen
$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 ansehenCloud Builder
$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 ausprobierenFull Service
$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.