Web API: Now everything will be easy!

Today I will discuss with you an interesting topic. That is Web API.

Our application runs inside a browser, so we can't access the operating system with a web application at will. But this matter is made easier for us day by day by the feature called Web API. And today the discussion is about this topic. Nerd Coder is with you.

API stands for Application Programming Interface. And Web API is the feature with which we can utilize various features of web browser inside our application. For example, I can know the battery status of the laptop. Although we can't get battery information directly. But Web API makes it possible for us. As we know we can't access OS directly with web application. But the browser can access it. Because the browser is a native application. And the web application runs inside this browser. So our web application can only access the browser.

Basically web API is some feature provided by browser. Through which many important tasks can be edited by calling some methods directly from the web app. Sometimes it is also possible to get hardware and operating system data through API.

I talked a lot about Web API. Now let's look at some examples through which we can interact with the browser or operating system.

1. Document Object Model (DOM)

Dom comes first. DOM is not a feature of JavaScript language but rather it is a browser feature or API. With this we can see everything in the browser.

We use appendChild directly when we want to display something in the DOM. Call createElement to create something. If you want to select a node, you can use getElementBy{classname|Id|tagName|) or querySelector.

2. Fetch API.

One of our most popular APIs. Through this we can send request from browser to any survey. Many people think that Fetch is a language feature. But no it is an API provided by the browser.

Suppose a post is created on my web page and I need to send it to the server. Which feature to send through? That's Fetch. Through this we can communicate with the server through RESTful API.

Fetch is an asynchronous API. It returns a promise. We can handle that with then catch. eg fetch(”https://example.com/posts”).then(res ? res.json()).catch(err ? console.log(e))

3. Canvas API

With the Canvas API we can draw anything in the browser. It provides raster. We can create a photoshop through the browser if we want. For this we need canvas manipulation.

4. Web Socket API

WebSockets is another interesting feature rich API. Full duplex realtime channel opening is possible with this. Basically chatapps make chatting features using this technology. Through this, the client and server exchange data in real time.

5. WebRTC API

Web RTC(web real time communication) API is another interesting topic. With this API we can create video chatting applications. It creates a peer to peer connection. That is, browser to browser connection is created. That is, do not communicate through any server. So realtime can send large amount of data in fast time.

WebRTC manages communication sessions through a signaling mechanism. Since the server has no role to play here, it transmits data differently. There is nothing to worry about its security as it has security features like encryption.

6.Notification API

The Notifications API provides browser notifications to us from the background. Basically, this technology provides information in the context outside of the web page.

If we want to send any notification then we have to follow some steps to send notification. requestPermission() first has to check the permission whether the user is interested in receiving notifications or not. Can send him notification if interested. Otherwise it is not possible.

7. Web Storage API

We can use browser as data store with this API. This is an interesting topic. Through this we can save the data in value pairs. Web Storage API provides basically two types of storage.

LockerStorage:

Here we always save data and access data if we want

SessionStorage:

You can save the data of a particura session which is automatically removed when the session ends.

8. Web Animations API

The Web Animation API is designed to create and perform the types of animations we see on web sites. For this we can create animations with CSS, JS, SVG.

Now I will discuss about the most interesting Navigator api.

With navigator api we can access hardware related data. Navigator is a great concept. Where a JS Object provides many things. Let's discuss some important properties.

9. getBattery API

Through navigator we can get battery information. How much power does the battery currently have? Charging is happening or not happening. We can get information about how long it takes to fully charge, etc. with getButtery.

10. geoLocation API

You can know where you are now or where the user is browsing your website with this Geolocation API.

11. navigator.connection

With this API we can know the user ID