Detección de Soporte de Acelerómetros en Dispositivos para Acceso a Devicemotion/Deviceorientation

En este artículo, abordamos cómo detectar si un dispositivo que ejecuta un script de JavaScript en un navegador tiene disponibles datos del acelerómetro para el acceso a devicemotion y deviceorientation.

Problema

El código actual intenta verificar el soporte de los eventos de devicemotion y deviceorientation, pero presenta problemas en la visualización de mensajes en algunos dispositivos. En particular:

• En un portátil sin soporte de movimiento, solo muestra "Loading…" en lugar de "Not supported on this device".
• En una tableta que supuestamente tiene soporte de movimiento pero no de orientación, el mensaje "Loading…" persiste en lugar de mostrar "Orientation not supported on this device".

Análisis del Código

El script tiene las siguientes funcionalidades:

1. Detección de devicemotion:

   • Se agrega un evento de escucha para devicemotion si está disponible.
   • Dentro de la función de callback onMotion, si event.acceleration.y es nulo, no se ejecuta ninguna acción.
2. Detección de deviceorientation:
   • Se verifica si ondeviceorientation está presente en el objeto window para determinar si tiene soporte para la orientación.

Sin embargo, el problema radica en que no se están manejando correctamente los estados cuando no hay soporte para devicemotion y deviceorientation.

Solución Propuesta

A continuación se presenta una modificación del código para mejorar la detección y los mensajes de soporte:

function onMotion(event) {
    if (event.acceleration.y == null) {
        return;
    }
    document.getElementById("support-status-text").innerHTML = "Supported on this device";
    document.getElementById("y-acceleration-text").innerHTML = roundToFixed(event.acceleration.y);
}

function roundToFixed(value) {
    return value == null ? value : value.toFixed(2);
}

if (!('ondeviceorientation' in window)) {
    document.getElementById("support-status-text").innerHTML = "Orientation not supported on this device";
} else {
    if ('ondevicemotion' in window) {
        window.addEventListener('devicemotion', onMotion);
    } else {
        document.getElementById("support-status-text").innerHTML = "Motion not supported on this device";
    }
}

Cambios Realizados

• La verificación de devicemotion se ha movido dentro de la condición que verifica deviceorientation. Esto garantiza que el mensaje de falta de soporte para devicemotion se muestre si deviceorientation está habilitado pero devicemotion no lo está.

• Se han añadido mensajes más precisos para identificar cuál de las características no está disponible según el dispositivo.

Conclusión

La modificación del código propuesto debe resolver los problemas de identificación del soporte para los eventos de movimiento y orientación en diversos dispositivos. Con estos cambios, los usuarios podrán ver mensajes apropiados que reflejan el soporte o la falta del mismo en sus dispositivos, proporcionando una mejor experiencia de usuario al interactuar con los scripts de JavaScript.