Le app web possono utilizzare le stesse funzionalità di condivisione fornite dal sistema delle app specifiche della piattaforma.
Con l'API Web Share, le app web possono utilizzare le stesse funzionalità di condivisione fornite dal sistema delle app specifiche della piattaforma. L'API Web Share consente alle app web di condividere link, testo e file con altre app installate sul dispositivo, allo stesso modo delle app specifiche della piattaforma.
Funzionalità e limitazioni
La condivisione web presenta le seguenti funzionalità e limitazioni:
- Possono essere utilizzate soltanto su un sito a cui si viene eseguito l'accesso tramite HTTPS.
- Se la condivisione avviene in un iframe di terze parti, è necessario utilizzare l'attributo
allow. - Deve essere richiamato in risposta a un'azione dell'utente, come un clic. È impossibile richiamarlo
tramite il gestore
onload. - Può condividere URL, testo o file.
Condivisione di link e testo
Per condividere link e testo, usa il metodo share(), che è basato su promesse
con un oggetto proprietà obbligatorio.
Per impedire al browser di generare un TypeError, l'oggetto deve contenere almeno una delle seguenti proprietà: title, text, url o files. Ad esempio, puoi condividere testo senza URL e viceversa. La possibilità di disporre di tutti e tre
i membri aumenta la flessibilità dei casi d'uso. Immagina se dopo aver eseguito il codice riportato
di seguito, l'utente abbia scelto un'applicazione email come destinazione. Il parametro title potrebbe diventare l'oggetto dell'email, text, il corpo del messaggio e i file, gli allegati.
if (navigator.share) {
navigator.share({
title: 'web.dev',
text: 'Check out web.dev.',
url: 'https://web.dev/',
})
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error));
}
Se il tuo sito ha più URL per gli stessi contenuti, condividi l'URL canonico della pagina anziché l'URL corrente. Invece di condividere document.location.href, dovresti controllare un tag dell'URL canonico <meta> in <head> della pagina e condividerlo. Ciò fornirà un'esperienza migliore
all'utente. Non solo evita i reindirizzamenti, ma garantisce anche che un URL condiviso offra l'esperienza utente corretta per un determinato client. Ad esempio, se un amico condivide un URL mobile e tu lo visualizzi su un computer desktop, dovresti vedere una versione desktop:
let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
url = canonicalElement.href;
}
navigator.share({url});
Condivisione di file
Per condividere file, devi prima eseguire il test e chiamare navigator.canShare(). Quindi includi un array di file nella chiamata a navigator.share():
if (navigator.canShare && navigator.canShare({ files: filesArray })) {
navigator.share({
files: filesArray,
title: 'Vacation Pictures',
text: 'Photos from September 27 to October 14.',
})
.then(() => console.log('Share was successful.'))
.catch((error) => console.log('Sharing failed', error));
} else {
console.log(`Your system doesn't support sharing files.`);
}
Tieni presente che l'esempio gestisce il rilevamento delle funzionalità testando per
navigator.canShare() anziché per navigator.share().
L'oggetto dati passato a canShare() supporta solo la proprietà files.
Puoi condividere alcuni tipi di file audio, immagine, PDF, video e di testo.
Per un elenco completo, consulta la pagina relativa alle estensioni dei file consentite in Chromium. In futuro potrebbero essere aggiunti altri tipi di file.
Condivisione in iframe di terze parti
Per attivare l'azione di condivisione dall'interno di un iframe di terze parti, incorpora l'iframe con l'attributo allow con un valore di web-share:
<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>
Puoi vedere questa funzionalità in una demo su Glitch e visualizzare il codice sorgente.
Se non specifichi l'attributo, verrà generato un valore NotAllowedError con il messaggio
Failed to execute 'share' on 'Navigator': Permission denied.
Case study: Segui Babbo Natale
Segui Babbo Natale, un progetto open source, è una tradizione delle festività per Google. A dicembre si festeggia la stagione con giochi ed esperienze educative.
Nel 2016, il team di Segui Babbo Natale ha utilizzato l'API Web Share su Android. Questa API era perfetta per i dispositivi mobili. Negli anni precedenti, il team ha rimosso i pulsanti di condivisione sui dispositivi mobili perché lo spazio è prezioso e non poteva giustificare diversi obiettivi di condivisione.
Con l'API Web Share, invece, hanno potuto mostrare un pulsante, risparmiando pixel preziosi. Inoltre, gli utenti hanno condiviso con Condivisione web circa il 20% in più rispetto agli utenti senza l'API abilitata. Vai su Segui Babbo Natale per vedere la funzionalità Web Share in azione.
Supporto del browser
Il supporto dei browser per l'API Web Share è variato e si consiglia di utilizzare il rilevamento delle funzionalità (come descritto negli esempi di codice precedenti) anziché supporre che un metodo specifico sia supportato.
Di seguito è riportata una panoramica approssimativa del supporto di questa funzionalità. Per informazioni dettagliate, segui uno dei link dell'assistenza.
navigator.canShare()navigator.share()
Mostra il supporto dell'API
Intendi utilizzare l'API Web Share? Il tuo supporto pubblico aiuta il team di Chromium a dare la priorità alle funzionalità e mostra ad altri fornitori di browser quanto è fondamentale supportarle.
Invia un tweet a @ChromiumDev usando l'hashtag
#WebShare
e facci sapere dove e come lo stai usando.