Recevoir des données partagées avec l'API Web Share Target

Partage simplifié sur mobile et ordinateur grâce à l'API Web Share Target

Pete LePage
Joe Medley
Joe Medley
GitHub

Sur un appareil mobile ou de bureau, le partage devrait être aussi simple que de cliquer sur le bouton Partager, choisir une application et choisir avec qui partager. Par exemple, vous pouvez Vous pouvez partager un article intéressant en l'envoyant par e-mail à vos amis ou en le tweetant au monde.

Auparavant, seules les applications propres à une plate-forme pouvaient s'enregistrer auprès du système d'exploitation pour recevoir les partages d'autres applications installées. Mais avec l'API Web Share Target, les applications Web installées peuvent s'enregistrer auprès du système d'exploitation sous-jacent comme cible de partage pour recevoir du contenu partagé.

<ph type="x-smartling-placeholder">
</ph> Téléphone Android avec l&#39;option &quot;Partager via&quot; panneau ouvert. <ph type="x-smartling-placeholder">
</ph> Sélecteur de cible de partage au niveau du système avec une PWA installée comme option

Voir Web Share Target en action

  1. vous utilisez Chrome 76 (ou version ultérieure) pour Android, ou Chrome 89 (ou version ultérieure) ; sur un ordinateur de bureau, ouvrez la démonstration sur la cible de partage Web.
  2. Lorsque vous y êtes invité, cliquez sur Installer pour ajouter l'application à votre écran d'accueil. utilisez le menu Chrome pour l'ajouter à votre écran d'accueil.
  3. Ouvrez une application compatible avec le partage ou utilisez le bouton "Partager". dans l'application de démonstration.
  4. Dans le sélecteur de cibles, choisissez Web Share Test (Test de partage Web).

Après le partage, vous devriez voir toutes les informations partagées dans l'application Web cible de partage Web.

Enregistrer votre application en tant que cible de partage

Pour enregistrer votre application en tant que cible de partage, elle doit respecter les exigences de Chrome critères d'installabilité. De plus, avant qu'un utilisateur puisse partager à votre application, il doit l'ajouter à son écran d'accueil. Cela empêche les sites de qui s'ajoutent de manière aléatoire au sélecteur d'intention de partage de l'utilisateur. le partage est quelque chose que les utilisateurs veulent faire avec votre application.

Mettre à jour le fichier manifeste de votre application Web

Pour enregistrer votre application en tant que cible de partage, ajoutez une entrée share_target à son site Web fichier manifeste d'application. Cela indique au système d'exploitation d'inclure votre application en tant que une option dans le sélecteur d'intent. Ce que vous ajoutez au fichier manifeste contrôle les données que votre application acceptera. Il existe trois scénarios courants pour le share_target entrée:

  • Accepter des informations de base
  • Acceptation des modifications apportées à l'application...
  • Accepter des fichiers

Accepter des informations de base

Si votre application cible se contente d'accepter des informations de base (données, liens, et du texte, ajoutez ce qui suit au fichier manifest.json:

"share_target": {
  "action": "/share-target/",
  "method": "GET",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}

Si votre application dispose déjà d'un schéma d'URL de partage, vous pouvez remplacer le params avec vos paramètres de requête existants. Par exemple, si votre URL de partage utilise body au lieu de text, vous pouvez remplacer "text": "text" par "text": "body".

Si aucune valeur n'est fournie, la valeur method est définie par défaut sur "GET". Le champ enctype, et non présenté dans cet exemple, indique le type d'encodage des données. Pour la méthode "GET", enctype est défini par défaut sur "application/x-www-form-urlencoded". est ignoré s'il est défini sur autre chose.

Acceptation des modifications apportées à l'application...

Si les données partagées modifient l'application cible d'une manière ou d'une autre (par exemple, si vous enregistrez une favori dans l'application cible : définissez la valeur method sur "POST" et incluez le champ enctype. L'exemple ci-dessous crée un favori dans l'application cible, Il utilise donc "POST" pour method et "multipart/form-data" pour enctype:

{
  "name": "Bookmark",
  "share_target": {
    "action": "/bookmark",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "url": "link"
    }
  }
}

