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

Partage facile sur les appareils mobiles avec l'API de destination de partage Web

8 novembre 2019
Mise à jour 5 août 2020

Il apparaît dans:
Applications Web progressives

Sur un appareil mobile, le partage doit être aussi simple que de cliquer sur le bouton Partager , choisissez une application et choisissez avec qui partager. Par exemple, vous voudrez peut-être partager un article intéressant, soit en l'envoyant par courrier électronique à vos amis, soit en le tweetant au monde entier.

Auparavant, seules les applications natives pouvaient s'enregistrer auprès du système d'exploitation pour recevoir des partages d'autres applications installées. Mais avec l'API Web Shared Destination, les applications Web installées peuvent s'enregistrer auprès du système d'exploitation sous-jacent en tant que destination partagée pour recevoir du contenu partagé. Ajout de la prise en charge du texte et des données dans Chrome 71, et la prise en charge des fichiers a été ajoutée dans 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.

Enregistrez votre application en tant que cible de partage

Pour enregistrer votre application en tant que cible de partage, vous devez répondre Critères d'installation de Chrome. De plus, avant qu'un utilisateur puisse partager votre application, il doit l'ajouter à son écran d'accueil. Cela empêche les sites d'être ajoutés de manière aléatoire au sélecteur d'intention de partage de l'utilisateur et garantit que le partage est quelque chose que les utilisateurs souhaitent faire avec votre application.

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" : "GET" ,
 "params" : {
 "title" : "title" ,
 "texte" : "texte" ,
 "url" : "url"
 }
 }

Si votre application dispose déjà d'un schéma d'URL à partager, vous pouvez remplacer le 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" ,
 "méthode" : "POST" ,
 "enctype" : "multipart / form-data" ,
 "params" : {
 "url" : "lien"
 }
 }
 }

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 Le champ prend un type MIME, une extension de fichier ou un tableau contenant les deux. Il est préférable de fournir un tableau qui inclut à la fois un type MIME et une extension de fichier, car les systèmes d'exploitation diffèrent par ce qu'ils préfèrent.

{
 "name" : "Agrégateur" ,
 "share_target" : {
 "action" : "/ cgi-bin / aggregate" ,
 "méthode" : "POST" ,
 "enctype" : "multipart / form-data" ,
 "params" : {
 "title" : "name" ,
 "texte" : "description" ,
 "url" : "lien" ,
 "fichiers" : [
 {
 "nom" : "enregistrements" ,
 "accepter" : [ "texte / csv" , ".csv" ]
 } ,
 {
 "name" : "graphs" ,
 "accepter" : "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:

• Un client de messagerie peut rédiger un nouvel e-mail en utilisant 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 comme un lien. 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" (par défaut), le navigateur ouvre une nouvelle fenêtre dans le 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 = bonjour & text = monde. Pour traiter cela, utilisez un DOMContentLoaded écouteur d'événements sur votre page de premier plan et analysez la chaîne de requête:

fenêtre . addEventListener ( 'DOMContentLoaded' , ( ) => {
 const parsedUrl = nouvelle URL ( emplacement . fenêtre ) ;
 console . log ( 'Titre partagé:' + parsedUrl . searchParams . get ( 'title' ) ) ;
 console . log ( 'Texte partagé:' + parsedUrl . searchParams . get ( 'text' ) ) ;
 console . log ( 'URL partagée:' + 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.

Traitement des actions POST

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 () ou transmettez-le au serveur:

soi . addEventListener ( 'chercher' , événement => {
 if ( event . request . method ! == 'POST' ) {
 événement . respondWith ( fetch ( événement . demande ) ) ;
 retour ;
 }
 événement . respondWith ( ( async ( ) => {
 const formData = attendre l' événement . demande . formData ( ) ;
 lien const = formData . get ( 'lien' ) || '' ;
 const responseUrl = attendre saveBookmark ( lien ) ;
 réponse de retour . rediriger ( 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.