5 JavaScript API授權您的移動網頁

關鍵要點

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

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

如今，我們（至少應該）都意識到，在為網絡開發任何內容時，移動市場都至關重要。

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

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

電池狀態 API

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

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

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

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

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

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

如果您想嘗試使用此 API，我們為您準備了一個演示。如果您想進一步研究，我們已在此處在 SitePoint 上介紹了電池狀態 API。

Web 通知 API

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

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

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

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

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

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

var notification = new Notification('收到电子邮件', {
  body: '您收到了一封电子邮件。立即阅读！'
});

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

接近傳感器 API

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

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

檢測對該 API 的支持：

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

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

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

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

振動 API

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

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

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

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

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

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

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

設備方向 API

我想討論的最後一個 API 是設備方向 API。檢測設備的方向對於各種情況都很有用，從導航應用程序到遊戲。此 API 定義了幾個事件，這些事件提供有關設備的物理方向和運動的信息。此 API 是 W3C 工作草案，這意味著規範不穩定，我們可能會預期將來會發生一些變化。

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

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

var notification = new Notification('收到电子邮件', {
  body: '您收到了一封电子邮件。立即阅读！'
});

或者：

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

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

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

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

結論

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

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

關於移動網頁 JavaScript API 的常見問題

什麼是 JavaScript API，它們如何增強移動網頁？

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

如何在我的移動網頁中使用地理位置 API？

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

什麼是電池狀態 API，如何使用它？

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

如何在我的移動網頁中使用振動 API？

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

什麼是環境光傳感器 API，如何使用它？

環境光傳感器 API 提供有關設備環境環境光照水平的信息。這對於調整網頁的亮度或對比度以在不同的光照條件下提高可讀性非常有用。要使用此 API，您需要創建一個新的 AmbientLightSensor 對象實例，然後使用 start() 方法開始感測光照水平。

如何在我的移動網頁中使用網絡信息 API？

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

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

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

如何在我的移動網頁中使用頁面可見性 API？

頁面可見性 API 允許您檢測網頁何時可見或隱藏。這對於根據頁面的可見性暫停或恢復活動非常有用。例如，當用戶切換到另一個選項卡時，您可以暫停視頻，並在他們返回時恢復視頻。要使用此 API，您可以使用 document.visibilityState 屬性和 visibilitychange 事件。

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

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

如何在我的移動網頁中使用 Web 通知 API？

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

以上是5 JavaScript API授權您的移動網頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！