Come utente apprezzo i prodotti che rispettano la mia privacy. Per la stessa ragione come designer e sviluppatore cerco di rispettare la privacy dei miei utenti al meglio delle mie capacità. Ovviamente, in quanto freelance, non ho sempre il controllo totale sulla direzione del progetto, ma cerco di fare il possibile.

Le funzionalità di sharing sono spesso uno dei principali punti deboli quando si parla di privacy su un sito web. Incorporare i bottoni di sharing dei social media spesso significa aprire le porte per il tracciamento cross-site e altri problemi poco chiari.

Per questa ragione un po' di tempo fa ho cercato delle alternative. Certamente la soluzione migliore e più completa sarebbe quella di costruire il proprio sistema di sharing, sfruttando le API dei vari social o degli URL personalizzati. Tuttavia questo processo può facilmente diventare complicato, richiedere della manutenzione costante e in generale non è "pulita" come soluzione. Credo quindi che una soluzione nettamente superiore per progetti di medio-piccole dimensioni sia la Web Share API.

La Web Share API è un modo semplice e veloce per accedere alle funzionalità native di sharing di un dispositivo. Sfortunatamente il supporto di questa API non è dei migliori lato desktop, ma c'è una copertura quasi del 100% lato mobile. A mio avviso questo non è un gran problema per la maggior parte dei casi d'uso, d'altra parte da dekstop è molto più facile e comune copiare semplicemente il link...

La configurazione è davvero molto semplice. Dalla MDN Dock:

const shareData = {
    title: 'MDN',
    text: 'Learn web development on MDN!',
    url: 'https://developer.mozilla.org',
}

const btn = document.querySelector('button')
const resultPara = document.querySelector('.result')

// Must be triggered some kind of "user activation"
btn.addEventListener('click', async () => {
    try {
        await navigator.share(shareData)
        resultPara.textContent = 'MDN shared successfully'
    } catch (err) {
        resultPara.textContent = 'Error: ' + err
    }
})

È anche possibile controllare che il browser supporti l'API con navigator.canShare(). Questo metodo può anche essere usato per mostrare/nascondere il pulsante di share. Alla fine è ancora una volta il concetto di progressive web app.

Web Share API su tommasonegri.com

Adoro questa API, da tempo è diventata la soluzione principale per tutti i miei progetti personali e per tutti i miei clienti che sono disposti a un piccolo sacrificio nel rispetto della privacy dei loro utenti.

Seguimi su

Twitter

Vuoi parlare con me?

tommaso@hey.com