El artículo enumera 12 API de JavaScript de uso común, que incluyen geolocalización, orientación del dispositivo, estado de la batería, vibración, etc. Para cada API, los artículos brindan explicaciones detalladas, código de muestra y notas de uso. Estas API pueden ayudar a los desarrolladores a implementar funciones como obtener la ubicación del usuario, acceder a los sensores del dispositivo, monitorear el estado de la batería, activar la vibración del dispositivo, etc. en las páginas web móviles.
Este artículo es adecuado para los desarrolladores que tienen una cierta base de programación de JavaScript para leer. Al leer este artículo, los lectores pueden conocer algunas API de JavaScript de uso común y aprender a usarlas para mejorar la interacción y la funcionalidad de las páginas web móviles.
El frente es el texto ~~~
1. API de información de red
La API de información de red permite que las aplicaciones web obtengan información sobre la conexión de red del usuario, como el tipo de conexión (p. ej., Wi-Fi, celular) y su ancho de banda efectivo. La API se puede usar para optimizar la entrega de contenido, administrar el almacenamiento en caché sin conexión o brindar una experiencia personalizada según las condiciones de la red.
Para acceder a la información de la red, navigator.connection se puede utilizar un objeto:
const connection =
navigator.connection ||
navigator.mozConnection ||
navigator.webkitConnection;
const effectiveType = connection.effectiveType;
const downlink = connection.downlink;
console.log('connection: ', connection);
console.log('Effective connection type:', effectiveType);
console.log('Downlink speed:', downlink);
2. API de geolocalización
La API de geolocalización permite que las aplicaciones web obtengan la ubicación geográfica del dispositivo de un usuario. Esto es útil para servicios basados en ubicación, aplicaciones de mapas y entrega de contenido personalizado. Al obtener la ubicación del usuario, podemos proporcionar información direccional, navegación o funcionalidad específica de la ubicación.
Por ejemplo, para obtener la ubicación actual del usuario, puede usar getCurrentPosition() el método:
navigator.geolocation.getCurrentPosition(function success(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
console.log('Latitude:', latitude);
console.log('Longitude:', longitude);
});3. API de captura de medios
La API de captura de medios permite que las aplicaciones web accedan a las capacidades de captura de medios del dispositivo, como la cámara y el micrófono. Esta API le permite integrar la funcionalidad de captura de imágenes y videos directamente en sus aplicaciones web. Es especialmente útil para aplicaciones que requieren cargar fotos o videos, videoconferencias o experiencias de realidad aumentada.
Para capturar medios desde la cámara del dispositivo, puede usar getUserMedia() el método:
navigator.mediaDevices
.getUserMedia({ video: true, audio: false })
.then(function (stream) {
// Do something with the media stream
})
.catch(function (error) {
// Handle the error
});4. API de solicitud de pago
La API de solicitud de pago simplifica el proceso de integración de procesos de pago seguros en aplicaciones web. Proporciona una forma estandarizada de recopilar información de pago e iniciar solicitudes de pago, lo que facilita a los usuarios realizar pagos y mejora la experiencia general de pago. Esta API es especialmente valiosa para sitios de comercio electrónico o cualquier aplicación que involucre transacciones financieras.
Para iniciar una solicitud de pago, PaymentRequest se debe crear un objeto:
const supportedPaymentMethods = [
{
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'mastercard'],
},
},
];
const paymentDetails = {
total: {
label: 'Total',
amount: { currency: 'USD', value: '10.00' },
},
};
const paymentRequest = new PaymentRequest(
supportedPaymentMethods,
paymentDetails,
);
paymentRequest
.show()
.then(function (paymentResponse) {
console.log('paymentResponse: ', paymentResponse);
// Process the payment response
})
.catch(function (error) {
console.log('error: ', error);
// Handle errors
});Al integrar la API de solicitud de pago, puede simplificar el proceso de pago y brindar a los usuarios una experiencia de pago sin inconvenientes.
5. API de estado de la batería
La API de estado de la batería proporciona información valiosa sobre el estado y la carga de la batería del dispositivo. Le permite determinar si la batería se está cargando, cuánto tiempo queda antes de que se agote por completo y el nivel actual de la batería. Por ejemplo:
navigator.getBattery().then(console.log);
6. API web de Bluetooth
La Web Bluetooth API permite que las aplicaciones web se comuniquen con dispositivos Bluetooth, lo que abre posibilidades para interactuar con dispositivos IoT y crear experiencias conectadas innovadoras. Esta API permite que las aplicaciones web descubran dispositivos Bluetooth cercanos, establezcan una conexión e intercambien datos con ellos. Es especialmente adecuado para aplicaciones que involucren dispositivos IoT, wearables o sistemas de domótica.
Para descubrir dispositivos bluetooth cercanos y conectarse a ellos, puede usar requestDevice() el método:
navigator.bluetooth
.requestDevice({ filters: [{ services: ['heart_rate'] }] })
.then(function (device) {
// Connect to the selected device
})
.catch(function (error) {
// Handle errors
});Una vez conectado, puede usar la API provista para interactuar con el dispositivo Bluetooth e intercambiar datos según sea necesario.
7. API del sensor de luz ambiental
La API del sensor de luz ambiental permite que las aplicaciones web accedan al sensor de luz ambiental del dispositivo. Esta API proporciona información sobre la intensidad de la luz ambiental, lo que permite que las aplicaciones ajusten su visualización o comportamiento en función de las condiciones de iluminación. Especialmente útil para aplicaciones que requieren brillo adaptativo, optimización de legibilidad o eficiencia energética.
Para obtener la intensidad de la luz ambiental actual, podemos crear un objeto y escuchar sus cambios:
var sensor = new AmbientLightSensor();
sensor.onreading = function() {
var illuminance = sensor.illuminance;
console.log('Illuminance:', illuminance);
};
sensor.start();Al utilizar la API del sensor de luz ambiental, podemos crear aplicaciones web que se adaptan a las condiciones de iluminación, mejorando la legibilidad y la experiencia del usuario.
8. API de notificación web
Las notificaciones juegan un papel vital en las aplicaciones móviles, alertando a los usuarios sobre eventos o actualizaciones importantes. La API de notificaciones web estandariza la forma en que los desarrolladores crean notificaciones en las aplicaciones web. Aunque la apariencia y el comportamiento de las notificaciones pueden variar según los navegadores, esta API proporciona una forma consistente de notificar a los usuarios fuera del contexto de una página web.
Crear una notificación es tan fácil como construir un objeto con el título y el cuerpo deseados:
const notification = new Notification('Email received', { body: 'You received an email. Read it now!' });9. API de acelerómetro
La API del acelerómetro permite que las aplicaciones web accedan al sensor del acelerómetro del dispositivo. Esta API proporciona información sobre la aceleración del dispositivo en los ejes x, y y z , lo que permite que las aplicaciones detecten el movimiento, la orientación o la inclinación del dispositivo. Es especialmente útil para aplicaciones que involucran interacciones basadas en movimiento, juegos o experiencias de realidad virtual.
Para obtener datos del acelerómetro, puede crear un Accelerometer objeto y escuchar sus cambios:
const accelerometer = new Accelerometer({ frequency: 60 });
accelerometer.addEventListener('reading', () => {
const { x, y, z } = accelerometer;
console.log('Acceleration X:', x);
console.log('Acceleration Y:', y);
console.log('Acceleration Z:', z);
});
accelerometer.start();10. API de sesión multimedia
La Media Session API permite que las aplicaciones web controlen la reproducción de medios, proporcionando una experiencia de control de medios uniforme e integrada en todas las plataformas y dispositivos. La API permite a los desarrolladores personalizar las notificaciones de medios, manejar las operaciones de reproducción de medios e integrarse con los controles de medios del sistema.
Para manejar las operaciones de reproducción de medios, podemos configurar detectores de eventos para varios eventos relacionados con los medios:
navigator.mediaSession.setActionHandler('play', function() {
// Handle play action
});
navigator.mediaSession.setActionHandler('pause', function() {
// Handle pause action
});
// Add more event listeners for other media actions11. API de vibración
Vibration API Permite que las páginas web controlen la funcionalidad de vibración del dispositivo, lo que brinda la oportunidad de crear comentarios hápticos o simular efectos en los juegos.
Usar la API de vibración es muy simple. Podemos llamar vibrate() al método y especificar la duración de la vibración en milisegundos:
navigator.vibrate(3000); // Vibrate for three seconds12. API de orientación del dispositivo
La API de orientación del dispositivo proporciona información sobre la orientación física y el movimiento de un dispositivo. Esta API es especialmente útil para aplicaciones como la navegación o los juegos que dependen de la orientación del dispositivo. Aunque la API es compatible en diversos grados con diferentes navegadores, proporciona una funcionalidad valiosa para las aplicaciones web móviles.
Si desea detectar cambios de orientación del dispositivo, puede deviceorientation agregar un detector de eventos al evento:
window.addEventListener('deviceorientation', function(event) {
console.log('Device orientation:', event.alpha, event.beta, event.gamma);
});Resumir
En este artículo, exploramos 12 API de JavaScript que pueden mejorar sus páginas web móviles y brindar una mejor experiencia de usuario.
Sin embargo, es importante recordar que la compatibilidad del navegador con estas API puede variar y que no todos los dispositivos o navegadores tienen el mismo nivel de compatibilidad. Por lo tanto, es importante realizar la detección de funciones y manejar los casos en los que la API no es compatible. Esto garantiza que los usuarios obtengan una experiencia uniforme en todas las plataformas.