DEV Community

loading...
Cover image for The Frontend Hitchhiker's Guide: Web APIs

The Frontend Hitchhiker's Guide: Web APIs

Nicholas Mendez
Web Developer, Web Instructor
・5 min read

Introduction

Web APIs or Web Browser APIs are built-in JavaScript Objects & functions that let us tap into various features of the browser.

These technologies are developed under various organizations such as the World Wide Web Consortium and anyone could make a contribution for any specification.

Web APIs are standardized which means they work out of the box, no libraries necessary for the browsers that support a particular API. However, libraries such as workbox and comlink really help for more complex use cases.

The following are some powerful capabilities of the browser that you probably thought only native apps could do.

  1. Web Sockets
  2. Web Workers
  3. Service Workers
  4. Speech Recognition
  5. Device Sensors
  6. File System Access

Web Sockets

image

If you have ever used a web chat application, odds are this API is used under the hood. Web Sockets lets you set up a live connection between a client and a server so bi-directional messages can be exchanged in real time. Socket IO is the go to library to get up and running with this technology.

Demo
Simple Web Socket App on REPL it

Resources

Web Workers

image

While the JavaScript interpreter is single threaded. Web Workers allows us to spawn additional threads in the web browser.

While web workers cannot interact with the DOM, they can work with other APIs and be used to offload work from the main thread. Data can also be exchanged between the main thread and web workers.

The main thread in the browser is responsible for keeping the UI fast and responsive. By moving work to a web worker you can make the main thread's job easier.

The Comlink library can make working with web workers easier by making your worker objects available to your main JavaScript code.

Demo
Web Worker Bubblesort

Resources

Browser Support

image

Service Workers

image

The Service Worker API is the genesis of the Progressive Web App revolution. The service worker is a background JavaScript script that can do things such as:

  1. Intercepting network requests
  2. Caching network requests
  3. Precaching HTML, CSS, JS for working offline
  4. Push Notifications

and much more. Workbox is probably the best library for building out your service worker to suit what ever advanced caching strategy you may need.

Example
I have a minimal PWA starter project below that works offline and even has an install button to add to the homescreen (on Chrome WIN & Android).

View on REPL.it

Browser Support
image

Resources

Speech Recognition

The web has native speech recognition. Using the Web Speech API you can build conversational experiences. You start by creating a WebSpeechRecognition object.

if (!('webkitSpeechRecognition' in window)) {
  upgrade();
} else {
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;

  recognition.onstart = function() { ... }
  recognition.onresult = function(event) { ... }
  recognition.onerror = function(event) { ... }
  recognition.onend = function() { ... }

Enter fullscreen mode Exit fullscreen mode

Examples & Resources

Browser Support
image

Device Sensors

Phones a full of sensors, we can use Generic Sensor API to measure the device orientation, ambient light, magnetic fields and acceleration.

1_vJkvQUQZuP4DjgO1znoNVQ

Demos

Resources

Browser Support
image

File System Access

The File System Access API is really interesting because it allows the user to give access to a file on their device to a website. This can be applied in use cases to store user data on the device as opposed to a database.

Demos

Browser Support
image

Resources

Conclusion

There are so many features we can use to build interesting applications. For APIs that are not yet supported on your browser of choice you might be able to find a pollyfill for it. What kind app ideas come to mind when you think of these APIs?

This is just our second stop in our frontend journey. Be on the lookout next week for stop number 3!

More on Web APIs

Discussion (0)