Uso simplificado en dispositivos móviles y computadoras de escritorio con la API de Web Share Target
En un dispositivo móvil o de escritorio, compartir debe ser tan sencillo como hacer clic en el botón Compartir. elegir una app y elegir con quién compartir contenido. Por ejemplo, es posible que quieras compartir un artículo interesante, ya sea enviándolo por correo electrónico a amigos o en un tuit para del mundo.
En el pasado, solo las apps específicas de la plataforma podían registrarse con el sistema operativo para para recibir archivos compartidos de otras apps instaladas. Pero con la API de Web Share Target, las aplicaciones web instaladas pueden registrarse con el sistema operativo subyacente como objetivo de uso compartido para recibir contenido compartido.
![Teléfono Android con el botón "Compartir mediante" panel lateral abierto.](https://developer.chrome.com/static/docs/capabilities/web-apis/web-share-target/image/android-phone-the-share-e651a6cf19688.png?authuser=19&hl=es)
Mira cómo funciona Web Share Target
- Con Chrome 76 o una versión posterior para Android, o Chrome 89 o una versión posterior una computadora de escritorio, abre la demostración de Web Share Target.
- Cuando se te solicite, haz clic en Instalar para agregar la app a la pantalla principal. usa el menú de Chrome para agregarlo a la pantalla principal.
- Abre cualquier app que admita el uso compartido o usa el botón Compartir. en la app de demo.
- En el selector de objetivos, elige Prueba de Compartir en la Web.
Después de compartir, deberías ver toda la información compartida en la app web de destino de uso compartido web.
Registra tu app como objetivo de uso compartido
Para registrar tu app como objetivo de uso compartido, esta debe cumplir con los requisitos de criterios de instalación. Además, antes de que un usuario pueda compartir a tu app, deben agregarla a su pantalla principal. Esto evita que los sitios se agregan al azar al selector de intents para compartir del usuario y garantiza que Compartir es algo que los usuarios quieren hacer con tu app.
Actualiza el manifiesto de tu app web
Para registrar tu app como objetivo de uso compartido, agrega una entrada share_target
a su sitio web.
manifiesto de la app. Esto le indica al sistema operativo que incluya tu app como
una opción en el selector de intents. Lo que agregas al manifiesto controla los datos
que tu app aceptará. Hay tres situaciones comunes para share_target
entrada:
- Aceptando información básica
- Aceptando cambios en la solicitud
- Se aceptan archivos
Aceptando información básica
Si la app objetivo solo acepta información básica, como datos, vínculos
y texto, agrega lo siguiente al archivo manifest.json
:
"share_target": {
"action": "/share-target/",
"method": "GET",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
}
Si tu aplicación ya tiene un esquema de URL compartida, puedes reemplazar params
de salida con tus parámetros de consulta existentes. Por ejemplo, si la URL que quieres compartir
el esquema usa body
en lugar de text
, puedes reemplazar "text": "text"
por "text":
"body"
.
Si no se proporciona, el valor predeterminado de method
es "GET"
. El campo enctype
, no
que se muestra en este ejemplo, indica el tipo de codificación de los datos.
Para el método "GET"
, enctype
se establece de forma predeterminada en "application/x-www-form-urlencoded"
.
se ignora si está configurado en cualquier otra opción.
Aceptando cambios en la solicitud
Si los datos compartidos cambian la app de destino de alguna forma (por ejemplo, al guardar una
en la aplicación de destino. Establece el valor de method
en "POST"
y, luego, incluye
el campo enctype
. En el siguiente ejemplo, se crea un favorito en la app de destino,
por lo que usa "POST"
para method
y "multipart/form-data"
para el
enctype
:
{
"name": "Bookmark",
"share_target": {
"action": "/bookmark",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"url": "link"
}
}
}
Se aceptan archivos
Al igual que con los cambios de la aplicación, para aceptar archivos, method
debe ser "POST"
.
y que enctype
esté presente. Además, enctype
se debe
"multipart/form-data"
y se debe agregar una entrada files
.
También debes agregar un array de files
que defina los tipos de archivos que acepta tu app. El
Los elementos del array son entradas con dos miembros: un campo name
y un accept
.
. El campo accept
toma un tipo de MIME, una extensión de archivo o un array
que contiene ambos. Es mejor proporcionar un array que incluya
Es un tipo de MIME y una extensión de archivo, ya que los sistemas operativos difieren según el tipo de
que prefieran.
{
"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"
}
]
}
}
}
Cómo administrar el contenido entrante
La forma en que lidias con los datos entrantes compartidos depende de ti . Por ejemplo:
- Un cliente de correo electrónico podría crear el borrador de un nuevo mensaje utilizando
title
como asunto de un correo electrónico, context
yurl
concatenados como cuerpo. - Una app de red social podría redactar una nueva publicación ignorando
title
usandotext
como el cuerpo del mensaje y agregandourl
como vínculo. Sitext
es la app también podría usarurl
en el cuerpo. Si faltaurl
, la app podría analizartext
en busca de una URL y agregarla como vínculo. - Una app para compartir fotos podría crear una nueva presentación de diapositivas con
title
como el título de la presentación de diapositivas,text
como descripción yfiles
como las imágenes de la presentación de diapositivas. - Una app de mensajería de texto podría redactar un mensaje nuevo con
text
yurl
. se concatenan y se descartatitle
.
Procesando archivos compartidos GET
Si el usuario selecciona tu aplicación y tu method
es "GET"
(la
predeterminada), el navegador abre una ventana nueva en la URL action
. Luego, el navegador
genera una cadena de consulta con valores codificados para URL proporcionados en el manifiesto.
Por ejemplo, si la app para compartir proporciona title
y text
, la cadena de consulta se
?title=hello&text=world
Para procesar esta información, usa un DOMContentLoaded
.
objeto de escucha de eventos de tu página en primer plano y analiza la cadena de consulta:
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'));
});
Asegúrate de usar un service worker para almacenar en caché previamente el action
para que se cargue rápido y funcione de manera confiable, incluso si el usuario no tiene conexión.
Workbox es una herramienta que puede ayudarte
implementar el almacenamiento previo en caché en tu service worker.
Procesando archivos compartidos POST
Si tu method
es "POST"
, como lo sería si tu app de destino acepta una
archivos compartidos o a favoritos, el cuerpo de la solicitud POST
entrante contiene
Los datos que pasó la aplicación compartida, codificados con el valor enctype
que se proporcionan en el manifiesto.
La página en primer plano no puede procesar estos datos directamente. Dado que la página ve los datos como
una solicitud, la página se la pasa al service worker, donde puedes interceptarla con
fetch
objeto de escucha de eventos. Desde aquí, puedes pasar los datos al primer plano
página con postMessage()
o pásala al servidor:
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);
})());
}
});
Cómo verificar el contenido compartido
![Teléfono Android en el que se muestra la app de demostración con contenido compartido.](https://developer.chrome.com/static/docs/capabilities/web-apis/web-share-target/image/an-android-phone-displayi-000d1b109b71e.png?authuser=19&hl=es)
Asegúrate de verificar los datos entrantes. Lamentablemente, no hay garantía de que otros las apps compartirán el contenido apropiado según el parámetro correcto.
Por ejemplo, en Android, el campo url
estará vacío porque
No es compatible con el sistema de uso compartido de Android. En cambio, las URLs aparecerán con frecuencia
el campo text
o, de vez en cuando, en el campo title
.
Navegadores compatibles
La API de Web Share Target se admite como se describe a continuación:
En todas las plataformas, la app web debe instalarse para que se muestre como objetivo potencial para recibir datos compartidos.
Aplicaciones de muestra
Demuestra compatibilidad con la API
¿Piensas usar la API de Web Share Target? Tu asistencia pública ayuda al equipo de Chromium prioriza funciones y muestra a otros proveedores de navegadores la importancia de admitirlas.
Envía un tweet a @ChromiumDev con el hashtag
#WebShareTarget
y cuéntanos dónde y cómo la utilizas.