你或許想要用到的三個新的JavaScript API

jruif發表於2015-03-29
JavaScriptAPI

如果你是一個SitePoint的老讀者並且是我的粉絲的話，那麼你已經知道我寫了很多關於HTML5以及JS API的文章。到目前為止，我已經發布了一些介紹你現在就可以馬上使用的API，儘管可能會用到polyfill的方式。（譯註：不知道什麼是polyfill請點選這裡。）

但是今天我可能要打破這個常規來給大家介紹一些仍然還處在初期階段的API。大家必須知道這些API是非常新的，在這三個裡面有兩個都是在幾天之前剛剛釋出的。正因如此，這些API現目前都還無法使用。但是如果你有興趣瞭解它們具體是用來做什麼的，你可以繼續閱讀下面關於它們的詳細介紹，同時也歡迎留下你的看法和回應。

廢話不多說，現在開始！

Web Alarms API

Web Alarms API讓你可以配置裝置的鬧鈴設定，從而能夠安排通知訊息或讓某個特定的應用在指定的時間點啟動。這個API最典型的用法會涉及到像鬧鐘，日曆，或其他任何需要在特定時間進行特定操作的程式。

自從去年開始，這個API剛剛成為了一個W3C的設計草案。因此所有有待成為W3C官方推薦的相關細節都還在初期階段。這個API需要通過window.navigator物件下的alarms屬性來使用。alarms屬性會提供三個函式：

  • getAll(): 從裝置獲取全部已有的鬧鈴並以包含Alarm物件的陣列形式返回。
  • add(): 註冊一個基於Date物件的鬧鈴並返回一個AlarmRequest物件。
  • remove(): 通過唯一ID移除一個之前註冊的鬧鈴（唯一性僅針對應用本身）

為了向大家演示理想情況下這些函式應當如何使用，這裡有一個新增鬧鈴的例子（請記住現目前任何瀏覽器都不支援這段程式碼）

var alarmId;
var request = navigator.alarms.add(
    new Date("June 29, 2012 07:30:00"),
    "respectTimezone",
);

request.onsuccess = function (e) {
    alarmId = e.target.result;
};

request.onerror = function (e) {
    alert(e.target.error.name);
};

如果你想要了解更多關於Web Alarms API，請參閱相關細節文件。

Presentation API

Presentation API的目標就是讓投影儀或TV這樣的第二顯示裝置能夠被Web使用，包括所有通過有線（HDMI，DVI等）連線以及通過無線（MiraCast, Chromecast, DLNA, AirPlay等）的裝置。這個API所做的就是在請求頁面與第二顯示裝置上的演示頁面之間實現訊息互通。

請注意該API細節並不屬於W3C標準，也不在W3C標準計劃當中。這個API需要通過window.navigator物件下的presentation屬性來使用。該屬性提供了一個叫requestSession()函式，以及present和availablechange兩個事件。requestSession()函式可以用來啟動或恢復第二顯示裝置上的演示。它會返回一個session物件指代當前的演示。當通過requestSession()傳入的url裡面的演示內容被載入完成後，演示螢幕的頁面會收到present事件。最後，在第一張演示出現後或者最後一張演示完成後會發出availablechange事件。

舉個例子，來自細節文件，該API的用法如下所示：

<button disabled>Show</button>

<script>
var presentation = navigator.presentation,
    showButton = document.querySelector('button');

presentation.onavailablechange = function(e) {
  showButton.disabled = !e.available;
  showButton.onclick = show;
};

function show() {
  var session = presentation.requestSession('http://example.org/');

  session.onstatechange = function() {
    switch (session.state) {
      case 'connected':
        session.postMessage(/*...*/);
        session.onmessage = function() { /*...*/ };
        break;
      case 'disconnected':
        console.log('Disconnected.');
        break;
    }
  };
}
</script>

如果你想要了解更多關於Presentation API的訊息，可以看看最終報告。

Standby API

Standby API讓你可以在頂層瀏覽器頁面中請求螢幕持續顯示鎖。這可以防止裝置進入省電狀態（例如螢幕自動關閉）。這個功能對有些web應用來說至關重要。例如，想像一下你正在駕車並在手機上使用基於web的導航軟體（非本地應用）。如果你不去觸碰螢幕的話，你的手機的螢幕會自動關閉，除非你事前在手機上進行過相關的設定。在這樣的情況下，通常你是想要讓螢幕保持顯示狀態的。這恰恰是這個API適用的地方。

這個API需要通過window.navigator物件下的wakeLock屬性來使用。它會提供兩個函式：

  • request(): 使當前應用能讓螢幕保持顯示狀態。
  • release(): 釋放持續顯示鎖，這樣螢幕就不會再被強制要求顯示。
    這兩個函式都只接受一個引數，其只能是“screen”或“system”。前者表示操作針對的是裝置螢幕，而後者針對的是除螢幕之外如CPU或廣播之類的其他裝置資源。

以下例子會演示如何適用該API讓裝置螢幕保持顯示狀態：

navigator.wakeLock.request("display").then(
    function successFunction() {
        // do something
    },
    function errorFunction() {
        // do something else
    }
);

要讓裝置允許螢幕關閉，我們可以用以下方法：

navigator.wakeLock.release("display");

如果你想要了解關於Standby API的更多資訊，可以參考這個非官方草案。

總結

在這篇文章裡我給大家介紹了一些嶄新的JS API。我要再次強調因為它們都還處在非常早期的階段，所以目前沒有瀏覽器支援。因此我們也沒法實際地操作它們。然而正因為它們如此之新大家現在都有機會跟進它們接下來的發展甚至參與幫助它們的細節設計的完善。

Web開發的未來一片光明，加入進來吧！

相關文章