The Frontend Hitchhiker's Guide: Web APIs 
Tags: hitchhikers, javascript, webdev, codenewbie
Published: 2021-06-05 03:22:20

# 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](https://www.w3.org/) and anyone could make a [contribution](https://github.com/w3c/WebAppsWG) 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](#web-sockets)
2. [Web Workers](#web-workers)
3. [Service Workers](#service-workers)
4. [Speech Recognition](#speech-recognition)
5. [Device Sensors](#device-sensors)
6. [File System Access](#file-system-access)

# Web Sockets

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ch7jf3d2llj8dbymf40o.png) 

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](https://socket.io/) is the go to library to get up and running with this technology. 

**Demo**
[Simple Web Socket App on REPL it](https://replit.com/@Snickdx/websocket-demo)

**Resources**
* [What are Web Sockets](https://pusher.com/websockets)

# Web Workers

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0qpx3nmi40i6okhu2fq.png) 

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](https://github.com/GoogleChromeLabs/comlink) library can make working with web workers easier by making your worker objects available to your main JavaScript code.

**Demo**
[Web Worker Bubblesort](https://afshinm.github.io/50k/)

**Resources**
* [Building Blocks of Web Workers](https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them-a547c0757f6a)
* [The Basics of Web Workers](https://www.html5rocks.com/en/tutorials/workers/basics/)
* [Web Workers Overview](https://web.dev/workers-overview/)
* [Things You Can Do With A Web Worker](https://github.com/deebloo/things-you-can-do-in-a-web-worker)

**[Browser Support](https://caniuse.com/?search=web%20socket)**

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nirxxxi4x9s8tn6wpgcf.png)

# Service Workers

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgh5ti8i51c07x8g8btt.png)
 

[The Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) is the genesis of the [Progressive Web App](https://web.dev/progressive-web-apps/) 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](https://developers.google.com/web/tools/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](https://replit.com/@Snickdx/pwa-demo#index.html)

**[Browser Support](https://caniuse.com/?search=service%20worker)**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfjtx79emhgh9slmuhis.png)

**Resources**
* [Is Service Worker Ready?](https://jakearchibald.github.io/isserviceworkerready/)
* [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers)
 

# Speech Recognition
The web has native speech recognition. Using the [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) you can build conversational experiences. You start by creating a WebSpeechRecognition object.

```javascript
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() { ... }

```


**Examples & Resources**
* [Dictation IO](https://dictation.io/speech)
* [Web Speech Demo](https://www.google.com/intl/en/chrome/demos/speech.html)
* [Google Developers](https://developers.google.com/web/updates/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API)

**[Browser Support](https://caniuse.com/?search=bluetooth)**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78cwej2pvsasw2gntgr4.png)
 

# Device Sensors
Phones a full of sensors, we can use [Generic Sensor API](https://www.w3.org/TR/generic-sensor/) to measure the device orientation, ambient light, magnetic fields and acceleration.

![1_vJkvQUQZuP4DjgO1znoNVQ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wzryxkwp21407ae8jri.gif)

**Demos**
* [Punchmeter - Test your punch speed!](https://intel.github.io/generic-sensor-demos/punchmeter/)
* [Orientation Phone](https://intel.github.io/generic-sensor-demos/orientation-phone/)

**Resources**
* [Generic Sensor API](https://github.com/intel/generic-sensor-demos)
* [Sensors for the Web](https://web.dev/generic-sensor/)
* [Gryocope](https://developer.mozilla.org/en-US/docs/Web/API/Gyroscope)
* [Gyro: Web](https://itnext.io/gyro-web-accessing-the-device-orientation-in-javascript-387da43eeb84)

**[Browser Support](https://caniuse.com/?search=sensor%20api)**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6perqrfum3mp9jve89to.png)

# File System Access

The [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/FileSystem) 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. 


{% youtube P0qgI9Ad8vA %}

**Demos**
* [Excalidraw](https://excalidraw.com/)
* [Text Editor](https://googlechromelabs.github.io/text-editor/)
 
**[Browser Support](https://caniuse.com/native-filesystem-api)**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53wegozvmgtf4qb6iyn0.png)

**Resources**
* [New in Chrome](https://www.youtube.com/watch?v=vy6FXa0n1r0)
* [File System Access](https://web.dev/file-system-access/)
 

# 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](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill) 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
* [What Web Can Do](https://whatwebcando.today/)
* [Fugu API Tracker](https://fugu-tracker.web.app/)
* [Web APIs You Probably Didn't Know Existed](https://www.youtube.com/watch?v=EZpdEljk5dY&list=PLdDtziX2vawZLp8eGFIWuxV2nEg978EcY&index=4)