Zum Inhalt springen
WebViewGold Vibe Coding in den App Store
Deutsch
WebViewGold holen

Claude Code

Das CLAUDE.md-Template für Web-Apps, die mit WebViewGold veröffentlicht werden

Claude Code liest CLAUDE.md zu Beginn jeder Session, also ist das der richtige Ort, um zu erklären, dass deine Web-App auch in nativen iOS- und Android-Apps läuft. Mit dieser Datei hört der Agent auf, Safe Areas kaputtzumachen, hält die Datenschutzseite ehrlich und ruft die WebViewGold-Bridge korrekt auf, ohne dass du dich wiederholen musst.

Ab $109 einmalig pro Plattform, oder unser Team erledigt alles ab $698.

  • Genehmigungsgarantie – oder Geld zurück innerhalb von 14 Tagen
  • Kein Programmieren nötig
  • Einmalzahlung, kostenlose Updates
  • 24/7 Support von echten Menschen
  • Made in Germany seit 2014 · ISO 27001

Warum der Agent diese Datei braucht

Ohne Kontext optimiert ein Agent für den Browser, den er kennt. Er baut eine Cookie-Wall ein, setzt einen Stripe-Button auf die Preisseite, vergisst, dass der fixe Footer über dem Home-Indikator des iPhones sitzt, und entfernt beim Refactoring fröhlich die Route zum Löschen des Kontos. Jedes davon ist eine Store-Ablehnung. Eine CLAUDE.md-Datei löst das an der Wurzel: Sie sagt Claude Code, was der native Wrapper ist, welche URL-Schemas es gibt, welche Store-Regeln nicht verhandelbar sind und welche Routen weiter funktionieren müssen.

Kopiere das Template, ersetze die Beispielwerte, committe es ins Root des Repositorys. Claude Code nimmt es in diesem Projekt automatisch auf, und jeder in deinem Team, der den Agenten startet, ebenso.

Das Template

Ersetze Stack, Domain und die Routenliste. Lösche Bridge-Zeilen, die du nicht nutzt; die Datei soll deine App beschreiben, nicht jedes WebViewGold-Feature.

markdown
# CLAUDE.md

## Project
- Next.js (App Router), TypeScript, Tailwind. Supabase for auth and Postgres. Stripe for web checkout.
- Deployed on Vercel at https://app.example.com. Every production deploy is live in the native apps immediately.
- Commands: npm run dev, npm run lint, npm run test, npm run build. Run lint and tests before reporting done.

## Native app context (read this first)
- This web app is also published as iOS and Android apps built with WebViewGold, a native WebView wrapper.
  The apps load https://app.example.com in a WKWebView / Android WebView. There is no separate mobile codebase.
- The apps send a custom user agent that contains the token WebViewGoldApp.
  Use isNativeApp() from src/lib/native.ts to branch. Never duplicate the user agent check.
- Native features are triggered by navigating to a URL scheme: window.location.href = "scheme://...".
  Results come back as injected global JavaScript variables or as calls to global functions.
  Full reference: https://www.webviewgold.com/llms-full.txt. Read the relevant section before adding a feature.
- Only call a scheme when isNativeApp() is true. In browsers use the web equivalent or hide the control.
- On iOS, several scheme calls in one script run must be combined: multiapicall://getonesignalplayerid,getappversion

## WebViewGold bridge used in this project
- Push permission: registerpush:// (shows the system prompt). Status: checkNativePushPermissions:// then read
  window.nativePushEnabled after a short delay. System settings: settingsapp://
- Push user ID: getonesignalplayerid:// then read window.onesignalplayerid; store it on the user profile.
- Local notification: sendlocalpushmsg://push.send?s=SECONDS=msg!MESSAGE&!#TITLE&!#URL
  Cancel all: sendlocalpushmsg://push.send.cancel
- Biometrics: bioauth:// then the wrapper calls window.onBioAuthSuccess(), window.onBioAuthFailure(code, message)
  or window.onBioAuthUnavailable(). Treat success as a UI gate only; the server session stays the source of truth.
- Scanner: qrcode:// opens the native scanner and loads the scanned URL in the app.
  barcodescanner:// then read window.barcodescanresult.
- Share sheet: shareapp://message?=TEXT&url=URL (URL-encode both values).
- Haptics: lighthaptic://, heavyhaptic://, successhaptic://, warninghaptic://, errorhaptic:// (mediumhaptic:// is iOS only).
- Downloads: savethisimage://?url=IMAGE_URL saves to the photo library; links ending in .pdf, .docx, .xlsx or .mp3
  download natively.
- Purchases: revenuecat://purchase?external_id=USER_ID&product=PRODUCT_ID. Entitlements arrive through the
  RevenueCat webhook at /api/webhooks/revenuecat and are stored in the subscriptions table.
- App version: getappversion:// then read window.versionNumber. Rating prompt: rateapp://

## Store rules (never break these)
- Apple 4.2: the app must do more than the website. Push, offline handling and the share sheet must keep working.
- Apple 4.8: a third-party login exists, so Sign in with Apple stays available and equally prominent.
- Apple 5.1.1 and Google Play: /privacy must describe real data practices; Delete account stays in settings and works.
- Apple 3.1.1 and Google Play billing: inside the native app, digital goods go through revenuecat://, never Stripe.
  Never render external payment links or web prices when isNativeApp() is true.
- Apple 2.3: no beta labels, no coming-soon screens, no placeholder content in production.
- Apple 4.0: safe-area padding on fixed bars, 44 px tap targets, no horizontal overflow at 320 px width.
- Never add Download our app banners, builder badges or cookie walls.

