7.1 Geolocation API
Web APIs (Web Application Programming Interfaces) proporcionan capacidades serias para la interacción de las aplicaciones web con la funcionalidad del navegador y el dispositivo del usuario. Vamos a revisar algunos de estos API, incluyendo Geolocation y Notifications, así como su uso.
El Geolocation API permite a una aplicación web obtener la ubicación geográfica del dispositivo del usuario. Esto puede ser útil para varias aplicaciones, como mapas, navegación y geotargeting.
Solicitar permiso para acceder a la ubicación
Para usar el Geolocation API, la aplicación web debe solicitar permiso al usuario para acceder a su
ubicación. Esto se hace usando el método navigator.geolocation.getCurrentPosition().
Ejemplo de uso de Geolocation API:
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
},
(error) => {
console.error('Error obteniendo la geolocalización:', error);
},
{
enableHighAccuracy: true, // Alta precisión
timeout: 5000, // Tiempo de espera de respuesta (ms)
maximumAge: 0 // Tiempo máximo que se pueden usar los datos en caché (ms)
}
);
} else {
console.log('Geolocation no es compatible con este navegador.');
}
Seguimiento de la ubicación
El método navigator.geolocation.watchPosition() permite seguir los cambios en la ubicación del usuario.
Ejemplo de seguimiento de la ubicación:
let watchId;
if ('geolocation' in navigator) {
watchId = navigator.geolocation.watchPosition(
(position) => {
const { latitude, longitude } = position.coords;
console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
},
(error) => {
console.error('Error obteniendo la geolocalización:', error);
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);
}
// Detener el seguimiento de la ubicación
function stopTracking() {
if (watchId) {
navigator.geolocation.clearWatch(watchId);
}
}
7.2 Notifications API
Notifications API permite a una aplicación web mostrar notificaciones en el sistema del usuario. Esto es útil para captar la atención del usuario hacia eventos importantes, incluso si la pestaña del navegador no está activa.
Solicitar permiso para enviar notificaciones
Para usar el Notifications API, la aplicación web debe solicitar permiso al usuario para enviar notificaciones.
Ejemplo de solicitud de permiso:
if ('Notification' in window) {
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
console.log('Permiso de notificación concedido.');
} else {
console.log('Permiso de notificación denegado.');
}
});
} else {
console.log('Las notificaciones no son compatibles con este navegador.');
}
Enviando notificaciones
Una vez obtenido el permiso, se pueden enviar notificaciones usando el constructor Notification
Ejemplo de envío de notificación:
if (Notification.permission === 'granted') {
const options = {
body: 'Este es el cuerpo de una notificación',
icon: 'icon.png',
data: { url: 'https://example.com' }
};
const notification = new Notification('¡Hola, mundo!', options);
// Manejar el clic en la notificación
notification.onclick = (event) => {
event.preventDefault(); // Previene la acción de redirección por defecto
window.open(notification.data.url, '_blank');
};
}
7.3 Otros Web API útiles
1. DeviceOrientation API
DeviceOrientation API permite obtener datos sobre la orientación del dispositivo en el espacio.
Ejemplo de uso de DeviceOrientation API:
window.addEventListener('deviceorientation', (event) => {
console.log(`Alpha: ${event.alpha}, Beta: ${event.beta}, Gamma: ${event.gamma}`);
});
2. Battery Status API
Battery Status API proporciona información sobre el estado de la batería del dispositivo.
Ejemplo de uso de Battery Status API:
navigator.getBattery().then((battery) => {
console.log(`Nivel de batería: ${battery.level * 100}%`);
console.log(`Cargando batería: ${battery.charging}`);
battery.addEventListener('levelchange', () => {
console.log(`Nivel de batería cambiado: ${battery.level * 100}%`);
});
battery.addEventListener('chargingchange', () => {
console.log(`Estado de carga de la batería cambiado: ${battery.charging}`);
});
});
3. Fullscreen API
Fullscreen API permite cambiar una página web a modo pantalla completa.
Ejemplo de uso de Fullscreen API:
const element = document.documentElement; // Todo el documento
function toggleFullScreen() {
if (!document.fullscreenElement) {
element.requestFullscreen().catch((err) => {
console.error(`Error al intentar activar el modo de pantalla completa: ${err.message}`);
});
} else {
document.exitFullscreen();
}
}
document.getElementById('fullscreenButton').addEventListener('click', toggleFullScreen);
GO TO FULL VERSION