3 new JavaScript API that you should know

Translation of the article “3 New JavaScript APIs You May Want to Follow”, Aurelio De Rosa from the SitePoint portal.

If you are a regular SitePoint reader, and perhaps read my notes, then you know that I have written many articles on new HTML5 and JavaScript API. So far I have written API notes that you can use right now, including using polyfiles.

Today I decided to break this rule and describe several APIs to you at an early stage of development. These technologies are so fresh that 2 out of 3 were presented just a few days ago. Therefore, they can not yet be used. However, if you are wondering what they will do, you can read the specifications and write what you would like to improve on them.
')
Let us, without further ado, begin!

Web Alarms API

The Web Alarms API provides access to alert settings on a user's device, with which you can set up notifications or launch an application at a specific time. Typical examples of using this API are running alarms, calendars, or any other applications that perform certain actions at a specific time.

Since last year, this API has been at the W3C Working Draft outline. So for now, this technology is only a W3C Recommendation (W3C Recommendation). This API is available through the alarms property of the window.navigator object. The alarms object provides three methods:

• getAll() : returns a list of all notifications on this device as an array of Alarm objects.
• add() : registers a new notification on the specified date and returns an object of type AlarmRequest .
• remove() : removes a previously added notification by its unique identifier (unique within the application boundaries).

In order for you to see how to work with these methods, I added a small example that creates a notification (as of this writing, this code does not work in any modern browser):

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

Then, if you need to remove this notification, you can do this:

 var request = navigator.alarms.remove(alarmId); request.onsuccess = function (e) { alert("alarm removed"); }; request.onerror = function (e) { alert(e.target.error.name); }; 

You can read more about the Web Alarms API in its specification .

Presentation API

The purpose of the Presentation API is to provide your web applications with access to additional display devices, such as a projector or a connected TV. This API works with both wired (HDMI, DVI, etc.) and wireless (MiraCast, Chromecast, DLNA, AirPlay) technologies. All that makes this API, it allows you to exchange messages between the scripts on your page and on the page of the presentation on the additional display.

It is important to remember that these specifications are not a W3C standard and do not stand in line for standardization (W3C Standards Track). This API is available by the presentation property of the window.navigator object . This property provides the requestSession() method and two present and availablechange events. The requestSession() method is used to start and restore a presentation session on an additional screen. It returns the session object of the presentation. When the content at the url address passed to the requestSession() method is loaded, the page on the presentation screen receives a present event. Finally, when the first additional monitor is connected or the last additional monitor is disconnected, an availablechange event occurs.

An example of using this API taken from its specification:

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

If you want to learn more about the Presentation API, read its documentation .

Standby API

Standby API gives control over the transition of the device to sleep mode. This API allows you to prevent the device from entering power saving mode (including turning off the screen). This feature is key to some web applications. For example, you are driving a car using the web browser application installed on your smartphone. If you do not interact with your phone, and energy saving is set in the smartphone settings, then after a while the display of your smartphone will turn off. However, in such cases, you do not need the screen to turn off. It is then that this API is useful to us.

The standby API is accessible through the wakeLock object's window.navigator . This property provides two methods:

• request : causes the device not to turn off the screen.
• release : allows the device to turn off the screen on your own.

Both methods take only one argument, the string “screen” or “system”. The first option is used to indicate that you do not need to turn off the screen, the second in order to point to other devices, such as a processor or radio (but not the screen).

An example of how to make the system keep the screen on:

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

To allow the screen to turn off, we can write the following:

 navigator.wakeLock.release("display"); 

To learn more about this API, you can read informal documentation sketches .

Conclusion

In this post I told you about several new JavaScript APIs. Once again I want to emphasize that since they are at a very early stage of formation, not a single browser supports them yet. Therefore, we can not try them yet. However, since they are so fresh, you can still help in their development and even suggest your own edits to their specifications.

The future of web development is in your hands!