## Conventions
- Mobile first. Verify every UI change at 320 px, 390 px and at iPad width.
- Every data fetch has loading, empty and error states with a retry action.
- Secrets stay server-side. The client bundle must never contain a service-role key or a webhook secret.
- Routes the native apps and store listings depend on: /, /login, /privacy, /terms, /delete-account, /settings.
  Changing or removing one of them requires a note in docs/native-app.md.

Was die einzelnen Blöcke tun

Projekt

Stack, Hosting und Befehle. Der Agent nutzt die Befehle, um seine eigene Arbeit zu prüfen; nimm den auf, der deine Tests startet.

Nativer App-Kontext

Der mit Abstand wichtigste Block. Er erklärt, dass es eine WebView gibt, wie man sie erkennt, dass native Features URL-Schemas sind und wo die Dokumentation liegt. Über den llms-full.txt-Link kann der Agent Details selbst nachschlagen, statt zu raten.

In diesem Projekt genutzte Bridge

Nur die Schemas, die du wirklich nutzt, mit ihren Rückgabevariablen. Das verhindert erfundene API-Namen, den häufigsten Fehler, den ein Agent bei jeder Bridge macht.

Store-Regeln

Jede Zeile ist einer Richtliniennummer zugeordnet, damit der Agent seine Entscheidungen in einer Diff-Zusammenfassung erklären kann. Halte die Liste kurz; eine lange Regelliste wird nur überflogen.

Konventionen

Breakpoints, Umgang mit Zuständen, Secrets und die geschützten Routen. Die Zeile zu den geschützten Routen bewahrt dich vor einem Refactoring, das /delete-account stillschweigend entfernt.

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!

Kevin Joling · FlightConnections & TrainConnections · Trustpilot

Das Template anpassen

  1. Das User-Agent-Token in WebViewGold setzen

    Das Template geht davon aus, dass sich die Apps zu erkennen geben. Setze in Config.swift useragent_iphone und useragent_ipad, in Config.java USER_AGENT, jeweils auf einen normalen mobilen User-Agent-String, gefolgt von einem Leerzeichen und WebViewGoldApp. Bleiben sie leer, wird der Standard-User-Agent des Systems verwendet, den dein Code nicht von Safari oder Chrome unterscheiden kann.

  2. Den Helper anlegen, auf den die Datei verweist

    Bitte Claude Code: "Create src/lib/native.ts with isNativeApp() as described in CLAUDE.md and a callNative(scheme) function that sets window.location.href only when isNativeApp() is true." Alles Weitere kann auf diesen zwei Funktionen aufbauen.

  3. Die Bridge-Liste kürzen

    Lösche Zeilen für Features, die du in den WebViewGold-Projekten nicht aktiviert hast. Ein Schema, das gelistet, aber in Config.swift nicht eingeschaltet ist (zum Beispiel Push ohne Push-Dienst), tut zur Laufzeit nichts und verwirrt beim Debuggen.

  4. Aktuell halten

    Wenn du ein neues natives Feature aktivierst oder eine geschützte Route änderst, aktualisiere die Datei im selben Commit. Claude Code erledigt das für dich, wenn du es bittest: "update CLAUDE.md to reflect this change".

Schema-Referenz, auf die sich der Agent stützt

FeatureAufrufErgebnis
Push-Berechtigungregisterpush://Systemdialog; später setzt checkNativePushPermissions:// die Variable nativePushEnabled
Biometrie-Prüfungbioauth://Ruft onBioAuthSuccess(), onBioAuthFailure(code, message) oder onBioAuthUnavailable() auf
QR-Scannerqrcode://Gescannte URL wird in der App geladen
Share Sheetshareapp://message?=TEXT&url=URLNativer Teilen-Dialog
Kaufrevenuecat://purchase?external_id=…&product=…Kaufdialog des Stores; Entitlement über RevenueCat
Push-Nutzer-IDgetonesignalplayerid://Setzt onesignalplayerid

Häufig gestellte Fragen

Funktioniert dieselbe Idee auch mit Cursor oder Codex?

Ja. Cursor liest Project-Rules-Dateien und Codex liest AGENTS.md. Der Inhalt ist derselbe; nur Dateiname und Speicherort unterscheiden sich. Siehe die Templates für Cursor Rules und AGENTS.md in diesem Bereich.

Soll ich die komplette WebViewGold-Dokumentation in die CLAUDE.md einfügen?

Nein. Verlinke llms-full.txt und liste nur die Schemas, die du nutzt. Eine riesige Kontextdatei verwässert die Regeln, auf die es ankommt, und der Agent kann Details bei Bedarf nachladen.

Wo halte ich Einstellungen fest, die sich zwischen iOS und Android unterscheiden?

Im Template selbst, als kurze Notiz neben dem Schema (zum Beispiel, dass mediumhaptic:// nur auf iOS existiert). Für größere Unterschiede legst du eine Datei docs/native-app.md an und verweist aus der CLAUDE.md darauf.

Kann Claude Code die CLAUDE.md für mich schreiben?

Es kann aus der Codebasis einen Entwurf erstellen, weiß aber nichts vom nativen Wrapper, solange du es ihm nicht sagst. Starte mit diesem Template und lass den Agenten dann Stack- und Routendetails ergänzen.

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 ansehen

Full 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 WeSetupYourWebViewApp

Winter-Sale-Preise gültig bis 31. Dezember 2026.

Bereit, deine App zu veröffentlichen?

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.