Toto API je podle mého reakce na různé JavaScripty třetích stran pro sdílení stránky na různých sociálních sítí.

Např. v roce 2013 bylo běžné, že na webech byla sdílecí tlačítka pro Facebook, Twitter a ostatní sociální sítě.

Tato sdílecí tlačítka mají značný dopad na soukromí uživatele, protože provozovatel kódu v JavaScriptu servírující sdílecí tlačítko (např. Facebook) může sledovat uživatele napříč mnoha weby.

Web Share API nabízí alternativu k těmto specifickým sdílecí prvkům. Slouží k tomu jen minimum JavaScriptu a samotné sdílení potom řeší přímo prohlížeč / operační systém přes standardní mechanismy.

Podpora

Web Share API je dobře použitelné zejména v Safari (iOS i macOS) a v prohlížečích na bázi Chromium na Androidu (Chrome, Edge, Opera). Firefox API dosud nepodporuje. Implementujte detekci funkcí a záložní chování.

Dost značná nevýhoda je v tom, že je následující nabídka značně osekaná oproti sdílecímu tlačítku přímo v prohlížeči:

V iPhone je potom nabídka zhruba následující a také osekaná oproti nativní:

Zamrzí zvlášť absence možnosti Přidat na plochu, která je u výchozího sdílení přímo přes prohlížeč:

Použití

Samotný kód pro sdílení je vcelku prostý:

navigator.share(objektKeSdileni)

V objektu ke sdílení může být titulek, popis a URL webu.

var objektKeSdileni = {
  title: 'Je čas.cz',
  text: 'Moderní tvorba webových stránek',
  url: 'https://jecas.cz'
}

Kromě textu jde sdílet také soubory. Podpora sdílení souborů se liší dle zařízení a prohlížeče, proto je vhodné ověřit podporu přes navigator.canShare().

Volat navigator.share je možné až na základě uživatelské interakce, takže třeba přes onclick.

Jinak nastane nějaké takováto chyba:

Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

Další podmínka je, že web běží na HTTPS.

Test podpory

Určitě není rozumné volat prosté navigator.share(). V nepodporovaných případech (nepodporovaný prohlížeč / bez HTTPS) to skončí chybou. Použijte detekci funkcí a případný fallback:

if (navigator.share) {
  navigator.share(objektKeSdileni)
} else {
  alert('Prohlížeč nepodporuje sdílení')
}

Pro sdílení souborů nejprve ověřte podporu pomocí navigator.canShare():

var soubory = [new File(['obsah'], 'soubor.txt', { type: 'text/plain' })]

if (navigator.canShare && navigator.canShare({ files: soubory })) {
  navigator.share({ files: soubory, title: 'Sdílení souboru' })
} else {
  alert('Sdílení souborů není na tomto zařízení podporováno')
}

Živá ukázka

Sdílení v iframu třetí strany

Při volání z iframu třetí strany je nutné mít na elementu <iframe> povolení allow="web-share":

<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>

Závěr

API dává asi největší smysl na mobilech, kde otevře známé nativní sdílení do aplikací. Na desktopu zvažte i alternativy (kopírování odkazu, sdílení e‑mailem apod.).

Pokud vás napadá další využití, budu rád, když mi dáte vědět do komentářů.

Odkazy jinam

• MDN: Web Share API