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 piattaforma.

Joe Medley
Joe Medley
GitHub

Con l'API Web Share, le app web possono utilizzare la stessa condivisione fornita dal sistema come app specifiche per le piattaforme. L'API Web Share consente alle app web di condividere link, testo e file con altre app installate sul dispositivo come app specifiche per le piattaforme.

di Gemini Advanced.
Selettore del target di condivisione a livello di sistema con una PWA installata come opzione.
Selettore del target 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 soltanto 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 richiamato in risposta a un'azione dell'utente, ad esempio un clic. Richiamo tramite il gestore onload.
  • Può condividere URL, testo o file.

Supporto dei browser

  • Chrome: 89.
  • Edge: 93.
  • Firefox: dietro una bandiera.
  • Safari: 12.1.

Origine

Condivisione di link e testo

Per condividere link e testo, utilizza il metodo share(), che è una promessa con un oggetto di proprietà obbligatorio. Per impedire al browser di generare un TypeError, l'oggetto deve contenere almeno delle seguenti proprietà: title, text, url o files. Tu possono, ad esempio, condividere testo senza URL o viceversa. Autorizzando tutti e tre amplia la flessibilità dei casi d'uso. Immagina se, dopo aver eseguito il codice di seguito, l'utente ha scelto un'applicazione email come destinazione. Il parametro title potrebbe diventare l'oggetto dell'email, il text, il corpo del messaggio e i file, 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 il prefisso URL canonico anziché l'URL corrente. Invece di condividere document.location.href, devi verificare la presenza di un tag URL canonico <meta> in <head> della pagina e condividilo. Questo fornirà un'esperienza migliore utente. Non solo evita i reindirizzamenti, ma garantisce anche che un URL condiviso venga pubblicato l'esperienza utente corretta per un determinato cliente. Ad esempio, se un amico condivide un URL per dispositivi mobili e 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 un test e chiamare navigator.canShare(). Quindi includi una 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 navigator.canShare() anziché navigator.share(). L'oggetto dati passato a canShare() supporta solo la proprietà files. Possono essere condivisi alcuni tipi di file audio, immagine, PDF, video e di testo. Vedi Estensioni file consentite in Chromium per un elenco completo. 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 valore 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 visualizzerai il codice sorgente. Se non fornisci l'attributo, verrà generato un messaggio NotAllowedError con il messaggio Failed to execute 'share' on 'Navigator': Permission denied.

Case study su Segui Babbo Natale

App Segui Babbo Natale che mostra un pulsante Condividi.
. Pulsante di condivisione Segui Babbo Natale.

Santa Tracker, un progetto open source, è un tradizionale delle feste in Google. Ogni dicembre puoi festeggiare 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 dai dispositivi mobili a causa a un prezzo premium e non potevano giustificare avere più target di condivisione.

Con l'API Web Share, però, sono stati in grado di presentare un unico pulsante, risparmiando pixel preziosi. Inoltre, hanno scoperto che gli utenti hanno condiviso con Web Share circa il 20% in più rispetto a per gli utenti che non hanno abilitato l'API. Vai a Segui Babbo Natale per vedere la funzionalità Condividi web in azione.

Supporto browser

Il supporto dei browser per l'API Web Share è articolato e ti consigliamo di utilizzare la funzionalità (come descritto negli esempi di codice precedenti) anziché supporre che un determinato metodo venga supportati.

Di seguito viene fornita una descrizione approssimativa del supporto per questa funzionalità. Per informazioni dettagliate, fai clic su uno dei link per l'assistenza.

navigator.canShare()

Supporto dei browser

  • Chrome: 89.
  • Edge: 93.
  • Firefox: dietro una bandiera.
  • Safari: 14.

Origine

navigator.share()

Supporto dei browser

  • Chrome: 89.
  • Edge: 93.
  • Firefox: dietro una bandiera.
  • Safari: 12.1.

Origine

Mostra il supporto per l'API

Intendi utilizzare l'API Web Share? Il tuo supporto pubblico aiuta il team di Chromium dare la priorità alle funzionalità e indica agli altri fornitori di browser quanto sia fondamentale supportarli.

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