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 per piattaforma. L'API Web Share consente alle app web di condividere link, testo e file con altre app installate sul dispositivo nello stesso modo delle app specifiche della piattaforma.
Funzionalità e limitazioni
La condivisione web presenta le seguenti funzionalità e limitazioni:
- Può essere utilizzato solo su un sito a cui si accede tramite HTTPS.
- Se la condivisione avviene in un iframe di terze parti, è necessario utilizzare l'attributo
allow
. - Deve essere invocato in risposta a un'azione dell'utente, ad esempio un clic. È impossibile invocarlo tramite il gestore
onload
. - Può condividere URL, testo o file.
Condivisione di link e testo
Per condividere link e testo, utilizza il metodo share()
, basato su una promessa, con un oggetto di proprietà obbligatorio.
Per impedire al browser di generare un errore TypeError
,
l'oggetto deve contenere almeno una
delle seguenti proprietà: title
, text
, url
o files
. Puoi, ad esempio, condividere il testo senza un URL o viceversa. Consentire a tutti e tre i membri di partecipare amplia la flessibilità dei casi d'uso. Immagina che dopo aver eseguito il codice riportato di seguito, l'utente abbia scelto un'applicazione email come target. Il parametro title
potrebbe diventare l'oggetto dell'email, il 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 canonical della pagina anziché l'URL corrente. Invece di condividere
document.location.href
, devi verificare la presenza di un tag <meta>
URL canonico nel
<head>
della pagina e condividerlo. In questo modo l'utente avrà un'esperienza migliore. 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, verifica prima la presenza di navigator.canShare()
e chiamalo. Poi 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 il sample gestisce il rilevamento delle funzionalità testando la presenza di navigator.canShare()
anziché navigator.share()
.
L'oggetto dati passato a canShare()
supporta solo la proprietà files
.
È possibile condividere determinati tipi di file audio, immagini, PDF, video e di testo.
Per un elenco completo, consulta Estensioni 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 da 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 azione in una demo su Glitch e visualizzare il codice sorgente.
La mancata indicazione dell'attributo comporterà un NotAllowedError
con il messaggio
Failed to execute 'share' on 'Navigator': Permission denied
.
Case study di Segui Babbo Natale
Santa Tracker, un progetto open source, è una tradizione di Google per le festività. Ogni dicembre, puoi festeggiare le festività 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 aveva rimosso i pulsanti di condivisione sui dispositivi mobili perché lo spazio è molto limitato e non era possibile giustificare la presenza di più target di condivisione.
Tuttavia, con l'API Web Share, è stato possibile mostrare un solo pulsante, risparmiando pixel preziosi. Inoltre, ha riscontrato che gli utenti che hanno condiviso contenuti con la funzionalità di condivisione web hanno registrato un aumento di circa il 20% rispetto agli utenti che non avevano attivato l'API. Visita Segui Babbo Natale per vedere Condivisione web in azione.
Supporto browser
Il supporto dei browser per l'API Web Share è articolato e consigliamo di utilizzare il rilevamento delle funzionalità (come descritto negli esempi di codice precedenti) anziché supporre che un determinato metodo sia supportato.
Ecco una breve panoramica del supporto di questa funzionalità. Per informazioni dettagliate, segui uno dei link di assistenza.
navigator.canShare()
navigator.share()
Mostra il supporto per l'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 sia fondamentale supportarle.
Invia un tweet all'indirizzo @ChromiumDev utilizzando l'hashtag
#WebShare
e facci sapere dove e come lo utilizzi.