Accepter des fichiers

Comme pour les modifications apportées aux applications, l'acceptation de fichiers nécessite que method soit "POST". et que enctype soit présent. De plus, enctype doit être "multipart/form-data" et une entrée files doivent être ajoutés.

Vous devez également ajouter un tableau files définissant les types de fichiers acceptés par votre application. La Les éléments de tableau sont des entrées comportant deux membres: un champ name et un champ accept. . Le champ accept accepte un type MIME, une extension de fichier ou un tableau contenant les deux. Il est préférable de fournir un tableau comprenant à la fois un type MIME et une extension de fichier, car les systèmes d'exploitation diffèrent par leur qu'ils préfèrent.

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

Gérer le contenu entrant

La manière dont vous gérez les données partagées entrantes dépend de vous et de vos l'application. Par exemple:

  • Un client de messagerie peut rédiger un nouvel e-mail en utilisant title comme objet e-mail, avec text et url concaténés dans le corps.
  • Une application de réseau social peut rédiger un nouveau post en ignorant title, en utilisant text dans le corps du message et en ajoutant url en tant que lien. Si text correspond à l'application peut également utiliser url dans le corps. Si url est manquant, l'application peut analyser text à la recherche d'une URL et l'ajouter en tant que lien.
  • Une application de partage de photos peut créer un diaporama en utilisant title comme titre du diaporama, text comme description et files comme images.
  • Une application de SMS peut rédiger un nouveau message avec text et url concaténés et en supprimant title.

Traitement des partages GET

Si l'utilisateur sélectionne votre application et que votre method est "GET" (le par défaut), une nouvelle fenêtre s'ouvre à l'URL action. Le navigateur génère une chaîne de requête à l'aide des valeurs encodées au format URL fournies dans le fichier manifeste. Par exemple, si l'application de partage fournit title et text, la chaîne de requête est ?title=hello&text=world Pour ce faire, utilisez un DOMContentLoaded écouteur d'événements sur votre page de premier plan, puis analysez la chaîne de requête:

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'));
});

Veillez à utiliser un service worker pour prémettre en cache le action. afin qu'elle se charge rapidement et fonctionne de manière fiable, même si l'utilisateur est hors connexion. Workbox est un outil qui peut vous aider implémentez la mise en cache préalable dans votre service worker.

Traitement des partages POST

Si votre method est "POST", comme c'est le cas si votre application cible accepte un un favori ou des fichiers partagés, le corps de la requête POST entrante contient Les données transmises par l'application de partage, encodées à l'aide de la valeur enctype fournies dans le fichier manifeste.

La page de premier plan ne peut pas traiter ces données directement. Puisque la page considère les données comme une requête, la page la transmet au service worker, où vous pouvez l'intercepter à l'aide d'un fetch écouteur d'événements. À partir de là, vous pouvez renvoyer les données au premier plan à l'aide de postMessage() ou transmettez-la au serveur:

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);
    })());
  }
});

Validation du contenu partagé

<ph type="x-smartling-placeholder">
</ph> Un téléphone Android affichant l&#39;application de démonstration avec du contenu partagé. <ph type="x-smartling-placeholder">
</ph> Exemple d'application cible de partage.
.

Veillez à vérifier les données entrantes. Malheureusement, il n'y a aucune garantie que d'autres les applis partageront le contenu approprié dans le bon paramètre.

Par exemple, sur Android, le champ url sera vide, car elle n'est pas prise en charge dans le système de partage d'Android. Au lieu de cela, les URL apparaissent souvent dans le champ text, ou occasionnellement dans le champ title.

Prise en charge des navigateurs

L'API Web Share Target est compatible comme décrit ci-dessous:

Sur toutes les plates-formes, votre application Web doit être installée pour pouvoir s'afficher en tant que cible potentielle de réception de données partagées.

Exemples d'application

Apportez votre soutien à l'API

Prévoyez-vous d'utiliser l'API Web Share Target ? Votre assistance publique aide l'équipe Chromium hiérarchisent les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge.

Envoyez un tweet à @ChromiumDev en utilisant le hashtag. #WebShareTarget et n'hésitez pas à nous dire où et comment vous l'utilisez.