JavaScript fun and useful API sharing

This article will share with you some fun and practical js api

Battery Status API

online example: Battery Status API demo

The Battery API provides information about the charging level of the system and provides events that remind users of changes in battery level or charging status. This can adjust the resource usage status of the application when the battery is low, or save the changes in the application before the battery runs out to prevent data loss.

Battery Status API extends a navigator.getBattery method to window.navigator , which returns a battery promise , passes a BatteryManager object after completion, and provides some new events that can manipulate the battery status.

In this example, we monitor the discharge status and battery level and remaining events at the same time (regardless of whether the battery is being charged or in use). This can be done by monitoring the chargingchange , levelchange , chargingtimechange , dischargingtimechange events.

navigator.getBattery().then(function(battery) {

  console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));
  console.log("Battery level: " + battery.level * 100 + "%");
  console.log("Battery charging time: " + battery.chargingTime + " seconds");
  console.log("Battery discharging time: " + battery.dischargingTime + " seconds");

  battery.addEventListener('chargingchange', function() {
    console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));
  });

  battery.addEventListener('levelchange', function() {
    console.log("Battery level: " + battery.level * 100 + "%");
  });

  battery.addEventListener('chargingtimechange', function() {
    console.log("Battery charging time: " + battery.chargingTime + " seconds");
  });

  battery.addEventListener('dischargingtimechange', function() {
    console.log("Battery discharging time: " + battery.dischargingTime + " seconds");
  });

});

test:

The test found that the charging and discharging time has always been Infinity , and the battery level and whether it is charged can still be read correctly
Compatibility

Broadcast Channel API

The Broadcast Channel API can realize simple communication between browser contexts (usually different pages under the same website) under different browser windows, Tab pages, frames or iframes under the same origin.

The broadcast channel will be named and bound to the specified source.

By creating a BroadcastChannel object that listens to a channel, you can receive all messages sent to that channel. An interesting point is that you no longer need to maintain the index of the iframe or worker that needs to communicate. They can simply "subscribe" to a specific channel by constructing a BroadcastChannel, and perform full-duplex (two-way) communication between them.

Create or join a channel

The BroadcastChannel interface is very simple. By creating a BroadcastChannel object, a client joins a specified channel. You only need to pass in one parameter to the constructor: the channel name. If this is the first connection to the broadcast channel, the corresponding resource will be created automatically.

// 连接到广播频道
var bc = new BroadcastChannel('test_channel');

send messages

Sending a message is very simple now, just call the postMessage() method on the BroadcastChannel object. The parameter of this method can be any object. The simplest example is to send a DOMString text message:

// 发送简单消息的示例
bc.postMessage('This is a test message.');

Not only DOMString, but any type of object can be sent. This API does not associate messages with any semantics, so it is necessary for channel participants to know the expected message types and message consumption methods.

Receive message

When the message is sent, all BroadcastChannel objects connected to the channel will trigger the message event. This event has no default behavior, but you can use the onmessage event handler to define a function to handle the message.

// 简单示例，用于将事件打印到控制台
bc.onmessage = function (ev) { console.log(ev); }

Disconnect from channel

You can leave the channel by calling the close() method of the BroadcastChannel object. This will disconnect the object from its associated channel and allow it to be garbage collected.

// 断开频道连接
bc.close()

online example:
Send message demo
Receive message demo

Compatibility