Three new JavaScript APIs you might want to use

If you are a regular reader of SitePoint and a fan of mine, then you already know that I write a lot about HTML5 and JS API. So far, I've posted a few introductions to the API that you can use right now, albeit probably with a polyfill. (Annotation: If you don’t know what polyfill please click here.)

But today I may want to break this routine and introduce to you some API that are still in their early stages. Everyone must know that these API are very new, and two of these three were just released a few days ago. Because of this, these API are currently unavailable. But if you are interested in knowing what they are used for specifically, you can continue to read the detailed introduction about them below, and you are also welcome to leave your opinions and responses.

No more nonsense, let’s get started now!

Web Alarms API

Web Alarms API allows you to configure your device’s alarm settings, allowing you to schedule notification messages or have a specific app launch at a specified time. The most typical usage of this API would involve programs like alarm clocks, calendars, or any other program that needs to perform a specific operation at a specific time.

Since last year, this API has just become a W3C design draft. So all the details surrounding what will become an official W3C recommendation are still in the early stages. This API needs to be used through the alarms attribute under the window.navigator object. The alarms attribute will provide three functions:

getAll(): Get all existing alarms from the device and return them in the form of an array containing Alarm objects.

add(): Register an alarm based on a Date object and return an AlarmRequest object.

remove(): Remove a previously registered alarm by unique ID (uniqueness is only for the app itself)

To demonstrate how these functions should ideally be used, Here is an example of adding an alarm (please remember that this code is currently not supported by any browser)

view sourceprint?

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);

};

If you want to know more about Web Alarms API, please refer to the relevant detailed documentation. The goal of

Presentation API

Presentation API is to enable secondary display devices such as projectors or TV to be used by Web, including all devices via wired (HDMI , DVIetc.) devices as well as via wireless (MiraCast, Chromecast, DLNA, AirPlayetc.). What this API does is to implement message exchange between the request page and the demo page on the second display device.

Please note that this APIdetail is not part of the W3C standard, nor is it part of the W3C standards project. This API needs to be used through the presentation attribute under the window.navigator object. This attribute provides a function called requestSession(), as well as two events present and availablechange. The requestSession() function can be used to start or resume the presentation on the secondary display device. It will return a session object referring to the current presentation. When the demo content in the url passed in through requestSession() is loaded, the page of the demo screen will receive the present event. Finally, the availablechange event will be emitted after the first demo appears or after the last demo is completed.

For example, from the detailed documentation, the usage of this API is as follows:

view sourceprint?

Show

<script></span></p> <p><span>var presentation = navigator.presentation,</span></p> <p><span>showButton = document.querySelector('button'); </span></p> <p><span>presentation.onavailablechange = function(e) {</span></p> <p><span>showButton.disabled = !e.available;</span></p> <p><span>showButton.onclick = show;</span></p> <p><span>}; </span></p> <p><span>function show() {</span></p> <p><span>var session = presentation.requestSession('http://example.org/'); </span></p> <p><span>session.onstatechange = function() {</span></p> <p><span>switch (session.state) {</span></p> <p><span>case 'connected':</span></p> <p><span>session.postMessage(/*...*/);</span></p> <p><span>session.onmessage = function() { /*...*/ };</span></p> <p><span>break;</span></p> <p><span>case 'disconnected':</span></p> <p><span>console.log('Disconnected.');</span></p> <p><span>break;</span></p> <p><span>}</span></p> <p><span>};</span></p> <p><span>}</span></p> <p><span></script>

如果你想要了解更多关于Presentation API的消息，可以看看最终报告。

Standby API

Standby API让你可以在顶层浏览器页面中请求屏幕持续显示锁。这可以防止设备进入省电状态（例如屏幕自动关闭）。这个功能对有些web应用来说至关重要。例如，想像一下你正在驾车并在手机上使用基于web的导航软件（非本地应用）。如果你不去触碰屏幕的话，你的手机的屏幕会自动关闭，除非你事前在手机上进行过相关的设置。在这样的情况下，通常你是想要让屏幕保持显示状态的。这恰恰是这个API适用的地方。

这个API需要通过window.navigator对象下的wakeLock属性来使用。它会提供两个函数：

request(): 使当前应用能让屏幕保持显示状态。

release(): 释放持续显示锁，这样屏幕就不会再被强制要求显示。

这两个函数都只接受一个参数，其只能是“screen”或“system”。前者表示操作针对的是设备屏幕，而后者针对的是除屏幕之外如CPU或广播之类的其他设备资源。

以下例子会演示如何适用该API让设备屏幕保持显示状态：

view sourceprint?

navigator.wakeLock.request("display").then(

function successFunction() {

// do something

},

function errorFunction() {

// do something else

}

);

要让设备允许屏幕关闭，我们可以用以下方法：

view sourceprint?

navigator.wakeLock.release("display");

如果你想要了解关于Standby API的更多信息，可以参考这个非官方草案。

总结

在这篇文章里我给大家介绍了一些崭新的JS API。我要再次强调因为它们都还处在非常早期的阶段，所以目前没有浏览器支持。因此我们也没法实际地操作它们。然而正因为它们如此之新大家现在都有机会跟进它们接下来的发展甚至参与帮助它们的细节设计的完善。

免费领取LAMP兄弟连原创PHP教程光盘/《细说PHP》精要版，详情咨询官网客服：http://www.lampbrother.net

PHPCMS二次开发http://yun.itxdl.cn/online/phpcms/index.php?u=5

微信开发http://yun.itxdl.cn/online/weixin/index.php?u=5

移动互联网服务器端开发http://yun.itxdl.cn/online/server/index.php?u=5

Javascript课程http://yun.itxdl.cn/online/js/index.php?u=5

CTO训练营http://yun.itxdl.cn/online/cto/index.php?u=5

The above introduces three new JavaScript APIs that you may want to use, including relevant content. I hope it will be helpful to friends who are interested in PHP tutorials.