Il dono del dare
L'utilizzo della prossima generazione di app Web presenta alcuni chiari vantaggi, uno dei quali è l'utilizzo dell'API di condivisione del navigatore. Grazie a un ricco set di funzionalità in continua evoluzione, il tuo navigatore preferito è ora in grado di invocare Web Share API per condividere i seguenti elementi:
- testo normale
- collegamenti fornendo un titolo
- file direttamente
Se il browser di un utente supporta il nuovo navigator.share, puoi utilizzare questa funzione in questo momento!
Tempo di dimostrazione!
L'utilizzo della funzionalità di condivisione è semplicissimo, ecco un esempio che viene effettivamente utilizzato sul sito:
<Button
className={classes.container}
aria-label={"Share this article"}
onClick={() => {
// '.share' can only by called when
// triggered by click-events to make
// sure it's the user's intention.
navigator.share?.({
title: info.title,
text: info.description,
url: `${getBaseRoute(routes.posts)}/${info.slug.current}`,
}).catch(console.error);
// Optionally virbrate slightly.
navigator.vibrate?.([30, 20, 10]);
}}>
<ShareIcon />
<Typography>{"Share"}</Typography>
</Button>
Come puoi vedere, questo callback invoca la funzione di condivisione asincrona (se possibile) e fornisce alcuni dati in modo che un bel URL + titolo e sottotitolo descrittivi possano essere mostrati nel foglio di condivisione. Il codice mostrato viene utilizzato in una variante leggermente diversa alla fine di questo articolo. Se il tuo browser supporta la condivisione, verrà visualizzato un pulsante correlato nella riga "Azioni".
Dove usare
Al momento della scrittura, l'API può essere utilizzata principalmente sulle varianti mobili dei browser più diffusi (Chrome, Opera, Safari) ma solo su Safari + Edge su desktop. Poiché questa funzionalità non è limitata a requisiti hardware specifici, mi aspetto che il supporto aumenti nei prossimi mesi.
E sì, quella era una rapida introduzione all'API Web Share, per ulteriori informazioni controlla il web.dev collegato e gli articoli MDN nell'addendum.
- Tom
