HTML5 APIs: An Overview

This is the big one. Service workers is a broad set of APIs that can acts as client-side proxies servers that intercepts requests to the server. You are also required to consider using them to enable offline access as part of the assignment 3 milestones. Uses of service workers include

Allows your app to create native notifications. This is obviously useful in a wide variety of situations, but unless combined with a service worker, the page can only create notifications as long as it is active. This is fine on desktop, but on mobile where the browser will actively kill inactive tabs, this API hasn’t been very useful until web/service workers came along.

Remember to prime the user before attempting to ask for permission, as the browser’s permissions dialog box is very intrusive (intentionally so, for security reasons).

Since ServiceWorkers run off a separate thread from the main browser window thread, you cannot use any of the traditional synchronous data storage techniques, like localStorage inside your ServiceWorker thread. Instead, you need to use IndexedDb, a client side transactional key-value store with an async API. Since the API is fairly low level, the use of a library like Dexie.js is recommended.

A protocol for maintaining a persistent two-way communication channel between the server and the browser. This is a much cleaner and more efficient solution than using Ajax polling or long-polling to accomplish the same result. Websockets allows the real-time updating of website content pushed from the server, for example for showing new items on a feed, updating vote counts, etc. Since websocket connections are lightweight, a server can handle hundreds of thousands of simultaneous connections without consuming a lot of resources.

Since websockets is a low level API, it is recommended to use a library like Socket.io to work with websockets.

Allows client-side JavaScript to draw arbitrary shapes on the webpage via the <canvas> HTML5 element. This is a relatively low-level API, but there are many libraries out there that make use of this, such as the Phaser game framework. Applications that make use of this API include:

Games, using canvas to render the playing area

Drawing application, using <canvas> as a, uh, canvas for the user to draw on

WebGL, which also uses the same <canvas> element to render output

Most applications that uses the camera, since the camera output is typically drawn onto a <canvas> element

Provides the user’s precise location (or at least as precise as the device will allow for). This API will return the location in lat-long format, and so it is up to you to decide how to use that information. Possible uses include:

Like the notifications API, this too requires the user’s permission. And just like that API, remember to prime the user for this, otherwise they will likely reject the request. Whatever you do, do not let the first thing the user see of your app be a large permissions dialog box.

RTC stands for Real-Time Communication, and WebRTC a protocol for web applications to allow peer-to-peer steaming of audio, video and text data without a intermediary server. This can be used to create video and audio chat/conferencing applications.

Activates the device’s vibration motors. So far I’ve only seen this used by phishing sites mimicking native OS notifications (poorly). One actual use case for this would be in games, where you need to provide haptic feedback to the user.

Others

There are even more experimental APIs you can tap into if you want to build something cool: