⚡Web APIs

Share API einbauen

Nativer Teilen-Dialog direkt aus deiner Web-App

Die Web Share API oeffnet den nativen Teilen-Dialog des Betriebssystems. Dein Nutzer kann Inhalte direkt an WhatsApp, Instagram, E-Mail oder jede andere App senden. Ohne Social-Media SDKs.

Pro-Tip — Der schnelle Weg
Pruefe mit navigator.canShare() ob der Inhalt teilbar ist bevor du den Button anzeigst. Besonders bei Dateien variiert der Support stark zwischen Browsern.
Seite 1
1

Share API aufrufen

navigator.share() oeffnet den nativen Dialog. Du uebergibst Titel, Text und URL. Der Nutzer waehlt die Ziel-App selbst.

async function shareContent() {
 if (navigator.share) {
 await navigator.share({
 title: 'Schau dir das an',
 text: 'Diese App ist echt gut',
 url: window.location.href
 });
 }
}
2

Fallback fuer Desktop

Die Share API funktioniert hauptsaechlich auf Mobilgeraeten. Auf dem Desktop zeigst du einen Fallback mit Copy-to-Clipboard und direkten Social-Media Links.

async function shareOrCopy() {
 if (navigator.share) {
 await navigator.share({ title, url });
 } else {
 await navigator.clipboard.writeText(url);
 toast('Link kopiert!');
 }
}
3

Dateien teilen

Du kannst auch Bilder und andere Dateien ueber die Share API teilen. Ideal fuer generierte Charts, QR Codes oder erstellte Grafiken.

const file = new File([blob], 'bild.png', { type: 'image/png' });


if (navigator.canShare?.({ files: [file] })) {
 await navigator.share({
 files: [file],
 title: 'Mein Ergebnis'
 });
}
4

Share Button Komponente

Bau eine wiederverwendbare Komponente die automatisch prueft ob Share unterstuetzt wird und den passenden Button anzeigt.

function ShareButton({ title, url }: { title: string; url: string }) {
 const canShare = typeof navigator !== 'undefined' && !!navigator.share;


 return canShare ? (
 <button onClick={() => navigator.share({ title, url })}>
 Teilen
 </button>
 ) : (
 <button onClick={() => navigator.clipboard.writeText(url)}>
 Link kopieren
 </button>
 );
}
5

Share Target registrieren

Als PWA kannst du deine App auch als Share-Ziel registrieren. Andere Apps koennen dann Inhalte an deine App senden, genau wie an native Apps.

// manifest.json
{
 "share_target": {
 "action": "/share-target",
 "method": "POST",
 "params": {
 "title": "title",
 "text": "text",
 "url": "url"
 }
 }
}
Seite 2
Warum das funktioniert
  • Nativer Dialog kennt alle installierten Apps des Nutzers
  • Kein Einbinden von Facebook SDK, Twitter SDK oder anderen
  • Nutzer teilen oefter wenn der Prozess einfach ist
  • Funktioniert mit jeder App, nicht nur Social Media
Tipps
  • Share API braucht einen User-Gesture, kein automatisches Teilen moeglich
  • Teste auf echten Mobilgeraeten fuer das volle Erlebnis
  • canShare pruefen bevor Dateien geteilt werden
  • Der Fallback mit Clipboard ist auf Desktop unverzichtbar
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen