# Native App Feeling für Web Apps: 12 React-Fixes
> Native App Feeling auf dem Handy: 12 Details für deine Web App, von sofortigen Taps über Action Sheets und wischbare Tabs bis zu Haptik und Large Titles.
- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 13. Okt. 2026
- Kategorie: [Mobile UI mit React](https://wingo-ui.com/de/blog/category/mobile-ui)
- Lesezeit: 11 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/web-app-that-feels-native
- Englische Fassung: https://wingo-ui.com/blog/web-app-that-feels-native
## Kurz gesagt
Eine Web App mit Native App Feeling auf dem Handy macht zuerst das Verhalten richtig und erst danach die Optik. Sie startet standalone und randlos, reagiert sofort auf einen Tap, ohne graues Aufblitzen und ohne Double-Tap-Zoom, öffnet Menüs und Picker als Sheets von unten, unterstützt Wischen zwischen Tabs und Pull to Refresh und hält den Composer über der Tastatur. Large Titles, In-App-Banner und Haptik kommen zuletzt, und jedes davon braucht einen sichtbaren Fallback, weil die Browser sie unterschiedlich gut unterstützen.
Du hast die App gebaut, sie zum Home-Bildschirm hinzugefügt, und sie fühlt sich trotzdem wie eine Website an: Links blitzen grau auf, wenn du tippst, ein Doppeltipp auf einen Button zoomt die Seite, das Menü öffnet sich als winziges Popover unter deinem Daumen, und die Tastatur verdeckt das Nachrichtenfeld. Native App Feeling entsteht aus einem Dutzend kleiner Verhaltensweisen, und die meisten davon kosten nur etwas CSS oder ein paar Props. Diese Liste geht zwölf davon durch, vom Start bis zur Tastatur, jeweils mit der Komponente, die wir dafür in Wingo UI gebaut haben, dem Code und dem, was ein Browser noch nicht kann.
Die Liste ist das praktische Gegenstück zu [Mobile-first React-Komponenten](https://wingo-ui.com/de/blog/mobile-first-react-components), wo es um die Layout-Regeln dahinter geht. Weitere Guides findest du unter [Mobile UI in React](https://wingo-ui.com/de/blog/category/mobile-ui).
## Wann fühlt sich eine Web App auf dem Handy nativ an?
Erst das Verhalten, dann die Optik. Die meisten Tipps dazu, wie sich eine PWA wie eine native App anfühlt, hören bei einem Manifest und ein paar Meta-Tags auf. Das ist Schritt eins von zwölf. Nutzer verzeihen einer Web App, dass sie nicht genau wie die Einstellungen auf dem iPhone aussieht. Sie merken aber sofort, wenn ein Tap wartet, eine Geste nichts tut oder die Tastatur verdeckt, was sie tippen. Wer Web Apps wie native Apps bauen will, behebt genau das zuerst. Deshalb beginnen die zwölf Details unten mit denen, die jede App braucht, und enden mit dem Feinschliff.
| # | Detail | Werkzeug |
|---|---|---|
| 1 | Standalone und randlos starten | Manifest, `viewport-fit=cover`, Safe Area Insets |
| 2 | Taps, die sofort reagieren | `touch-manipulation`, Tap-Highlight, Pressed State |
| 3 | Eingabefelder, die nie die Seite zoomen | 16px Text auf Handys |
| 4 | Bedienelemente, die sich nicht wie ein Dokument verhalten | `select-none`, `overscroll-behavior` |
| 5 | Navigation am Daumen | [Bottom Tab Bar](https://wingo-ui.com/components/bottom-tab-bar) |
| 6 | Ein Large Title, der an die Leiste übergibt | [Large Title Header](https://wingo-ui.com/components/large-title-header) |
| 7 | Tabs zum Wischen | [Swipeable Tabs](https://wingo-ui.com/components/swipeable-tabs) |
| 8 | Action Sheets statt Dropdowns | [Action Sheet](https://wingo-ui.com/components/action-sheet) |
| 9 | Bottom Sheets für alles andere | [Drawer](https://wingo-ui.com/components/drawer) |
| 10 | Pull to Refresh | [Pull To Refresh](https://wingo-ui.com/components/pull-to-refresh) |
| 11 | In-App-Banner für Live-Ereignisse | [Notification Banner](https://wingo-ui.com/components/notification-banner) |
| 12 | Haptik, ein Composer über der Tastatur und reduzierte Bewegung | [Haptic Button](https://wingo-ui.com/components/haptic-button), `useKeyboardInset` |
## 1. Startet sie wie eine App?
Eine installierte App öffnet sich ohne Adressleiste und füllt den Bildschirm. Dafür brauchst du ein Manifest mit `display: "standalone"` und einen Viewport, der bis an die Ränder reicht. Im Next.js App Router sind beides Dateien und Exports:
```tsx
// app/manifest.ts
import type { MetadataRoute } from "next";
export default function manifest(): MetadataRoute.Manifest {
return {
name: "Northwind CRM",
short_name: "Northwind",
start_url: "/",
display: "standalone",
background_color: "#ffffff",
theme_color: "#ffffff",
icons: [
{ src: "/icon-192.png", sizes: "192x192", type: "image/png" },
{ src: "/icon-512.png", sizes: "512x512", type: "image/png" },
],
};
}
```
```tsx
// app/layout.tsx
import type { Viewport } from "next";
export const viewport: Viewport = {
width: "device-width",
initialScale: 1,
viewportFit: "cover",
};
```
Mit `viewportFit: "cover"` rendert die Seite bis unter die Notch und den Home-Indikator. Jede Leiste, die an einem Rand fixiert ist, braucht also ihr eigenes Padding mit `env(safe-area-inset-*)`. Unser [Tailwind Safe Area Guide](https://wingo-ui.com/de/blog/tailwind-safe-area-insets) hat die Utilities und die Rechnung für gestapelte Leisten. Manche Details ergeben erst nach der Installation Sinn, etwa das Ausblenden deines eigenen Install-Banners. Mit einer Custom Variant bleibt das im CSS:
```css
/* app/globals.css */
@custom-variant standalone (@media (display-mode: standalone));
```
Dann blendet `standalone:hidden` ein Element in der installierten App aus. Der [Guide zum React PWA Install Prompt](https://wingo-ui.com/de/blog/react-pwa-install-prompt) zeigt, wie Nutzer die App in Chrome, Edge und auf dem iPhone installieren.
## 2. Reagiert ein Tap sofort?
Bei einem nativen Control zeigt sich der Druck direkt unter deinem Finger, ohne grauen Kasten und ohne Warten. Mit zwei CSS-Details schafft das auch ein Web-Button. `touch-action: manipulation` schaltet den Double-Tap-Zoom auf dem Element ab, damit ein schneller zweiter Tap auf einen Stepper nie die Seite zoomt. WebKit erklärt in seinem [Beitrag zu schnellem Tippen](https://webkit.org/blog/5610/more-responsive-tapping-on-ios/) (Dezember 2015), dass einzelne Taps damit außerdem auf jeder Zoomstufe sofort ankommen. Und `-webkit-tap-highlight-color: transparent` entfernt den halbtransparenten Kasten, den Safari und Chrome über einen getippten Link legen. Das Preflight von Tailwind CSS v4 setzt ihn auf `html` schon auf transparent. In einer Tailwind-App ist die Aufgabe also die umgekehrte: Gib jedem drückbaren Element einen eigenen Pressed State.
```tsx
```
Der kostenlose [Button](https://wingo-ui.com/components/button) von Wingo UI trägt beide Klassen selbst. Ein kopierter Button behält sie also ohne globales Stylesheet und reagiert beim Drücken mit einer Spring statt einer CSS-Transition. Unser [Tutorial zu Tailwind touch-manipulation](https://wingo-ui.com/de/blog/tailwind-touch-manipulation) geht jeden `touch-*`-Wert durch und zeigt, welchen Bug er jeweils behebt.
## 3. Zoomt die Seite, wenn ein Feld den Fokus bekommt?
Safari auf iOS zoomt in ein fokussiertes Feld, dessen Text kleiner als 16px ist, und zoomt nicht wieder heraus, wenn das Feld den Fokus verliert. `maximum-scale=1` im Viewport stoppt diesen Zoom. Dann blockieren Android-Browser aber den Pinch-Zoom für die ganze Seite, und Lighthouse lässt die Seite in seinem Accessibility-Audit zum Viewport durchfallen. Nimm auf Handys 16px Text und ab `md` deine kleinere Größe:
```tsx
```
Das Design-System von Wingo UI macht daraus eine Regel für jedes Textfeld, `text-base md:text-sm`, und die gemeinsame Field-Box und der Prompt Input halten sich daran. Achte auf denselben Bug an Stellen, die man leicht übersieht: Ein Suchfeld im Header, ein `select` und ein `contenteditable`-Editor zoomen alle die Seite, wenn ihre berechnete Schriftgröße unter 16px liegt.
## 4. Verhält sich die Oberfläche wie ein Dokument?
Nur dort, wo sie es soll. Eine Webseite lässt dich jeden Text markieren und reicht einen Scroll aus einer inneren Liste an die Seite dahinter weiter. Eine App tut beides bei ihren Controls nicht. Setz `select-none` auf Buttons, Tabs und Leisten, damit ein langer Druck auf einen Tab nicht sein Label markiert. Echter Inhalt bleibt markierbar: Leute kopieren Adressen, Bestellnummern und Fehlermeldungen. Setz `overscroll-behavior: contain` (`overscroll-contain`) auf innere Scroller, damit das Ende einer Liste in einem Sheet nicht die Seite dahinter scrollt; Safari unterstützt das ab Version 16. Callouts bei langem Druck auf Bilder in deinen Bedienelementen verschwinden mit `[-webkit-touch-callout:none]`, das Safari unterstützt und andere Browser ignorieren.
## 5. Liegt die Navigation am Daumen?
Native Apps legen ihre 3 bis 5 Hauptbereiche in eine Leiste unten, wo der Daumen schon ist. Im Web braucht diese Leiste den Inset für den Home-Indikator, ein Ausblenden beim Scrollen und einen Weg, dem Rest der Seite ihre Höhe mitzuteilen. Die [Bottom Tab Bar](https://wingo-ui.com/components/bottom-tab-bar) erledigt diese drei Dinge, und unser [Guide zur React Bottom Navigation Bar](https://wingo-ui.com/de/blog/react-bottom-navigation-bar) baut eine Schritt für Schritt. Behalte ab `md` eine Sidebar: Eine Tab-Leiste auf einem 1440px-Bildschirm sieht aus wie eine Handy-App, die man in die Breite gezogen hat.
## 6. Verhält sich der Titel wie auf iOS?
Der Large Title von iOS ist das bekannteste Detail einer iPhone-App: eine 34px-Überschrift, die mit der Seite nach oben scrollt und an einen kleinen Titel in einer Milchglas-Leiste übergibt. Der [Large Title Header](https://wingo-ui.com/components/large-title-header) folgt deinem Finger durch diese Übergabe, rastet ganz ausgeklappt oder ganz eingeklappt ein, wenn du auf halbem Weg aufhörst, und streckt den Titel um bis zu 8 %, wenn du in Safari über den oberen Rand hinaus ziehst. Der Titel bleibt das einzige `h1` der Seite, und bei reduzierter Bewegung wird die Übergabe zu einem sofortigen Wechsel. Der [Guide zum React Collapsing Header](https://wingo-ui.com/de/blog/react-collapsing-header) baut diese Übergabe und einen Foto-Hero mit Motion Values.
```tsx
"use client";
import { useState } from "react";
import { SquarePen } from "lucide-react";
import { Button } from "@/components/ui/button";
import { LargeTitleHeader } from "@/components/ui/large-title-header";
export function MessagesHeader() {
const [query, setQuery] = useState("");
return (
}
/>
);
}
```
> Live-Demo (Large Title Header): Scroll durch die Unterhaltungen: Der Large Title gleitet nach oben, und der kompakte Titel steigt in die Glasleiste. Tipp auf Search, und das Feld rückt direkt unter die Leiste, mit einem Cancel-Button. Probier sie unter [Large Title Header](https://wingo-ui.com/components/large-title-header) aus und installier sie mit `npx wingo-ui@latest add large-title-header`.
Nutz ihn auf Listen der obersten Ebene und auf Einstellungsseiten. Detailseiten lesen sich besser mit `mode="compact"`, das nur die Leiste zeigt, so wie iOS es auf einer geöffneten Unterseite tut.
## 7. Kannst du zwischen Tabs wischen?
Auf einem Handy sind Tabs Seiten nebeneinander, und ein seitliches Wischen wechselt zwischen ihnen. Einfache Tabs, die nur auf Taps reagieren, wirken wie eine Website. Die [Swipeable Tabs](https://wingo-ui.com/components/swipeable-tabs) legen die Seiten in eine native Scroll-Snap-Reihe. Das Wischen nutzt also das native Momentum des Browsers, und die Unterstreichung dehnt sich zwischen den Tabs, während die Seiten sich bewegen. Ein vertikaler Scroll innerhalb einer Seite wechselt nie den Tab, und ein Tap auf den aktiven Tab scrollt seine Seite zurück nach oben. Der [Guide zu React Swipeable Tabs](https://wingo-ui.com/de/blog/react-swipeable-tabs) erklärt den Scroll-Snap-Track und den Indikator im Detail.
```tsx
import { SwipeableTabs } from "@/components/ui/swipeable-tabs";
import { ClientList } from "./client-list"; // deine eigene Liste
export function ClientTabs() {
return (
},
{ value: "active", label: "Aktiv", badge: 2, content: },
{ value: "overdue", label: "Überfällig", badge: 1, content: },
]}
/>
);
}
```
> Live-Demo (Swipeable Tabs): Wisch die Kundenliste zur Seite oder wisch mit zwei Fingern auf einem Trackpad: Der Indikator folgt den Seiten, und ein Tap auf einen Tab gleitet dorthin. Probier sie unter [Swipeable Tabs](https://wingo-ui.com/components/swipeable-tabs) aus und installier sie mit `npx wingo-ui@latest add swipeable-tabs`.
Wischen ist nie der einzige Weg: Jeder Tab bleibt ein Button, und die Pfeiltasten wechseln zwischen ihnen. Seiten werden standardmäßig erst bei Bedarf gemountet und bleiben danach gemountet (`lazy` und `keepMounted`). Eine Seite, zu der du zurückwischst, wird also nicht von Grund auf neu gemountet.
## 8. Öffnen sich Menüs als Action Sheets?
Auf einem Handy sollten sie das. Tipp in einer nativen App auf den „Mehr“-Button, und ein Sheet mit Aktionen steigt von unten auf, mit einer roten destruktiven Zeile und einem separaten Abbrechen. Ein Dropdown, das an einem 44px-Button hängt, verdeckt den Daumen, der es geöffnet hat. Das [Action Sheet](https://wingo-ui.com/components/action-sheet) öffnet sich auf Handys immer als Sheet. Ab 768px wird es standardmäßig zu einem kompakten Dialog, oder mit `desktop="popover"` zu einem Menü am Trigger. Der [Guide zum React Action Sheet](https://wingo-ui.com/de/blog/react-action-sheet) behandelt asynchrone Zeilen und was passiert, wenn eine Aktion scheitert. Du kannst es auch mit await aufrufen, was die Aufrufstelle kurz hält:
```tsx
"use client";
import { MoreHorizontal } from "lucide-react";
import { useActionSheet } from "@/components/ui/action-sheet";
import { Button } from "@/components/ui/button";
type PhotoMenuProps = { onSave: () => void; onDelete: () => Promise };
export function PhotoMenu({ onSave, onDelete }: PhotoMenuProps) {
const actionSheet = useActionSheet();
async function open() {
const id = await actionSheet.show({
actions: [
{ id: "save", label: "In Fotos sichern" },
{ id: "delete", label: "Für mich löschen", tone: "danger", onSelect: onDelete },
],
});
if (id === "save") onSave();
}
return (
);
}
```
`show()` braucht einen `ActionSheetProvider` nahe der Wurzel (ohne ihn wirft es einen Fehler) und wird mit der gewählten id aufgelöst, beim Abbrechen mit `null`. Gibt eine Aktion ein Promise zurück, zeigt ihre Zeile einen Spinner, bis es abgeschlossen ist. Wird das Promise abgelehnt, schüttelt sich die Zeile, und das Sheet bleibt für einen neuen Versuch offen.
> Live-Demo (Action Sheet): Tipp auf den Menü-Button des Inserats: Das Sheet steigt mit den Aktionen und einem separaten Cancel auf. Probier Delete listing aus: Die Zeile zeigt einen Spinner, bis ihr Promise aufgelöst ist. Probier sie unter [Action Sheet](https://wingo-ui.com/components/action-sheet) aus und installier sie mit `npx wingo-ui@latest add action-sheet`.
Setz `variant="material"` für ein einzelnes, durchgehendes Sheet mit Griff und Icon-Zeilen, näher an Android.
## 9. Öffnen sich Picker und Formulare von unten?
Alles, was auf einem Desktop über der Seite schweben würde, also Filter, ein Date Picker, ein Teilen-Menü oder ein kurzes Formular, sollte auf einem Handy von unten aufsteigen. Dort erreicht es der Daumen und kann es wegziehen. Der kostenlose [Drawer](https://wingo-ui.com/components/drawer) ist das Sheet, das der Rest der Bibliothek nutzt: Ziehen zum Schließen, Snap Points, ein scrollbarer Inhalt, der das Sheet erst bewegt, wenn die Liste wieder ganz oben ist, und ab 768px ein zentriertes Sheet, ein Seitenpanel oder ein Dialog, gesetzt mit `desktop`. Der [Guide zum React Bottom Sheet](https://wingo-ui.com/de/blog/react-bottom-sheet-for-the-web) behandelt Snap Points und die Tastatur im Detail.
## 10. Funktioniert Pull to Refresh?
In einer installierten PWA nur, wenn du die Geste selbst einbaust. Nutzer ziehen eine Liste ganz automatisch nach unten, um sie neu zu laden, und in einer Standalone-PWA fehlt das browsereigene Pull to Refresh oder lädt die ganze Seite neu. [Pull To Refresh](https://wingo-ui.com/components/pull-to-refresh) ergänzt die Geste mit Gummiband-Widerstand und einem Pfeil, iOS-Speichen oder einem Material-Ring:
```tsx
import { PullToRefresh } from "@/components/ui/pull-to-refresh";
import { InboxList } from "./inbox-list"; // deine eigene Liste
export function Inbox({ reload }: { reload: () => Promise }) {
return (
);
}
```
Die Komponente setzt `overscroll-behavior-y: contain` auf den Scroller, damit Chrome die Seite nicht neu lädt. Sie ignoriert seitliches Wischen, startet nie einen Zug in einem Eingabefeld oder in einer verschachtelten Liste, die nicht oben steht, und dreht sich mindestens 500ms, damit der Indikator nie nur kurz aufblitzt. Für die Tastatur gibt es keine Geste, also behalte für Maus- und Tastaturnutzer einen Reload-Button oder einen `shortcut`. Der [Guide zu React Pull to Refresh](https://wingo-ui.com/de/blog/react-pull-to-refresh) erklärt, warum Safari dafür einen nicht-passiven `touchmove`-Listener braucht.
## 11. Kommen Live-Ereignisse wie Benachrichtigungen an?
Ein Toast unten passt zu „Gespeichert“. Eine neue Nachricht, eine Bestellung oder eine Erinnerung, die eintrifft, während jemand die App nutzt, liest sich besser als Banner von oben, wie die Banner des Systems. Der [Notification Banner](https://wingo-ui.com/components/notification-banner) zeigt sie einzeln nacheinander, lässt dich ein Banner nach oben wischen, um es zu schließen, oder nach unten ziehen, um seine Aktionen auszuklappen, und pausiert seinen Timer, solange du es festhältst:
```tsx
"use client";
import { useRouter } from "next/navigation";
import { MessageCircle } from "lucide-react";
import { notify } from "@/components/ui/notification-banner";
export function useMessageBanner() {
const router = useRouter();
return (message: { id: string; from: string; text: string }) =>
notify({
id: `message-${message.id}`,
title: message.from,
message: message.text,
icon: ,
onPress: () => router.push(`/messages/${message.id}`),
});
}
```
Mounte `` einmal nahe der Wurzel. Schickst du dieselbe `id` noch einmal, wird das Banner an Ort und Stelle aktualisiert, statt ein Duplikat darüberzustapeln. Das zählt, wenn ein Socket dasselbe Ereignis zweimal liefert. Das ist ein In-App-Banner; es ersetzt kein Web Push für Leute, die die App geschlossen haben.
## 12. Was ist mit Haptik, Tastatur und Bewegung?
Drei letzte Details, jedes mit einer Grenze, die du kennen solltest.
**Haptik.** Der [Haptic Button](https://wingo-ui.com/components/haptic-button) drückt sich mit einer Spring, breitet einen Ripple vom Berührungspunkt aus und spielt beim Berühren einen leichten Tick. Sein `mode="hold"` füllt sich, während du zum Bestätigen eines Löschvorgangs gedrückt hältst. Der Tick nutzt `navigator.vibrate`, das in Chromium auf Android nach dem ersten Tap funktioniert. Safari auf dem iPhone hat keine Vibration API, und seit iOS 26.5 kann eine Webseite den System-Tick eines versteckten Switches nicht mehr auslösen. Auf einem aktuellen iPhone tragen also der Druck und die Füllung das Feedback allein. Unser [Guide zur Web Vibration API](https://wingo-ui.com/de/blog/web-vibration-api-haptic-feedback) zeigt, was noch tickt.
**Die Tastatur.** Auf iOS, und auf Android seit Chrome 108, verdeckt die Tastatur fixierte Leisten, statt sie nach oben zu schieben. Ein Chat-Composer, der unten fixiert ist, muss ihr folgen. Der Hook `useKeyboardInset` meldet die verdeckte Höhe als Motion Value, und der [Guide zur iOS-Safari-Tastatur](https://wingo-ui.com/de/blog/ios-safari-keyboard-position-fixed) baut den Composer Schritt für Schritt.
**Bewegung.** Native Übergänge nutzen Springs und respektieren die Systemeinstellung für reduzierte Bewegung. Die Komponenten in diesem Beitrag holen ihre Springs aus einem gemeinsamen Satz in `lib/motion` und lesen die Einstellung für reduzierte Bewegung. Die Übergabe des Titels wird dann zu einem sofortigen Wechsel, das Action Sheet blendet ein, statt zu gleiten, und der Haptic Button lässt Eindrücken, Ripple und Schütteln weg.
## Womit solltest du anfangen?
Fang mit denen an, die nichts kosten, denn sie beheben die Anzeichen, die jeder bemerkt: Start (1), Taps (2), Zoom (3) und das Dokument-Verhalten (4) sind CSS und ein Manifest. Dann die Sheets: `npx wingo-ui@latest add drawer` installiert den kostenlosen Drawer. Bottom Tab Bar, Large Title, Swipeable Tabs, Action Sheet, Pull To Refresh, Banner, Haptic Button und der Tastatur-Hook gehören zu [Wingo UI Pro](https://wingo-ui.com/de/pricing), mit Live-Demos auf jeder Komponentenseite. So kannst du das Native App Feeling auf deinem Handy ausprobieren, bevor du etwas installierst.
## Komponenten in diesem Artikel
- [Large Title Header](https://wingo-ui.com/components/large-title-header) (Pro): A React iOS large title header that shrinks into a compact title in a glass bar as you scroll. Installation: `npx wingo-ui@latest add large-title-header`
- [Action Sheet](https://wingo-ui.com/components/action-sheet) (Pro): A React iOS-style action sheet: a short list of actions with a title, red destructive rows, a separate Cancel and an awaitable show(). Installation: `npx wingo-ui@latest add action-sheet`
- [Notification Banner](https://wingo-ui.com/components/notification-banner) (Pro): iOS-style React notification banners for messages, orders and reminders that drop from the top one at a time, with a queue. Installation: `npx wingo-ui@latest add notification-banner`
- [Swipeable Tabs](https://wingo-ui.com/components/swipeable-tabs) (Pro): React swipeable tabs whose pages sit side by side and follow your thumb: swipe and the indicator tracks the finger, tap and the pages slide. Installation: `npx wingo-ui@latest add swipeable-tabs`
- [Haptic Button](https://wingo-ui.com/components/haptic-button) (Pro): A React haptic button that feels native: spring press, touch ripple, a haptic tick, a long-press action and a hold-to-confirm mode. Installation: `npx wingo-ui@latest add haptic-button`
- [Pull To Refresh](https://wingo-ui.com/components/pull-to-refresh) (Pro): A React pull to refresh wrapper: pull a list past its top to reload it, with rubberband resistance, iOS spokes or a Material ring, haptics. Installation: `npx wingo-ui@latest add pull-to-refresh`
## Häufige Fragen
### Was braucht eine PWA, damit sie sich wie eine native App anfühlt?
Starte sie mit display standalone und viewport-fit=cover, gib jeder fixierten Leiste die Safe Area Insets als Padding und behebe das Verhalten, das eine Webseite verrät: langsame oder blitzende Taps, Dropdown-Menüs, wo ein Handy ein Sheet erwartet, fixierte Leisten, die von der Tastatur verdeckt werden, und Seiten, die wie Dokumente scrollen. Visuelle Details wie Large Titles kommen danach.
### Kann eine Web App auf dem iPhone haptisches Feedback nutzen?
Kaum. Safari hat keine Vibration API, und seit iOS 26.5 kommt der System-Tick eines nativen Switches nur, wenn die Person ihn selbst per Tap umschaltet. Eine Web App kann also nicht auf Abruf ticken. Android Chrome unterstützt navigator.vibrate nach dem ersten Tap, also behandle Haptik als Extra und gib jedem Tick eine sichtbare Entsprechung.
### Sollte eine Web App auf Android das iOS-Design kopieren?
Kopier das Verhalten, das beide Plattformen teilen, etwa Sheets von unten, Tabs zum Wischen und sofortiges Feedback beim Drücken. Plattformspezifische Optik ist eine Entscheidung: Mehrere Komponenten von Wingo UI bieten eine iOS- und eine Material-Variante, zum Beispiel das Action Sheet und der Indikator von Pull To Refresh.
### Woran erkennt man, dass eine App nur eine Website ist?
Die üblichen Anzeichen sind ein grauer Kasten über getippten Links, eine Seite, die zoomt, wenn du doppelt auf einen Button tippst oder ein kleines Eingabefeld fokussierst, Menüs, die als winzige Popover aufgehen, die Tastatur über einer unteren Leiste, Text, der markiert wird, wenn du einen Button hältst, und die ganze Seite, die hinter einer scrollenden Liste federt.
### Sind diese Komponenten kostenlos?
Button und Drawer, die die Grundlagen für Taps und Sheets liefern, sind in Wingo UI kostenlos. Bottom Tab Bar, Large Title Header, Swipeable Tabs, Action Sheet, Pull To Refresh, Notification Banner, Haptic Button und der Hook useKeyboardInset gehören zu Wingo UI Pro.
---
Quelle: https://wingo-ui.com/de/blog/web-app-that-feels-native