Recevez des données partagées avec l'API de destination de partage Web

Compartir en dispositivos móviles de forma sencilla con la API de destino de recurso compartido web

8 novembre 2019
Mise à jour 5 août 2020

Il apparaît dans:
Applications la toile progresivas

Sur un appareil mobile, le partage doit être aussi simple que de cliquer sur le bouton Partager , elegir una aplicación y elegir con quién compartir. Por ejemplo, es posible que desee compartir un artículo interesante, ya être enviándolo por correo electrónico a sus amigos o twitteándolo al mundo.

En el pasado, solo las aplicaciones nativas podían registrarse en el sistema operativo para recibir recursos compartidos de otras aplicaciones instaladas. Pero con la API de destino compartido web, las aplicaciones web instaladas pueden registrarse con el sistema operativo subyacente como destino compartido para recibir Contenu compartido. Se agregó soporte para texto y datos en Chrome 71, y se agregó soporte para archivos en Chrome 76.

Voir la cible de partage Web en action

1. Avec Chrome 76 ou version ultérieure (Android uniquement), ouvrez le Démo Web Share Target.
2. Lorsque vous y êtes invité, cliquez sur Installer sur PC pour ajouter l'application à votre écran d'accueil ou utilisez le menu Chrome pour l'ajouter à votre écran d'accueil.
3. Ouvrez n'importe quelle application prenant en charge le partage natif ou utilisez le bouton Partager dans l'application de démonstration.
4. Dans le sélecteur de destination, choisissez Test de partage Web.

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

Registre su aplicación como objectif para compartir

Pour enregistrer votre application en tant que cible de partage, vous devez répondre Critères d'installation de Chrome. Además, antes de que un Nom d'utilisateur pueda compartir su aplicación, debe agregarla a su pantalla de inicio. Esto evita que los sitios se agreguen al azar al selector de intención de compartir del usuario y garantiza que compartir sea algo que los usuarios quieran hacer con su aplicación.

Mettez à jour le manifeste de votre application Web

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

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

Accepter les informations de base

Si votre application cible n'accepte que des informations de base telles que des données, des liens et du texte, ajoutez ce qui suit à la manifest.json Record:

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

Si su aplicación ya tiene un esquema de URL para compartir, puede reemplazar el pour moi
valeurs avec vos paramètres de requête existants. Par exemple, si votre schéma d'URL de partage utilise corps au lieu de texte, pourriez-vous remplacer "texte": "texte" avec "texte": "corps".

Les méthode la valeur par défaut est "OBTENIR" si non fourni. Les enctype , qui n'apparaît pas dans cet exemple, indique le type d'encodage pour les données. Pour lui "OBTENIR" méthode, enctype par défaut à "application / x-www-form-urlencoded" et il est ignoré s'il est configuré pour autre chose.

Accepter les modifications apportées à l'application

Si les données partagées modifient l'application de destination de quelque manière que ce soit, par exemple, lors de l'enregistrement d'un signet dans l'application de destination, configurez le méthode la valeur pour "PUBLIER" et comprend le enctype Campagne. L'exemple suivant crée un signet dans l'application cible, il utilise donc "PUBLIER" Pour lui méthode y "multipart / form-data" Pour lui
enctype:

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

Accepter des fichiers

Comme pour les changements d'application, l'acceptation des fichiers nécessite que méthode être "PUBLIER"
jeter enctype être. Plus loin, enctype doit être
"multipart / form-data"et un des dossiers une entrée doit être ajoutée.

Vous devez également ajouter un des dossiers Un tableau qui définit les types de fichiers acceptés par votre application. Les éléments du tableau sont des entrées avec deux membres: a patate douce champ et un J'accepte
Campagne. Les J'accepte El campo toma un tipo Mime, una extensión de archivo o una matriz que contiene ambos. Es mejor proporcionar una matriz que incluya tanto un tipo MIME como una extensión de archivo, ya que los sistemas operativos difieren en lo que prefieren.

{
  "name": "Aggregator",
  "share_target": {
    "action": "/cgi-bin/aggregate",
    "method": "PUBLIER",
    "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 dépend de votre application. Par exemple:

• UNE client de correo electrónico podría redactar un nuevo correo electrónico utilizando Titre comme objet d'un e-mail, avec texte y URL enchaînés comme le corps.
• Une application de médias sociaux pourrait rédiger un nouveau message en ignorant Titre, utilisant
  texte comme corps du message, et en ajoutant URL Quoi relier. Oui texte manquant, l'application pourrait utiliser URL dans le corps aussi. Oui URL manquant, l'application peut scanner texte recherchez une URL et ajoutez-la en tant que lien.
• Une application de partage de photos peut créer un nouveau diaporama en utilisant Titre comme titre du diaporama, texte comme description, et des dossiers comme les images du diaporama.
• Une application de messagerie texte peut rédiger un nouveau message en utilisant texte y URL
  concaténés ensemble et en laissant tomber Titre.

GET traitement des actions

Si l'utilisateur sélectionne son application et son méthode c'est "OBTENIR" (predeterminado), el le navigateur abre una nueva ventana en el action URL. Le navigateur génère ensuite une chaîne de requête à l'aide des valeurs encodées URL fournies dans le manifeste. Par exemple, si l'application de partage fournit Titre y texte, la chaîne de requête est
?title=hello&text=world. Pour traiter cela, utilisez un DOMContentLoaded écouteur d'événements sur votre page de premier plan et analysez la chaîne de requête:

la fenêtre.addEventListener('DOMContentLoaded', () => {
const parsedUrl = new URL(la fenêtre.location);
console.Journal('Title shared: ' + parsedUrl.searchParams.get('title'));
console.Journal('Text shared: ' + parsedUrl.searchParams.get('text'));
console.Journal('URL shared: ' + parsedUrl.searchParams.get('url'));
});

Assurez-vous d'embaucher un technicien action page afin qu'elle se charge rapidement et fonctionne de manière fiable, même si l'utilisateur est hors ligne.

Procesamiento de acciones PUBLIER

Si tu méthode c'est "PUBLIER", par exemple si votre application cible accepte un signet enregistré ou des fichiers partagés, le corps de l'entrée PUBLIER La requête contient les données transmises par l'application à partager, encodées avec le enctype valeur fournie dans le manifeste.

La page de premier plan ne peut pas traiter ces données directement. Étant donné que la page voit les données comme une demande, la page les transmet au technicien de service, où il peut les intercepter avec un
aller chercher écouteur d'événement. De là, vous pouvez transmettre les données à la page de premier plan en utilisant postMessage () o páselo al serveur:

self.addEventListener('fetch', event => {
if (event.request.method !== 'POST') {
event.respondWith(fetch(event.request));
return;
}
event.respondWith((async () => {
const formData = await event.request.formData();
const link = formData.get('link') || '';
const responseUrl = await saveBookmark(link);
return Response.redirect(responseUrl, 303);
})());
});

Vérification du contenu partagé

Assurez-vous de vérifier les données entrantes. Malheureusement, il n'y a aucune garantie que d'autres applications partageront le contenu approprié dans le paramètre correct.

Par exemple, sur Android, le URL le champ sera vide car il ne prend pas en charge le système partagé Android. Au lieu de cela, les URL apparaîtront souvent dans le texte terrain, ou occasionnellement dans le Titre Campagne.