Ricezione di dati condivisi con l'API Web Share Target

Condivisione su dispositivi mobili e computer 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 condividerla. Ad esempio, potresti voler condividere un articolo interessante, inviandolo via email agli amici o twittandolo nel mondo.

In passato, solo le app specifiche per le piattaforme potevano essere registrate nel sistema operativo per ricevono condivisioni da altre app installate. Con l'API Web Share Target, le app web installate possono essere registrate nel sistema operativo sottostante come target della condivisione per ricevere contenuti condivisi.

Smartphone Android con la funzionalità "Condividi tramite" riquadro a scomparsa aperto.
. Selettore del target di condivisione a livello di sistema con una PWA installata come opzione.

Guarda la funzione Web Share Target in azione

  1. Utilizzare Chrome 76 o versioni successive per Android oppure Chrome 89 o versioni successive desktop, apri la demo di Web Share Target.
  2. Quando richiesto, fai clic su Installa per aggiungere l'app alla schermata Home oppure usa il menu Chrome per aggiungerlo alla schermata Home.
  3. Apri un'app che supporti la condivisione o usa il pulsante Condividi nell'app demo.
  4. Dal selettore del target, scegli Test condivisione web.

Dopo la condivisione, dovresti vedere tutte le informazioni condivise in l'app web di destinazione della condivisione web.

Registrare l'app come target della condivisione

Per registrare la tua app come target di condivisione, deve soddisfare i requisiti di Chrome criteri di installabilità. Inoltre, prima che un utente possa condividere alla tua app, dovranno aggiungerla alla propria schermata Home. In questo modo, i siti si aggiunge in modo casuale al selettore di condivisione dell'intenzione dell'utente e garantisce che è qualcosa che gli utenti vogliono fare con la tua app.

Aggiorna il file manifest dell'app web

Per registrare la tua app come destinazione di condivisione, aggiungi una voce share_target alla relativa pagina del file manifest dell'app. Questo indica al sistema operativo di includere la tua app come un'opzione nel selettore di intent. Ciò che aggiungi al file manifest controlla i dati accettate dalla tua app. Esistono tre scenari comuni per share_target voce:

  • Accettazione delle informazioni di base
  • Accettazione delle modifiche all'applicazione in corso...
  • Accettazione file in corso...
di Gemini Advanced.

Accettazione delle informazioni di base

Se la tua app target 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 params con i parametri di query esistenti. Ad esempio, se condividi l'URL utilizza body anziché text, potresti sostituire "text": "text" con "text": "body".

Se non viene specificato, il valore predefinito di method è "GET". Il campo enctype, non mostrato in questo esempio, indica il tipo di codifica dei dati. Per il metodo "GET", il valore predefinito di enctype è "application/x-www-form-urlencoded" e viene ignorato se è impostato su un altro valore.

Accettazione delle modifiche all'applicazione in corso...

Se i dati condivisi modificano in qualche modo l'app di destinazione, ad esempio salvando un Aggiungi ai preferiti nell'applicazione di destinazione: imposta il valore method su "POST" e includi il campo enctype. L'esempio riportato di seguito crea un preferito nell'app di destinazione quindi utilizza "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 per le modifiche alla domanda, l'accettazione di file richiede che method sia "POST" e che enctype sia presente. Inoltre, enctype deve essere "multipart/form-data" e è necessario aggiungere una voce files.

Devi inoltre aggiungere un array files che definisce i tipi di file accettati dall'app. La Gli elementi array sono voci con due membri: un campo name e un accept . Il campo accept richiede un tipo MIME, un'estensione file o un array che contengono entrambi. È meglio fornire un array che includa sia un tipo MIME e estensione del file, poiché i sistemi operativi differiscono in base all'utilizzo che preferiscono.

{
  "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"
        }
      ]
    }
  }
}

Gestire i contenuti in arrivo

Il modo in cui gestisci i dati condivisi in arrivo dipende da te e dipende dalla tua dell'app. Ad esempio:

  • Un client di posta potrebbe creare la bozza di una nuova email utilizzando title come oggetto email, con text e url concatenati come corpo.
  • Un'app di social network può creare la bozza di un nuovo post ignorando title, utilizzando text come corpo del messaggio e aggiungere url come link. Se text è mancante, l'app potrebbe anche utilizzare url nel corpo. Se url non è presente, l'app potrebbe eseguire la scansione di text cercando un URL e aggiungerlo come link.
  • Un'app di condivisione foto potrebbe creare una nuova presentazione utilizzando title come titolo della presentazione, text come descrizione e files come immagini della presentazione.
  • Un'app di messaggistica potrebbe redigere la bozza di un nuovo messaggio utilizzando text e url concatenati e rilasciando title.

Elaborazione delle condivisioni GET

Se l'utente seleziona la tua applicazione e il tuo method è "GET" (il predefinita), il browser apre una nuova finestra all'URL action. Il browser quindi genera una stringa di query utilizzando i valori codificati nell'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 file DOMContentLoaded listener di eventi 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 action in modo che venga caricata rapidamente e funzioni in modo affidabile, anche se l'utente è offline. Workbox è uno strumento che può aiutarti implementare la pre-memorizzazione nella cache nel Service worker.

Elaborazione condivisioni POST in corso...

Se method è "POST", come lo sarebbe se l'app target accettasse una richiesta salvata preferiti o file condivisi, il corpo della richiesta POST in arrivo contiene i dati trasmessi dall'applicazione di condivisione, codificati utilizzando il valore enctype fornite nel file manifest.

La pagina in primo piano non può elaborare direttamente questi dati. Poiché la pagina vede i dati come una richiesta, la pagina la passa al service worker, dove puoi intercettarla con fetch listener di eventi. Da qui puoi ritrasmettere i dati in primo piano utilizzando postMessage() o passala 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 è visualizzata l'app demo con contenuti condivisi.
. L'app di destinazione per la condivisione di esempio.

Assicurati di verificare i dati in arrivo. Purtroppo non possiamo garantire che altre le app condivideranno i contenuti appropriati con il parametro giusto.

Ad esempio, su Android, il campo url sarà vuoto perché non è supportato nel sistema di condivisione di Android. Al contrario, gli URL appariranno spesso nel campo text o occasionalmente nel campo title.

Supporto browser

L'API Web Share Target è supportata come descritto di seguito:

Su tutte le piattaforme, è necessario che la tua app web sia installata prima di poter essere visualizzata come potenziale bersaglio per ricevere dati condivisi.

Applicazioni di esempio

Mostra il supporto per l'API

Intendi utilizzare l'API Web Share Target? 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 #WebShareTarget: e facci sapere dove e come lo utilizzi.