Native Share Funktion verwenden
Endlich keine Drittanbieter API's mehr
Die Native Share API ermöglicht es dir, über JavaScript den nativen Teilen-Dialog des Betriebssystems zu öffnen – also beispielsweise für Teilen, WhatsApp, Mail, Messages, Nearby Share usw., sofern Browser und Gerät dies unterstützen. Dabei ist zu beachten, dass Mozilla Firefox dies leider nicht unterstützt.
HTML Element
<button share> Share </button>
Javascript
Nun weisen wir dem Button die Funktion via Javascript zu.
document.querySelector('[share]')?.addEventListener('click', () => {
let shareData = {
title: document.title,
text: '',
url: document.location.href,
};
if (!navigator.canShare) return;
if (!navigator.canShare(shareData)) return;
navigator.share(shareData).catch(e => console.log('Error: ', e));
});
Dateien teilen
Neben Text, Titel und URL kann die Native Share API auch Dateien über den nativen Teilen-Dialog des Geräts weitergeben. Dadurch lassen sich beispielsweise Bilder, PDFs oder andere vom Browser unterstützte Dateien direkt an Apps wie Messenger, Mail-Clients oder Cloud-Dienste übergeben. Dazu wird die Datei als File-Objekt an die files-Eigenschaft von navigator.share() übergeben:
if (navigator.canShare?.({ files: [file] })) {
navigator.share({
title: 'Dokument teilen',
files: [file]
});
}
Lorem ipsum dolor s
Fallback
Die Native Share API funktioniert nicht überall. Deshalb ist eine Fallback-Logik sinnvoll:
if (navigator.share) {
// Native Share
} else {
// z. B. URL in Zwischenablage kopieren
}
Möchtest Du dies ausprobieren? Klicke auf den nachfolgenden Button.