7.1 Geolocation API
Web APIs (Web 应用程序接口) 提供了强大的功能，使网页应用可以与浏览器和用户设备进行交互。来看看其中的一些 API，包括 Geolocation 和 Notifications，以及如何使用它们。
Geolocation API 允许网页应用获取用户设备的地理位置。这个功能对于地图、导航和地理定位等各种应用都很有用。
请求访问位置权限
要使用 Geolocation API，网页应用必须向用户请求访问其位置的权限。这可以通过方法 navigator.geolocation.getCurrentPosition() 来实现。
Geolocation API 使用示例：
JavaScript
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
},
(error) => {
console.error('获取地理位置出错:', error);
},
{
enableHighAccuracy: true, // 高精度
timeout: 5000, // 响应超时时间 (毫秒)
maximumAge: 0 // 可以使用缓存数据的最大时间 (毫秒)
}
);
} else {
console.log('此浏览器不支持地理位置功能');
}
位置跟踪
方法 navigator.geolocation.watchPosition() 允许跟踪用户位置的变化。
位置跟踪示例：
JavaScript
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);
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);
}
// 停止位置跟踪
function stopTracking() {
if (watchId) {
navigator.geolocation.clearWatch(watchId);
}
}
7.2 Notifications API
Notifications API 允许网页应用在用户系统显示通知。即使浏览器窗口不可见，这也能有效引起用户注意。
请求发送通知的权限
要使用 Notifications API，网页应用必须 请求用户授权 发送通知。
请求权限示例：
JavaScript
if ('Notification' in window) {
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
console.log('通知权限已授予');
} else {
console.log('通知权限被拒绝');
}
});
} else {
console.log('此浏览器不支持通知功能');
}
发送通知
获得权限后，可以使用构造函数 Notification 发送通知
发送通知示例：
JavaScript
if (Notification.permission === 'granted') {
const options = {
body: '这是通知的内容',
icon: 'icon.png',
data: { url: 'https://example.com' }
};
const notification = new Notification('你好，世界！', options);
// 点击通知的处理
notification.onclick = (event) => {
event.preventDefault(); // 阻止默认跳转
window.open(notification.data.url, '_blank');
};
}
7.3 其他有用的 Web API
1. DeviceOrientation API
DeviceOrientation API 允许获取设备在空间中的位置数据。
DeviceOrientation API 示例：
JavaScript
window.addEventListener('deviceorientation', (event) => {
console.log(`Alpha: ${event.alpha}, Beta: ${event.beta}, Gamma: ${event.gamma}`);
});
2. Battery Status API
Battery Status API 提供有关设备电池状态的信息。
Battery Status API 示例：
JavaScript
navigator.getBattery().then((battery) => {
console.log(`Battery level: ${battery.level * 100}%`);
console.log(`Battery charging: ${battery.charging}`);
battery.addEventListener('levelchange', () => {
console.log(`Battery level changed: ${battery.level * 100}%`);
});
battery.addEventListener('chargingchange', () => {
console.log(`Battery charging state changed: ${battery.charging}`);
});
});
3. Fullscreen API
Fullscreen API 允许将网页切换到全屏模式。
Fullscreen API 示例：
JavaScript
const element = document.documentElement; // 整个文档
function toggleFullScreen() {
if (!document.fullscreenElement) {
element.requestFullscreen().catch((err) => {
console.error(`启用全屏模式时出错: ${err.message}`);
});
} else {
document.exitFullscreen();
}
}
document.getElementById('fullscreenButton').addEventListener('click', toggleFullScreen);
GO TO FULL VERSION