Las apps web pueden usar las mismas funciones de uso compartido proporcionadas por el sistema que las apps específicas de la plataforma.
Con 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. 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.
Funcionalidades y limitaciones
El uso compartido web tiene las siguientes funciones y limitaciones:
- Solo se puede usar en sitios al que se accede mediante HTTPS.
- Si el uso compartido ocurre 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. Invocarla a través del controlador
onloades imposible. - Puede compartir URLs, texto o archivos.
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, 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 los tres miembros amplía la flexibilidad de los casos de uso. Imagina si, después de ejecutar el siguiente código, el usuario elige 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 y 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 la URL canónica en el <head> de la página y compartirla. Esto le brindará una mejor experiencia al usuario. No solo evita los redireccionamientos, sino que también garantiza que una URL compartida publique la experiencia del usuario correcta para un cliente en particular. Por ejemplo, si un amigo comparte la URL de un dispositivo móvil y la miras en una computadora, verás la 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});
Cómo compartir archivos
Para compartir archivos, primero realiza una prueba y llama a navigator.canShare(). 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 funciones probando para navigator.canShare() en lugar de navigator.share().
El objeto de datos que se pasa a canShare() solo es compatible con 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 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 de Glitch y ver el código fuente.
Si no proporcionas el atributo, se generará una NotAllowedError con el mensaje Failed to execute 'share' on 'Navigator': Permission denied.
Caso de éxito de Sigue a Santa
Santa Tracker, un proyecto de código abierto, es una tradición de las fiestas en Google. Cada diciembre, puedes celebrar la temporada con juegos y experiencias educativas.
En 2016, el equipo de Sigue a Papá Noel 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 quitó los botones para compartir en dispositivos móviles porque el espacio es premium, 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 permitió ahorrar píxeles valiosos. También descubrieron que los usuarios compartían con Web Share alrededor de un 20% más que aquellos sin la API habilitada. Ve a Sigue a Santa para ver Compartir en la Web en acción.
Navegadores compatibles
La compatibilidad del navegador con la API de Web Share tiene matices, y se recomienda usar la detección de funciones (como se describe en las muestras de código anteriores) en lugar de suponer que se admite un método en particular.
A continuación, presentamos un resumen de la compatibilidad con esta función. Para obtener información detallada, sigue cualquiera de los vínculos de asistencia.
navigator.canShare()navigator.share()
Muestra compatibilidad con la API
¿Planeas usar la API de Web Share? Tu asistencia pública ayuda al equipo de Chromium a priorizar funciones y le 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 lo usas.