Cómo recibir datos compartidos con la API de Web Share Target

Uso simplificado en dispositivos móviles y computadoras de escritorio con la API de Web Share Target

Pete LePage

Joe Medley

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.

Mira cómo funciona Web Share Target

1. 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.
2. 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.
3. Abre cualquier app que admita el uso compartido o usa el botón Compartir. en la app de demo.
4. 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, con text y url concatenados como cuerpo.
• Una app de red social podría redactar una nueva publicación ignorando title usando text como el cuerpo del mensaje y agregando url como vínculo. Si text es la app también podría usar url en el cuerpo. Si falta url, la app podría analizar text 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 y files 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 y url. se concatenan y se descarta title.

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

.

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

• Squoosh
• AWP de libro de recortes

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.