關鍵要點

• 電池狀態(tài) API: 提供設備電池電量或狀態(tài)信息，有助于在電量低時更頻繁地保存更改，防止數(shù)據(jù)丟失。
• Web 通知 API: 規(guī)范化開發(fā)者通知用戶的方式，允許在網(wǎng)頁上下文之外發(fā)出警報（例如電子郵件送達）。但不同瀏覽器的顯示樣式可能有所不同。
• 接近傳感器 API: 檢測物體與運行網(wǎng)頁的設備之間的距離，目前僅 Firefox 支持。
• 振動 API: 允許設備振動，在游戲中可用于模擬特定效果。而設備方向 API則檢測設備方向，有利于導航應用和游戲。

“移動市場正在增長”和“通過移動設備（智能手機和平板電腦等）訪問網(wǎng)絡的用戶將超過通過臺式機或筆記本電腦訪問網(wǎng)絡的用戶”這類說法已經(jīng)不再令人印象深刻。

如今，我們（至少應該）都意識到，在為網(wǎng)絡開發(fā)任何內(nèi)容時，移動市場都至關重要。

多年來，關于原生應用與 Web 應用的討論和觀點差異很大，究竟哪個更好一直存在爭議。無論您的觀點如何，原生移動應用程序過去能夠訪問網(wǎng)頁無法訪問的硬件組件，這都是事實。但這種差距今天仍然有效嗎？Web 技術是否已經(jīng)發(fā)展到足以讓我們作為開發(fā)者僅使用 HTML、CSS 和 JavaScript 進行編碼的程度？

在本文中，我將介紹一些 JavaScript API，它們允許您的網(wǎng)頁訪問移動設備的硬件組件，或增強您在移動設備上的 Web 應用程序的功能。

電池狀態(tài) API

電池狀態(tài) API 提供有關系統(tǒng)電池電量或狀態(tài)的信息。借助此 API，您可以知道電池是否正在充電、電池完全放電前還有多長時間，或者只是其當前電量。這些詳細信息可以通過屬于 window.navigator.battery 對象的四個屬性訪問。此 API 還定義了當上述屬性發(fā)生更改時可以觸發(fā)的事件。

此 API 在以下情況下非常有用：例如，您（或您的用戶）在公共汽車上努力使用 Web 應用程序處理文檔，并且忘記保存所做的更改。突然，您的智能手機關機了，您會因為浪費了大量時間和所有工作而感到沮喪。借助此 API，我們可以開發(fā)能夠檢測當前電池電量并更頻繁地保存更改的頁面，以防止在電池電量低或不足時發(fā)生數(shù)據(jù)丟失。

在撰寫本文時，電池狀態(tài) API 僅受 Firefox 支持，但檢測對該 API 的支持非常容易，如下所示：

if (window.navigator && window.navigator.battery) {
   // API 受支持
} else {
   // 不受支持
}

使用此 API 的一個簡單示例如下：

if (window.navigator && window.navigator.battery) {
   // API 受支持
} else {
   // 不受支持
}

如果您想嘗試使用此 API，我們?yōu)槟鷾蕚淞艘粋€演示。如果您想進一步研究，我們已在此處在 SitePoint 上介紹了電池狀態(tài) API。

Web 通知 API

在移動設備上，我們熟悉通知的概念，許多已安裝在設備上的應用程序都實現(xiàn)了通知。在 Web 上，網(wǎng)站以不同的方式實現(xiàn)它們。想想 Google 和 Twitter，它們都有通知機制，但實現(xiàn)方式不同。

Web 通知 API 是為此目的而創(chuàng)建的 API，用于規(guī)范化開發(fā)者通知用戶的方式。通知允許在網(wǎng)頁上下文中之外提醒用戶某個事件，例如電子郵件送達。雖然開發(fā)者創(chuàng)建通知的方式相同，但規(guī)范并未描述 UI 應該如何以及在何處顯示它們。這意味著我們將在不同的瀏覽器上看到不同的樣式。例如，在移動設備上，我們可能會在通知欄中看到它們。

Web 通知 API 通過 window 對象的 Notification 屬性公開。它是一個構(gòu)造函數(shù)，允許我們創(chuàng)建通知實例。要創(chuàng)建新的通知，我們可以編寫如下代碼：

// 打印電池是否正在充電
console.log("電池" + (navigator.battery.charging ? "" : "未") + "充電");

目前，Chrome、Firefox 和 Safari 支持此 API。支持 Web 通知 API 的移動瀏覽器包括 Firefox、Android 4.4 和 Blackberry。您看到什么奇怪的地方了嗎？Chrome 移動版不支持此 API！令人難過但卻是事實。

