Ricezione di dati condivisi con l'API Web Share Target

Condivisione su dispositivi mobili e desktop semplificata con l'API Web Share Target

Pete LePage
Joe Medley
Joe Medley
GitHub

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.

Smartphone Android con il riquadro a scomparsa "Condividi tramite" aperto.
Selettore della destinazione di condivisione a livello di sistema con una PWA installata come opzione.

Guarda il target della condivisione web in azione

  1. Utilizzando Chrome 76 o versioni successive per Android oppure Chrome 89 o versioni successive su computer, apri la demo della funzionalità Target condivisione web.
  2. Quando richiesto, fai clic su Installa per aggiungere l'app alla schermata Home oppure utilizza il menu Chrome per aggiungerla alla schermata Home.
  3. Apri un'app che supporti la condivisione o usa il pulsante Condividi nell'app demo.
  4. 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, con text e url concatenati come corpo.
  • Un'app di social networking potrebbe creare la bozza di un nuovo post ignorando title, utilizzando text come corpo del messaggio e aggiungendo url come link. Se text non è presente, l'app potrebbe utilizzare anche url nel corpo. Se url non è presente, l'app potrebbe analizzare text 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 e files come immagini.
  • Un'app di messaggistica potrebbe creare la bozza di un nuovo messaggio utilizzando text e url concatenati e rilasciando title.

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

Uno smartphone Android su cui è mostrata l'app demo con contenuti condivisi.
L'app di destinazione per la condivisione di esempio.

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.