6 Browser APIs You Need To Know As A Front End Developer

Browser APIs (or web APIs) are the APIs that come built-in with the browsers. They allow developers to perform complex operations without dealing with the sophisticated lower-level code. There are a number of browser APIs for manipulating the DOM, making network requests, managing client-side storage, and retrieving device media streams, etc. In the present, new web APIs are introduced and existing APIs are being deprecated in a frequent manner (eg: Battery API, WebVR API, etc), and there are also some APIs that have not been standardized yet. However, there still are some useful browser APIs that are widely used in the field of front end web development. This article presents you with several such browser APIs that you must know as a front-end developer. Having a good understanding of these will significantly level up your front end development skills regardless of what front end framework you are working with.

1. Fetch API

Fetch API is the first one on this list. It is used for performing network requests from the browser. Before Fetch API was introduced, there did were some browser-inbuilt network request mechanisms, but the problem was that none of them were standardized so that developers had to take all possible solutions into consideration when writing code to perform network requests. The aim of introducing Fetch API is to introduce a standard to perform network requests. The aim has been fulfilled since, in the present, all major browsers support the fetch API. Fetch API provides a generic definition of Request and Response so that it is universal .i.e. can be used in a wide variety of contexts such as service workers, cache API, etc. whenever network requests are needed to make. It also hides low-level details and provides more control over the network requests than the good old XMLHTTPRequest API. Using fetch API is really simple. What it needs are a mandatory endpoint URL and an optional [init](https://developer.mozilla.org/en-US/docs/Web/API/Request#Properties) object. The following JS snippet shows how to use fetch API to perform various types of HTTP network requests.

2. Canvas API

The Canvas API is used to draw graphics using JavaScript and HTML. It is widely used in fields such as photo manipulation, video processing, data visualization, and game development. ( A cool use of the canvas API that I experienced recently was putting freehand digital signatures on a user agreement web page. ) The fundamental element of the Canvas API is the canvas HTML element. Once you have a canvas element defined and obtained its context with the getContext() method, you can use the Canvas API to perform graphic operations on it. The following snippet shows how to use Canvas API to draw shapes. Docs on advanced features of the Canvas API and comprehensive in-depth tutorials can be found on official Canvas API docs. The Canvas API reference from W3Schools is also a good resource for anyone getting started.

3. Fullscreen API

Sometimes you want your user's attention completely on a specific element. You don’t want the user to be distracted by the browser address bar and the other website content and want him to be fully focused on one specific thing. A perfect example of this kind of scenario is inspecting a product in an e-commerce store. When the user is zooming in, zooming out, and rotating the product’s 3D models, you want your users' full attention to be on that product model itself. Going fullscreen with the product model is one of the best solutions to eliminate distractions, and what the Fullscreen API does is just that. The Fullscreen API is a web API that allows a specific DOM element to go fullscreen. Integrating it into your website is pretty easy and there are only two methods you should know.

• **Element.requestFullScreen()**- Asks the browser to place the specified DOM element and its all descendants (children) into full-screen mode while the rest of the browser UI is removing from the screen. Returns a Promise which resolves once the full-screen mode is fully activated.
• **document.exitFullScreen()** - Asks the browser to come back to the window mode. This method too returns a Promise which resolves once the full-screen mode is completely shut off.

4. Clipboard API

A common task that the developers often implement in web applications is copying/pasting to/from the clipboard on the click of an icon/button. For example, if your web app provides API keys, secret keys, etc, you may want them to copy those values conveniently at a tap of a button rather than letting them highlight the values and press CTRL+C or CMD+C. We can use clipboard API in such circumstances. Clipboard API is implemented as a property of the navigator interface of a browser. The following methods are provided by the clipboard API.

• **clipboard.write()** - writes an array of ClipboardItem objects to the clipboard
• **clipboard.writeText()** - writes a text string to the clipboard
• **clipboard.read()** - read the current clipboard content as an array of ClipboardItem objects
• **clipboard.readText()** - read the current clipboard content in text format Writing to the clipboard permission is automatically granted to a page when they are in the active tab. However, to read content from the clipboard, the user should explicitly grant clipboard-read permission.

5. Payment Request API

As various research points out, the majority of the online shopping-cart abandonments happen in the checkout stage since the checkout forms can be difficult and time-consuming to fill out and often require multiple steps to complete. Payment Request API was introduced to the browsers to standardize the checkout experience on the web and reduce the number of steps to make an online payment. It remembers frequently used payment information ( such as the card information, shipping address, etc ) and lets users make online payments in lesser time. Implementing the payments on your website using the payment request API has a number of advantages.

• When using the Payment Request API, you can let customers instantly access their saved payment information, which leads to faster checkout and reduced churn rate.
• Customers will experience the same payment form UX across different sites and be familiar with it. Your customers are no longer abandoning payments due to the fact that they couldn’t stand the custom payment form UX on your site.
• Developers have to write less code for integration. Once a PaymentRequest object is initialized, the API takes care of the rest. You can access the internal information required through the API methods provided. Note: Payment Request API only works in the HTTPS context. The payment request API exposes several methods as follows.
• [**PaymentRequest()**](https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest) - initializes a new PaymentRequest object. The subsequent methods are called on such created PaymentRequest object
• **canMakePayment()** - checks whether the PaymentRequest object is capable of making a payment before you start the payment process. It returns a promise that resolves with a boolean value indicating whether it is or not.
• [**show()**](https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest/show) - initiates the payment request and opens the payment form. This too returns a Promise that resolves with a [PaymentResponse](https://developer.mozilla.org/en-US/docs/Web/API/PaymentResponse) object.
• [**abort()**](https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest/abort) - cancels the current payment flow and closes the payment form
• [**retry()**](https://developer.mozilla.org/en-US/docs/Web/API/PaymentResponse/retry) - retry a failed payment The following snippet contains everything you need to know to implement Payment Request API on your website. You can visit a live demo here. In the payment form appearing, submit some sample card information and look out the console for the logged payment information that you provided.

6. Geolocation API

Geolocation API enables the user to let the web applications know his/her location. The user is asked for explicit permission before the location is being retrieved, for privacy reasons. For web extensions to retrieve user location, they need to put “geolocation” under the permissions in their manifest.json. There are mainly two methods that the Geolocation API provides.

• getCurrentPosition() - returns the current location of the device
• watchPosition() - registers a handler function which returns the updated current user location on device location being changed Note: Geolocation API only works in the HTTPS context.

Conclusion

Web APIs provide developers with the ability to perform complex operations without writing any complex code. Although web APIs are made deprecated or subjected to changes frequently, there are still some stable APIs that are also frequently used in front end web development. Having a good understanding of these APIs will surely make your front end development life easier and efficient. Thanks for reading! ️️❤️