Realiza la integración con la IU de uso compartido del SO mediante la API de Web Share

Las apps web pueden usar las mismas funciones de uso compartido que proporcionan los sistemas que las apps específicas de la plataforma.

Joe Medley
Joe Medley
GitHub

Con la API de Web Share, las apps web pueden usar las mismas funciones de uso compartido que proporcionan los sistemas que las apps específicas de la plataforma. La API de Web Share permite que las apps web compartan vínculos, texto y archivos con otras apps instaladas en el dispositivo de la misma manera que las apps específicas de la plataforma.

Selector de destino de uso compartido a nivel del sistema con una AWP instalada como opción.
Se agregó un selector de destino de uso compartido a nivel del sistema con una AWP instalada como opción.

Funcionalidades y limitaciones

La acción de compartir en la Web tiene las siguientes capacidades y limitaciones:

  • Solo se puede usar en un sitio al que se accede a través de HTTPS.
  • Si el uso compartido se realiza en un iframe de terceros, se debe usar el atributo allow.
  • Se debe invocar en respuesta a una acción del usuario, como un clic. Invocarlo a través del controlador onload es imposible.
  • Puede compartir URLs, texto o archivos.

Navegadores compatibles

  • Chrome: 89.
  • Edge: 93.
  • Firefox: Detrás de una marca.
  • Safari: 12.1.

Origen

Cómo compartir vínculos y texto

Para compartir vínculos y texto, usa el método share(), que es un método basado en promesas con un objeto de propiedades obligatorias. Para evitar que el navegador arroje un TypeError, el objeto debe contener al menos una de las siguientes propiedades: title, text, url o files. Por ejemplo, puedes compartir texto sin una URL o viceversa. Permitir que los tres miembros expanda la flexibilidad de los casos de uso. Imagina que, después de ejecutar el código que aparece a continuación, el usuario eligió una aplicación de correo electrónico como objetivo. El parámetro title podría convertirse en el asunto del correo electrónico, el text, el cuerpo del mensaje y los archivos, los archivos adjuntos.

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

Si tu sitio tiene varias URLs para el mismo contenido, comparte la URL canónica de la página en lugar de la URL actual. En lugar de compartir document.location.href, debes buscar una etiqueta <meta> de URL canónica en el <head> de la página y compartirla. Esto proporcionará una mejor experiencia al usuario. No solo evita los redireccionamientos, sino que también garantiza que una URL compartida entregue la experiencia del usuario correcta para un cliente en particular. Por ejemplo, si un amigo comparte una URL para dispositivos móviles y la ves en una computadora de escritorio, deberías ver una versión para computadoras:

let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
    url = canonicalElement.href;
}
navigator.share({url});

Cómo compartir archivos

Para compartir archivos, primero prueba navigator.canShare() y llama a esta función. Luego, incluye un array de archivos en la llamada a navigator.share():

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

Ten en cuenta que la muestra controla la detección de componentes probando navigator.canShare() en lugar de navigator.share(). El objeto de datos que se pasa a canShare() solo admite la propiedad files. Se pueden compartir ciertos tipos de archivos de audio, imagen, PDF, video y texto. Consulta Extensiones de archivo permitidas en Chromium para ver una lista completa. Es posible que se agreguen más tipos de archivos en el futuro.

Uso compartido en iframes de terceros

Para activar la acción de compartir desde un iframe de terceros, incorpora el iframe con el atributo allow con un valor de web-share:

<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>

Puedes ver esto en acción en una demostración en Glitch y ver el código fuente. Si no proporcionas el atributo, se generará un NotAllowedError con el mensaje Failed to execute 'share' on 'Navigator': Permission denied.

Caso de éxito de Sigue a Santa

La app de Sigue a Santa muestra un botón para compartir.
Botón de compartir de Sigue a Santa.

Sigue a Papá Noel, un proyecto de código abierto, es una tradición de las festividades en Google. Todos los diciembres, puedes celebrar la temporada con juegos y experiencias educativas.

En 2016, el equipo de Sigue a Papá Noel usó la API de Compartir en la Web en Android. Esta API era perfecta para dispositivos móviles. En años anteriores, el equipo quitó los botones de compartir en dispositivos móviles porque el espacio es escaso y no podían justificar tener varios objetivos de uso compartido.

Sin embargo, con la API de Web Share, pudieron presentar un solo botón, lo que ahorra píxeles valiosos. También descubrieron que los usuarios que compartían contenido con Web Share lo hacían un 20% más que los usuarios que no tenían habilitada la API. Ve a Sigue a Santa para ver Compartir con la Web en acción.

Navegadores compatibles

La compatibilidad del navegador con la API de Web Share es sutil, y se recomienda que uses la detección de atributos (como se describe en los ejemplos de código anteriores) en lugar de suponer que se admite un método en particular.

A continuación, se incluye un resumen general de la compatibilidad con esta función. Para obtener información detallada, sigue cualquiera de los vínculos de asistencia.

navigator.canShare()

Navegadores compatibles

  • Chrome: 89.
  • Edge: 93.
  • Firefox: Detrás de una marca.
  • Safari: 14.

Origen

navigator.share()

Navegadores compatibles

  • Chrome: 89.
  • Edge: 93.
  • Firefox: Detrás de una marca.
  • Safari: 12.1.

Origen

Cómo mostrar compatibilidad con la API

¿Piensas usar la API de Web Share? Tu apoyo público ayuda al equipo de Chromium a priorizar las funciones y les muestra a otros proveedores de navegadores lo importante que es admitirlas.

Envía un tuit a @ChromiumDev con el hashtag #WebShare y cuéntanos dónde y cómo lo usas.