由于支持此 API 的瀏覽器覆蓋了超過一半的市場，但為了確保我們的 JavaScript 代碼不會嘗試調(diào)用不受支持的方法，我們必須測試支持情況。我們可以使用以下代碼片段來做到這一點：

var notification = new Notification('收到電子郵件', {
  body: '您收到了一封電子郵件。立即閱讀！'
});

對這個 API 感到興奮嗎？太好了！您可以在文章“Web 通知 API 入門”中了解更多信息，還可以試用實時演示。

接近傳感器 API

接近傳感器 API 是一個 JavaScript API，我們可以使用它來檢測物體與運行網(wǎng)頁的設備之間的距離。距離由接近傳感器測量（如果您的設備有接近傳感器）。接近傳感器 API 不提供屬性或方法，只在 window 對象上觸發(fā)兩個事件。我們可以監(jiān)聽它們來執(zhí)行操作。第一個事件 deviceproximity 提供有關設備與附近物體之間實際距離的信息，而第二個事件 userproximity 僅指定附近是否有物體。

唯一支持此 API 的瀏覽器是 Firefox（桌面版和移動版），從 15 版開始。不幸的是，由于許多筆記本電腦和臺式機沒有接近傳感器，因此我們主要針對移動設備。

檢測對該 API 的支持：

if ('Notification' in window) {
  // API 受支持
} else {
  // 不受支持
}

一個簡單的使用示例如下所示：

if ('ondeviceproximity' in window) {
   // API 受支持
} else {
   // 不受支持
}

如果您想了解有關接近傳感器 API 的更多信息，我寫了一篇文章，標題為“接近傳感器 API 入門”。如果您想實際操作，可以使用此演示。

振動 API

振動 API 是一個非常簡單的 API，它包含一個方法，使我們能夠使設備振動。一個顯而易見的使用是在游戲中，我們可以重現(xiàn)十年前一些游戲機引入的效果。然而，這并不是此 API 的唯一可能用途。

正如我提到的，振動 API 只公開了一種名為 vibrate() 的方法。后者屬于 window.navigator 對象，在其最簡單的形式下接受一個整數(shù)，該整數(shù)指定設備應振動的毫秒數(shù)。

除了 Internet Explorer 和 Safari 之外，所有主要瀏覽器都支持此 API。盡管如此，現(xiàn)在可能是將其用于下一個項目的好時機。事實上，如果它受支持，您將為用戶提供更好的體驗（除非您濫用此功能）。檢測支持非常容易，如下所示：

if (window.navigator && window.navigator.battery) {
   // API 受支持
} else {
   // 不受支持
}

API 的一個非常簡單的用法如下：

// 打印電池是否正在充電
console.log("電池" + (navigator.battery.charging ? "" : "未") + "充電");

要了解有關此 API 的更多信息，請閱讀文章“如何使用 HTML5 振動 API”，并且不要忘記試用演示。

設備方向 API

我想討論的最后一個 API 是設備方向 API。檢測設備的方向?qū)τ诟鞣N情況都很有用，從導航應用程序到游戲。此 API 定義了幾個事件，這些事件提供有關設備的物理方向和運動的信息。此 API 是 W3C 工作草案，這意味著規(guī)范不穩(wěn)定，我們可能會預期將來會發(fā)生一些變化。

該 API 公開了以下三個事件：deviceorientation、devicemotion 和 compassneedscalibration。當加速度計檢測到設備方向發(fā)生變化時，會觸發(fā)第一個事件。每次設備加速或減速時，都會觸發(fā)第二個事件。當用戶代理確定指南針需要校準時，會觸發(fā)最后一個事件。

幾乎所有主要瀏覽器（除了 Safari）都支持此 API，但支持是部分的或存在不一致之處。例如，在撰寫本文時，很少有瀏覽器支持 compassneedscalibration 事件。因此，我的建議是測試每個事件以了解它是否受支持。要測試 deviceorientation 事件的存在，您可以編寫：

var notification = new Notification('收到電子郵件', {
  body: '您收到了一封電子郵件。立即閱讀！'
});

或者：

if ('Notification' in window) {
  // API 受支持
} else {
  // 不受支持
}

例如，如果您想測試 devicemotion 事件，您可以編寫：

if ('ondeviceproximity' in window) {
   // API 受支持
} else {
   // 不受支持
}

如果您想使用此 API，我們有一個您可以使用的演示。如果您想學習它，我們有文章“在 HTML5 中使用設備方向”。

結(jié)論

在本文中，我向您展示了一些可以增強移動訪客網(wǎng)頁的 API。

這些 API 的用例是無限的，這一切都取決于您的想象力和您正在開發(fā)的應用程序或網(wǎng)站的類型。我希望您喜歡這篇文章，請告訴我您認為可能還有哪些有用的 API。

