Web Share API es una API de JavaScript que permite que los sitios web compartan texto/URL/archivo a través del cuadro de diálogo de uso compartido nativo del dispositivo mediante la integración con el sistema operativo . Funciona solo con dispositivos móviles y navegadores limitados. Se introdujo por primera vez en Chrome 61 para Android.
Características de la API para compartir en la web:
- Capaz de compartir URL, texto sin formato o archivos.
- Diálogos compartidos nativos, fáciles de usar y personalizados por el usuario.
- Menos código e interfaz de usuario administrada por el sistema operativo. (El desarrollador no necesita manejar el diálogo manualmente)
- Amplia gama de opciones para compartir. (El desarrollador no tiene que preocuparse).
Limitaciones de la API para compartir en la web:
- Solo se admite en navegadores y dispositivos específicos. (Se recomienda agregar un respaldo para evitar problemas de compatibilidad)
- Disponible solo a través de HTTPS.
- Para evitar el mal manejo, solo se puede activar en respuesta a alguna acción del usuario, por ejemplo, hacer clic
Nota: la API para compartir en la Web no es compatible con equipos de escritorio ni con protocolos que no sean HTTPS. Por lo tanto, es necesario servir páginas web a través de HTTPS para poder utilizarlo.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to use web share API for native
share options in HTML and JavaScript?
</title>
</head>
<body style="text-align: center;">
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Web Share API Demonstration</h2>
<button id="shareBtn">Share</button>
<script>
document.querySelector('#shareBtn')
.addEventListener('click', event => {
// Fallback, Tries to use API only
// if navigator.share function is
// available
if (navigator.share) {
navigator.share({
// Title that occurs over
// web share dialog
title: 'GeeksForGeeks',
// URL to share
url: 'https://geeksforgeeks.org'
}).then(() => {
console.log('Thanks for sharing!');
}).catch(err => {
// Handle errors, if occured
console.log(
"Error while using Web share API:");
console.log(err);
});
} else {
// Alerts user if API not available
alert("Browser doesn't support this API !");
}
})
</script>
</body>
</html>
Producción:
Este método es compatible con muchos navegadores que se enumeran a continuación:
- cromo android (61+)
- Firefox Android (79+)
- Ópera android (48+)
- iOS Safari (12.2+)
- SamsungInternet (8.0+)
Referencia: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share
Publicación traducida automáticamente
Artículo escrito por omkarphansopkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA