Partage simplifié sur mobile et ordinateur grâce à l'API Web Share Target
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">![Téléphone Android avec l'option "Partager via" panneau ouvert.](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/web-share-target/image/android-phone-the-share-e651a6cf19688.png?authuser=3&hl=fr)
Voir Web Share Target en action
- 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.
- 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.
- Ouvrez une application compatible avec le partage ou utilisez le bouton "Partager". dans l'application de démonstration.
- 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, avectext
eturl
concaténés dans le corps. - Une application de réseau social peut rédiger un nouveau post en ignorant
title
, en utilisanttext
dans le corps du message et en ajoutanturl
en tant que lien. Sitext
correspond à l'application peut également utiliserurl
dans le corps. Siurl
est manquant, l'application peut analysertext
à 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 etfiles
comme images. - Une application de SMS peut rédiger un nouveau message avec
text
eturl
concaténés et en supprimanttitle
.
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">![Un téléphone Android affichant l'application de démonstration avec du contenu partagé.](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/web-share-target/image/an-android-phone-displayi-000d1b109b71e.png?authuser=3&hl=fr)
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.