Bug fix: Web Share API se abre dos veces en Google Chrome en Android

Quería compartir con todo el mundo una pequeña solución que tuve que escribir para asegurarme de que la API de Web Share funciona para todas las versiones de Google Chrome que se ejecutan en dispositivos Android.

También compartí en el foro oficial de desarrollo de Chromium el fix así como alguna idea de como atacar el problema. Sin embargo este bug no está solucionado y la última actividad en el thread es del 24 de Septiembre del 2020.

Web Share API

Web Share API es solo un pequeño fragmento de código que nos permite hacer una llamada al sistema operativo y mostrará la barra de herramientas nativa de Web Share en los dispositivos de Apple y Android así como en ordenadores bajo el sistema operativo Windows. Esto funcionará siempre y cuando los navegadores web sean compatibles e implementen esta API.

Para aquellos que saben poco o nada sobre la API Web Share, Google Developers tiene un buen artículo al respecto y un video que muestra cómo funciona.

El problema

Queremos asegurarnos que el snack bar que abre la API de Web Share se abra solo una vez. Así de simple y lamentablemente no siempre es así.

Actualmente, hay un error en los navegadores Google Chrome y Chromium que se ejecutan en algunos dispositivos móviles Android.

Esto no tendría más importancia si no fuera porque el ecosistema de Android es bien conocido por su gran fragmentación de versiones y dispositivos, que hará que este bug persista en el tiempo hasta que desaparezcan los dispositivos antiguos.

El error hará que Google Chrome abra el cuadro de diálogo para compartir dos veces, una encima de la otra. Cuando selecciones dónde compatir, no hará nada y volverá a mostrarse justo debajo el mismo cuadro de diálogo y este si funcionará. Esta UX es terriblemente mala y dejará muy confuso al usuario.

Después de experimentar este bug en mi dispositivo Samsung Galaxy S4 (algo antiguo ya) con Android 8 y más móviles antiguos pero no poder reproducir lo mismo con un Samsung Galaxy S6 en un Android 9, me di cuenta que este bug iba a ser molesto. De hecho no tenia ni idea por dónde empezar.

Pero después de un par de horas probando cosas, se me ocurrió una solución muy simple. Y funcionó.

Cómo corregir el error usando JavaScript

Para corregir el bug necesitamos realizar un seguimiento de este evento. Nuestro algoritmo debería actuar de la siguiente manera:

  • La API de Web Share se activa cuando el usuario pulsa sobre un botón o enlace. Es decir, un evento onClick.
  • Cuando se muestre el primer cuadro de diálogo usando navigation.share hay que guardar una variable para mantener apuntado el estado actual.
  • Cuando el bug entra en juego, y justo antes de que se habra un segundo cuadro de diálogo hay que poder validar si hay uno abierto y evitarlo.

Tristemente la única manera de poder hacer esto es tirando de monkey patching del objeto global navigator . Añadiremos una variable running que usaremos para cambiar el estado.

El resultado es el siguiente:

if (navigator.share !== undefined && location.protocol == 'https:') {

    if (navigator.running == true) {        
      return;
    }

    navigator.running = true;
    navigator
      .share({ 
           title: "NilPortugues.com",
           text: "I just want to share this with you", 
           url: "https://nilportugues.com" 
      })
      .then(() => {
        navigator.running = false;
      })
      .catch(error => {
        navigator.running = false;
        console.log(error)
      });

} else {
  alert('Your browser does not support Web Share API yet.');
}

Y así es como se arregla este bug.

Además no está de más saber que este fix no altera el comportamiento de la Web Share API en los nuevos dispositivos en los cuales el bug no está presente.

Comparte este artículo