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.
Web Sockets
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
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.
Resources
- Building Blocks of Web Workers
- The Basics of Web Workers
- Web Workers Overview
- Things You Can Do With A Web Worker
Service Workers
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:
- Intercepting network requests
- Caching network requests
- Precaching HTML, CSS, JS for working offline
- 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).
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() { ... }
Examples & Resources
Device Sensors
Phones a full of sensors, we can use Generic Sensor API to measure the device orientation, ambient light, magnetic fields and acceleration.
Demos
Resources
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
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!
Top comments (0)