關于移動網(wǎng)頁 JavaScript API 的常見問題

什么是 JavaScript API，它們?nèi)绾卧鰪娨苿泳W(wǎng)頁？

JavaScript API（應用程序編程接口）是一組規(guī)則和協(xié)議，允許不同的軟件應用程序相互通信。它們通過使移動網(wǎng)頁能夠與設備硬件和其他軟件應用程序交互來增強移動網(wǎng)頁，從而增強其功能和用戶體驗。例如，JavaScript API 可以允許網(wǎng)頁訪問設備的攝像頭、地理位置甚至電池狀態(tài)。這為開發(fā)人員創(chuàng)造了更多互動性、參與性和用戶友好的移動網(wǎng)頁的可能性。

如何在我的移動網(wǎng)頁中使用地理位置 API？

地理位置 API 是一個強大的工具，允許您訪問設備的地理位置。要使用它，您首先需要檢查用戶的瀏覽器是否支持它。這可以使用 navigator.geolocation 屬性來完成。如果它返回 true，那么您可以使用 getCurrentPosition() 方法來獲取用戶的當前位置。請記住，在訪問用戶的位置數(shù)據(jù)之前，始終要征得用戶的許可。

什么是電池狀態(tài) API，如何使用它？

電池狀態(tài) API 提供有關主機設備電池狀態(tài)的信息。這對于根據(jù)設備的電池電量優(yōu)化網(wǎng)頁的性能非常有用。例如，當電池電量低時，您可以降低更新頻率或禁用某些功能以節(jié)省電量。要使用此 API，您可以使用 navigator.getBattery() 方法，該方法返回一個 promise，該 promise 解析為 BatteryManager 對象。

如何在我的移動網(wǎng)頁中使用振動 API？

振動 API 允許您控制主機設備的振動機制。這對于向用戶提供觸覺反饋非常有用。要使用此 API，您可以使用 navigator.vibrate() 方法。您可以傳遞單個值以振動特定時間，或者傳遞一系列值以創(chuàng)建振動和暫停模式。

什么是環(huán)境光傳感器 API，如何使用它？

環(huán)境光傳感器 API 提供有關設備環(huán)境環(huán)境光照水平的信息。這對于調(diào)整網(wǎng)頁的亮度或?qū)Ρ榷纫栽诓煌墓庹諚l件下提高可讀性非常有用。要使用此 API，您需要創(chuàng)建一個新的 AmbientLightSensor 對象實例，然后使用 start() 方法開始感測光照水平。

如何在我的移動網(wǎng)頁中使用網(wǎng)絡信息 API？

網(wǎng)絡信息 API 提供有關設備網(wǎng)絡連接的信息。這對于根據(jù)網(wǎng)絡狀況優(yōu)化網(wǎng)頁的性能非常有用。例如，當網(wǎng)絡連接緩慢時，您可以降低圖像或視頻的質(zhì)量以確保平滑加載。要使用此 API，您可以使用 navigator.connection 屬性，該屬性返回 NetworkInformation 對象。

什么是設備方向 API，如何使用它？

設備方向 API 提供有關設備物理方向的信息。這對于創(chuàng)建對設備移動做出響應的交互式體驗非常有用。要使用此 API，您可以為 deviceorientation 事件添加事件偵聽器，該事件在設備方向發(fā)生變化時觸發(fā)。

如何在我的移動網(wǎng)頁中使用頁面可見性 API？

頁面可見性 API 允許您檢測網(wǎng)頁何時可見或隱藏。這對于根據(jù)頁面的可見性暫?；蚧謴突顒臃浅Ｓ杏谩＠?，當用戶切換到另一個選項卡時，您可以暫停視頻，并在他們返回時恢復視頻。要使用此 API，您可以使用 document.visibilityState 屬性和 visibilitychange 事件。

什么是全屏 API，如何使用它？

全屏 API 允許您以全屏模式顯示元素。這對于為視頻或游戲等提供更沉浸式的體驗非常有用。要使用此 API，您可以對任何元素使用 requestFullscreen() 方法以使其全屏顯示。

如何在我的移動網(wǎng)頁中使用 Web 通知 API？

Web 通知 API 允許您向用戶顯示通知。這對于提醒用戶重要事件非常有用，即使您的網(wǎng)頁沒有焦點也是如此。要使用此 API，您首先需要使用 Notification.requestPermission() 方法請求用戶的許可。如果用戶授予許可，那么您可以創(chuàng)建一個新的 Notification 對象來顯示通知。

以上是5 JavaScript API授權您的移動網(wǎng)頁的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！