Integrazione con l'interfaccia utente di condivisione del sistema operativo con l'API Web Share

Le app web possono utilizzare le stesse funzionalità di condivisione fornite dal sistema delle app specifiche per la piattaforma.

Joe Medley

Con l'API Web Share, le app web possono utilizzare le stesse funzionalità di condivisione fornite dal sistema delle app specifiche per la 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 per la piattaforma.

Nota: la condivisione è solo metà della magia. Le app web possono anche essere target di condivisione, il che significa che possono ricevere dati, link, testo e file da app web o specifiche della piattaforma. Leggi Ricevere dati condivisi per scoprire come registrare la tua app come target di condivisione.

Selettore di destinazione di condivisione a livello di sistema con una PWA installata come opzione.

Funzionalità e limitazioni

La condivisione web presenta le seguenti funzionalità e limitazioni:

• Può essere utilizzato solo su un sito accessibile 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, ad esempio un clic. Non è possibile richiamarlo tramite il gestore onload.
• Può condividere URL, testo o file.

Browser Support

• 128
• 93
• 
• 12.1

Source

Condivisione di link e testo

Per condividere link e testo, utilizza il metodo share(), che è un metodo basato su promise con un oggetto di proprietà obbligatorio. Per evitare che il browser generi un TypeError, l'oggetto deve contenere almeno una delle seguenti proprietà: title, text, url o files. Ad esempio, puoi condividere testo senza un URL o viceversa. Consentire tutti e tre i membri aumenta la flessibilità dei casi d'uso. Immagina che, 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. Anziché condividere document.location.href, dovresti verificare la presenza di un tag URL canonico <meta> nella sezione <head> della pagina e condividere l'URL canonico. 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, 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});

Condividere i file

Per condividere file, prima verifica la presenza di navigator.canShare() e chiamalo. 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à eseguendo il test per navigator.canShare() anziché per navigator.share(). L'oggetto dati passato a canShare() supporta solo la proprietà files. È possibile condividere determinati tipi di file audio, immagine, PDF, video e di testo. Per un elenco completo, consulta 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 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>

Case study di Segui Babbo Natale

Pulsante di condivisione di Segui Babbo Natale.

Segui Babbo Natale, un progetto open source, è una tradizione natalizia di Google. Ogni dicembre, puoi festeggiare la stagione con giochi ed esperienze didattiche.

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 è prezioso e non era possibile giustificare la presenza di più target di condivisione.

Ma con l'API Web Share, sono stati in grado di presentare un solo pulsante, risparmiando pixel preziosi. Ha inoltre riscontrato che gli utenti hanno condiviso con Web Share circa il 20% in più rispetto agli utenti senza l'API abilitata. Vai su Segui Babbo Natale per vedere Web Share in azione.

Supporto browser

Il supporto del browser per l'API Web Share è sfumato e ti consigliamo di utilizzare il rilevamento delle funzionalità (come descritto negli esempi di codice precedenti) anziché presumere che un determinato metodo sia supportato.

Ecco una panoramica generale del supporto di questa funzionalità. Per informazioni dettagliate, segui uno dei link di assistenza.

navigator.canShare()

Browser Support

• 128
• 93
• 
• 14

Source

navigator.share()

Browser Support

• 128
• 93
• 
• 12.1

Source

Mostra il tuo sostegno per l'API

Hai intenzione di utilizzare l'API Web Share? Il tuo supporto pubblico aiuta il team di Chromium a dare la priorità alle funzionalità e mostra agli altri fornitori di browser quanto sia fondamentale supportarle.

Invia un tweet a @ChromiumDev utilizzando l'hashtag #WebShare e facci sapere dove e come lo utilizzi.

Link utili

• Demo di Web Share
• PWA Scrapbook