7.1 Geolocation API
Web APIs (Web Application Programming Interfaces) 提供網站應用程式與使用者設備的瀏覽器功能互動的強大能力。讓我們來看看這些 API，包括 Geolocation 和 Notifications，以及它們的用法。
Geolocation API 讓網站應用程式能獲得使用者設備的地理位置。這對於地圖、導航和地理定位等各種應用程式來說都非常有用。
請求存取位置的許可
若要使用 Geolocation API，網站應用程式必須請求使用者同意存取他們的位置。這可透過方法 navigator.geolocation.getCurrentPosition() 來完成。
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 getting geolocation:', error);
},
{
enableHighAccuracy: true, // 高精度
timeout: 5000, // 等待響應的超時時間 (毫秒)
maximumAge: 0 // 可以使用緩存數據的最大時間 (毫秒)
}
);
} else {
console.log('Geolocation is not supported by this browser.');
}
位置追蹤
方法 navigator.geolocation.watchPosition() 允許追蹤使用者位置的變化。
位置追蹤範例：
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 getting geolocation:', error);
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);
}
// 停止位置追蹤
function stopTracking() {
if (watchId) {
navigator.geolocation.clearWatch(watchId);
}
}
7.2 Notifications API
Notifications API 允許網站應用程式在使用者系統中顯示通知。即使瀏覽器標籤不活躍，這也能吸引使用者注意重要事件。
請求發送通知的許可
若要使用 Notifications API，網站應用程式必須 請求使用者許可 發送通知。
請求許可範例：
if ('Notification' in window) {
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
console.log('Notification permission granted.');
} else {
console.log('Notification permission denied.');
}
});
} else {
console.log('Notifications are not supported by this browser.');
}
發送通知
得到許可後，可以使用 Notification 建構函數發送通知
發送通知範例：
if (Notification.permission === 'granted') {
const options = {
body: 'This is a notification body',
icon: 'icon.png',
data: { url: 'https://example.com' }
};
const notification = new Notification('Hello, world!', options);
// 處理點擊通知
notification.onclick = (event) => {
event.preventDefault(); // 防止預設行為
window.open(notification.data.url, '_blank');
};
}
7.3 其他有用的 Web API
1. DeviceOrientation API
DeviceOrientation API 可以獲得設備在空間中的方位資料。
DeviceOrientation API 使用範例：
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 使用範例：
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 使用範例：
const element = document.documentElement; // 整個文件
function toggleFullScreen() {
if (!document.fullscreenElement) {
element.requestFullscreen().catch((err) => {
console.error(`Error attempting to enable full-screen mode: ${err.message}`);
});
} else {
document.exitFullscreen();
}
}
document.getElementById('fullscreenButton').addEventListener('click', toggleFullScreen);
GO TO FULL VERSION