關(guān)鍵要點(diǎn)

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

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

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

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

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

電池狀態(tài) API

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

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

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

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

使用此 API 的一個(gè)簡單示例如下：

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

如果您想嘗試使用此 API，我們?yōu)槟鷾?zhǔn)備了一個(gè)演示。如果您想進(jìn)一步研究，我們已在此處在 SitePoint 上介紹了電池狀態(tài) API。

Web 通知 API

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

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

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

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

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

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

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

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

接近傳感器 API

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

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

檢測對該 API 的支持：

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

一個(gè)簡單的使用示例如下所示：

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

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

振動(dòng) API

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

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

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

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

API 的一個(gè)非常簡單的用法如下：

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

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

設(shè)備方向 API

我想討論的最後一個(gè) API 是設(shè)備方向 API。檢測設(shè)備的方向?qū)陡鞣N情況都很有用，從導(dǎo)航應(yīng)用程序到遊戲。此 API 定義了幾個(gè)事件，這些事件提供有關(guān)設(shè)備的物理方向和運(yùn)動(dòng)的信息。此 API 是 W3C 工作草案，這意味著規(guī)範(fàn)不穩(wěn)定，我們可能會(huì)預(yù)期將來會(huì)發(fā)生一些變化。

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

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

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

或者：

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

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

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

如果您想使用此 API，我們有一個(gè)您可以使用的演示。如果您想學(xué)習(xí)它，我們有文章“在 HTML5 中使用設(shè)備方向”。

結(jié)論

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

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

關(guān)於移動(dòng)網(wǎng)頁 JavaScript API 的常見問題

什麼是 JavaScript API，它們?nèi)绾卧鰪?qiáng)移動(dòng)網(wǎng)頁？

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

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

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

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

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

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

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

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

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

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

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

什麼是設(shè)備方向 API，如何使用它？

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

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

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

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

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

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

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

以上是5 JavaScript API授權(quán)您的移動(dòng)網(wǎng)頁的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！