Saltar al contenido principal

Las aplicaciones web pueden utilizar las mismas capacidades de uso compartido proporcionadas por el sistema que las aplicaciones nativas.


Actualizado

Con la API Web Share, las aplicaciones web pueden utilizar las mismas capacidades de uso compartido proporcionadas por el sistema que las aplicaciones nativas. La API Web Share hace posible que las aplicaciones web compartan enlaces, texto y archivos con otras aplicaciones instaladas en el dispositivo de la misma manera que las aplicaciones nativas.

Compartir es solo la mitad de la magia. Las aplicaciones web también pueden ser objetivos para compartir, lo que significa que pueden recibir datos, enlaces, texto y archivos de aplicaciones web o nativas. Consulte la publicación Recibir datos compartidos para obtener detalles sobre cómo registrar su aplicación como destino para compartir.

Conceptos y uso

wst-send-2631807

Selector de destino compartido a nivel del sistema con una PWA instalada como opción.

Capacidades y limitaciones

El recurso compartido web tiene las siguientes capacidades y limitaciones:

  • Solo se puede usar en un sitio que admita HTTPS.
  • Debe invocarse en respuesta a una acción del usuario, como un clic. Invocándolo a través del onload el manejador es imposible.
  • Puede compartir URL, texto o archivos.
  • A mediados de 2020, solo está disponible en Safari y en Android en las bifurcaciones de Chromium. Ver
    MDN
    para detalles.

Para compartir enlaces y texto, use el share() método, que es un método basado en promesas con un objeto de propiedades requerido. Para evitar que el navegador arroje un TypeError, el objeto debe contener al menos una de las siguientes propiedades: title, text, url o files. Puede, por ejemplo, compartir texto sin una URL o viceversa. Permitir que los tres miembros amplíen la flexibilidad de los casos de uso. Imagínese si después de ejecutar el código siguiente, el usuario eligiera una aplicación de correo electrónico como destino. los title El parámetro puede convertirse en el asunto del correo electrónico, el text, el cuerpo del mensaje y los archivos, los 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 su sitio tiene varias URL para el mismo contenido, comparta la URL canónica de la página en lugar de la URL actual. En lugar de compartir
document.location.href, deberías buscar una URL canónica <meta> etiqueta en la página <head> y comparte eso. Esto proporcionará una mejor experiencia al usuario. No solo evita las redirecciones, sino que también garantiza que una URL compartida proporcione la experiencia de usuario correcta para un cliente en particular. Por ejemplo, si un amigo comparte una URL móvil y la miras en una computadora de escritorio, deberías ver una versión de escritorio:

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

Compartir archivos

Para compartir archivos, primero pruebe y llame navigator.canShare(). Luego incluya una matriz 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.`);
}

Observe que la muestra maneja la detección de características probando
naviagator.canShare() en lugar de para navigator.share(). El objeto de datos pasado a canShare() solo admite el files propiedad. Se pueden compartir archivos de imagen, video, audio y texto. (Ver
Extensiones de archivo permitidas en Chromium.) Es posible que se agreguen más tipos de archivos en el futuro.

Estudio de caso de Santa Tracker

santa-phone-7657103

Botón de compartir de Santa Tracker.

Rastreador de santa, un proyecto de código abierto, es una tradición navideña en Google. Cada diciembre, puedes celebrar la temporada con juegos y experiencias educativas.

En 2016, el equipo de Santa Tracker utilizó la API Web Share en Android. Esta API fue perfecta para dispositivos móviles. En años anteriores, el equipo deshabilitó los botones para compartir en dispositivos móviles porque el espacio es escaso y no podían justificar tener varios objetivos para compartir.

Pero con la API Web Share, pudieron presentar solo un botón, ahorrando valiosos píxeles. También encontraron que los usuarios compartían con Web Share alrededor de un 20% más que los usuarios sin la API habilitada. Dirigirse a
Rastreador de santa para ver Web Share en acción.

Demostraciones para compartir web

R Marketing Digital