Condivisione su dispositivi mobili e desktop semplificata con l'API Web Share Target
Su un dispositivo mobile o desktop, la condivisione dovrebbe essere semplice quanto fare clic sul pulsante Condividi, scegliere un'app e scegliere con chi condividere. Ad esempio, potresti voler condividere un articolo interessante, inviandolo via email agli amici o twittando a tutto il mondo.
In passato, solo le app specifiche della piattaforma potevano registrarsi con il sistema operativo per ricevere condivisioni da altre app installate. Tuttavia, con l'API Web Share Target, le app web installate possono essere registrate con il sistema operativo sottostante come destinazione di condivisione per ricevere contenuti condivisi.
Guarda il target della condivisione web in azione
- Utilizzando Chrome 76 o versioni successive per Android oppure Chrome 89 o versioni successive su computer, apri la demo della funzionalità Target condivisione web.
- Quando richiesto, fai clic su Installa per aggiungere l'app alla schermata Home oppure utilizza il menu Chrome per aggiungerla alla schermata Home.
- Apri un'app che supporti la condivisione o usa il pulsante Condividi nell'app demo.
- Dal selettore di destinazione, scegli Test condivisione web.
Dopo la condivisione, dovresti vedere tutte le informazioni condivise nell'app web di destinazione della condivisione web.
Registra la tua app come target di condivisione
Per registrare la tua app come target di condivisione, deve soddisfare i criteri di installabilità di Chrome. Prima che possa condividere contenuti con la tua app, l'utente deve aggiungerla alla schermata Home. In questo modo i siti non si aggiungono in modo casuale al selettore di condivisione dell'intent dell'utente e si assicura che gli utenti vogliano usare la tua app per la condivisione.
Aggiorna il file manifest dell'app web
Per registrare la tua app come destinazione della condivisione, aggiungi una voce share_target
al relativo file manifest dell'app web. Questo indica al sistema operativo di includere
la tua app tra le opzioni del selettore di intent. Ciò che aggiungi al file manifest controlla i dati
accettati dall'app. Esistono tre scenari comuni per la voce share_target
:
- Accettazione delle informazioni di base
- Accettazione delle modifiche all'applicazione in corso...
- Accettazione file in corso...
Accettazione delle informazioni di base
Se la tua app di destinazione accetta semplicemente informazioni di base come dati, link e testo, aggiungi quanto segue al file manifest.json
:
"share_target": {
"action": "/share-target/",
"method": "GET",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
}
Se la tua applicazione dispone già di uno schema URL di condivisione, puoi sostituire i valori params
con i parametri di query esistenti. Ad esempio, se lo schema dell'URL di condivisione utilizza body
anziché text
, puoi sostituire "text": "text"
con "text":
"body"
.
Se non viene fornito, il valore predefinito di method
è "GET"
. Il campo enctype
, non mostrato in questo esempio, indica il tipo di codifica per i dati.
Per il metodo "GET"
, il valore predefinito di enctype
è "application/x-www-form-urlencoded"
e
viene ignorato se è impostato su qualsiasi altro valore.
Accettazione delle modifiche all'applicazione in corso...
Se i dati condivisi modificano l'app di destinazione in qualche modo, ad esempio salvando un
preferito nell'applicazione di destinazione, imposta il valore method
su "POST"
e includi
il campo enctype
. Nell'esempio riportato di seguito viene creato un preferito nell'app di destinazione, in modo che utilizzi "POST"
per method
e "multipart/form-data"
per enctype
:
{
"name": "Bookmark",
"share_target": {
"action": "/bookmark",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"url": "link"
}
}
}
Accettazione file in corso...
Come nel caso delle modifiche all'applicazione, per accettare file è necessario che method
sia "POST"
e che sia presente enctype
. Inoltre, enctype
deve essere
"multipart/form-data"
ed è necessario aggiungere una voce files
.
Devi anche aggiungere un array files
che definisca i tipi di file accettati dalla tua app. Gli
elementi dell'array sono voci con due membri: un campo name
e un
campo accept
. Il campo accept
accetta un tipo MIME, un'estensione di file o un array contenente entrambi. È preferibile fornire un array che includa sia un tipo MIME sia un'estensione del file, poiché i sistemi operativi sono diversi in base alle loro preferenze.
{
"name": "Aggregator",
"share_target": {
"action": "/cgi-bin/aggregate",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"url": "link",
"files": [
{
"name": "records",
"accept": ["text/csv", ".csv"]
},
{
"name": "graphs",
"accept": "image/svg+xml"
}
]
}
}
}
Gestisci i contenuti in arrivo
La modalità di gestione dei dati condivisi in arrivo dipende da te e dalla tua app. Ad esempio:
- Un client di posta potrebbe creare la bozza di una nuova email utilizzando
title
come oggetto dell'email, context
eurl
concatenati come corpo. - Un'app di social networking potrebbe creare la bozza di un nuovo post ignorando
title
, utilizzandotext
come corpo del messaggio e aggiungendourl
come link. Setext
non è presente, l'app potrebbe utilizzare ancheurl
nel corpo. Seurl
non è presente, l'app potrebbe analizzaretext
alla ricerca di un URL e aggiungerlo come link. - Un'app di condivisione delle foto potrebbe creare una nuova presentazione utilizzando
title
come titolo,text
come descrizione efiles
come immagini. - Un'app di messaggistica potrebbe creare la bozza di un nuovo messaggio utilizzando
text
eurl
concatenati e rilasciandotitle
.
Elaborazione condivisioni GET
Se l'utente seleziona la tua applicazione e il tuo method
è "GET"
(valore predefinito), il browser apre una nuova finestra in corrispondenza dell'URL action
. Il browser genera quindi una stringa di query utilizzando i valori con codifica URL forniti nel manifest.
Ad esempio, se l'app di condivisione fornisce title
e text
, la stringa di query è ?title=hello&text=world
. Per elaborare questa operazione, utilizza un listener di eventi DOMContentLoaded
nella pagina in primo piano e analizza la stringa di query:
window.addEventListener('DOMContentLoaded', () => {
const parsedUrl = new URL(window.location);
// searchParams.get() will properly handle decoding the values.
console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});
Assicurati di utilizzare un service worker per prememorizzare nella cache la pagina action
, in modo che venga caricata rapidamente e funzioni in modo affidabile, anche se l'utente è offline.
Workbox è uno strumento che può aiutarti a
implementare la pre-memorizzazione nella cache nel tuo service worker.
Elaborazione delle condivisioni POST in corso...
Se il method
è "POST"
, come accade se l'app di destinazione accetta un preferito salvato o file condivisi, il corpo della richiesta POST
in arrivo contiene i dati trasmessi dall'applicazione di condivisione, codificati utilizzando il valore enctype
fornito nel manifest.
La pagina in primo piano non può elaborare direttamente questi dati. Poiché la pagina vede i dati come una richiesta, li passa al service worker, dove puoi intercettarli con un listener di eventi fetch
. Da qui, puoi ritrasmettere i dati alla pagina in primo piano utilizzando postMessage()
o trasferirli al server:
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
// If this is an incoming POST request for the
// registered "action" URL, respond to it.
if (event.request.method === 'POST' &&
url.pathname === '/bookmark') {
event.respondWith((async () => {
const formData = await event.request.formData();
const link = formData.get('link') || '';
const responseUrl = await saveBookmark(link);
return Response.redirect(responseUrl, 303);
})());
}
});
Verifica dei contenuti condivisi
Assicurati di verificare i dati in arrivo. Purtroppo non c'è alcuna garanzia che altre app condivideranno i contenuti appropriati nel parametro giusto.
Ad esempio, su Android, il campo url
sarà vuoto perché non è supportato nel sistema di condivisione di Android. Gli URL vengono spesso visualizzati nel
campo text
o occasionalmente nel campo title
.
Supporto del browser
L'API Web Share Target è supportata come descritto di seguito:
Su tutte le piattaforme, la tua app web deve essere installata prima di poter essere visualizzata come potenziale target per la ricezione di dati condivisi.
Applicazioni di esempio
Mostra il supporto dell'API
Intendi utilizzare l'API Web Share Target? 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
#WebShareTarget
e facci sapere dove e come lo stai usando.