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 capacidades de uso compartido proporcionadas por el sistema que las apps específicas de la plataforma.

Joe Medley
Joe Medley
GitHub

Con la API de Web Share, las aplicaciones web pueden usar el mismo recurso compartido proporcionado por el sistema capacidades como apps específicas de una plataforma. La API de Web Share permite que las apps web compartir vínculos, texto y archivos con otras apps instaladas en el dispositivo de la misma que las apps específicas de una plataforma.

Selector de objetivos de uso compartido a nivel del sistema con una AWP instalada como opción.
Selector de objetivos de uso compartido a nivel del sistema con una AWP instalada como opción.

Funcionalidades y limitaciones

Web Share tiene las siguientes funciones 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. Invocación mediante el controlador onload es imposible.
  • Puede compartir URL, texto o archivos.

Navegadores compatibles

  • Chrome: 89.
  • Borde: 93.
  • Firefox: detrás de una marca.
  • Safari: 12.1.

Origen

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 obligatorio. Para evitar que el navegador arroje una TypeError, haz lo siguiente: el objeto debe contener al menos una de las siguientes propiedades: title, text, url o files. Tú pueden, por ejemplo, compartir texto sin una URL o viceversa. Permitir los tres de Google Cloud amplía la flexibilidad de los casos de uso. Imagina si después de ejecutar el código a continuación, el usuario eligió una aplicación de correo electrónico como destino. El parámetro title podría convertirse en el asunto del correo electrónico, el text, el cuerpo del mensaje, y los archivos, el 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 el nombre de la página canónica en lugar de la actual. En vez de compartir document.location.href, buscarías una etiqueta de URL canónica <meta> en la <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 se publique una URL compartida la experiencia del usuario correcta para un cliente en particular. Por ejemplo, si un amigo comparte una URL de un dispositivo móvil y la mira en una computadora de escritorio deberías ver una versión para computadoras de escritorio:

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 realiza una prueba y llama a navigator.canShare(). Luego, incluye 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 maneja la detección de funciones realizando pruebas de navigator.canShare() en lugar de para navigator.share(). El objeto de datos que se pasa a canShare() solo admite la propiedad files. Es posible compartir ciertos tipos de archivos de audio, de imagen, .pdf, de video y de texto. Consulta Extensiones de archivos permitidas en Chromium. para obtener 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 visualizar el código fuente. Si no proporcionas el atributo, se mostrará una NotAllowedError con el mensaje Failed to execute 'share' on 'Navigator': Permission denied

Caso de éxito sobre Sigue a Santa

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

Santa Tracker, un proyecto de código abierto, es una la tradición de las festividades en Google. Cada diciembre, puedes celebrar las fiestas con juegos y experiencias educativas.

En 2016, el equipo de Sigue a Santa usó la API de Web Share en Android. Esta API era la opción perfecta para dispositivos móviles. En años anteriores, el equipo eliminó los botones para compartir en los dispositivos móviles porque el espacio y no podían justificar varios objetivos de uso compartido.

Pero con la API de Web Share, pudieron presentar un botón, ahorrando píxeles preciados. También descubrieron que los usuarios compartían con Web Share alrededor de un 20% más que usuarios sin la API habilitada. Dirígete a Sigue a Santa para ver Web Share en acción.

Navegadores compatibles

La compatibilidad del navegador con la API de Web Share es matizada y se recomienda usar la función detección (como se describe en las muestras de código anteriores), en lugar de suponer que se debe no es compatible.

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

navigator.canShare()

Navegadores compatibles

  • Chrome: 89.
  • Borde: 93.
  • Firefox: detrás de una marca.
  • Safari: 14.

Origen

navigator.share()

Navegadores compatibles

  • Chrome: 89.
  • Borde: 93.
  • Firefox: detrás de una marca.
  • Safari: 12.1.

Origen

Demuestra compatibilidad con la API

¿Piensas usar la API de Web Share? 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 #WebShare y cuéntanos dónde y cómo la utilizas.