Web Platform APIs

The vast and growing array of browser APIs enable web developers to build richer user experiences such as Progressive Web Apps, which are made possible by the collective use of several new browser APIs.

Progressive Web Apps narrow the gap between web and native apps, and establish a set of best practices that can be implemented with universal benefit in almost any web app or website in existence. But in some ways a Progressive Web App is just scratching the surface of what can be achieved on the modern Web today. As an approach that has such broad application there are lots of occasions where web developers can and should go even further.

Depending on the nature of the website or web app, web developers can take a progressive enhancement approach to utilise some of the more niche APIs that are arriving in modern browsers with every release. For example for a web app that streams audio and/or video the Media Session API will allow you to display custom track/artist information and imagery on the mobile device notification tray along with the lock screen and even any paired wearable devices. Yes, the Web Platform can do that today!

But keeping up with all the new and shiny browser APIs is no mean feet, so hence in this blog post I’m going to cover various upcoming Web Platform APIs along with some not so new and lesser known APIs that bring exciting new capabilities to the Web Platform and create new possibilities for building richer and more effective web apps and websites.

Status: Unofficial
Support: Available in Chrome

The Web Share API enables websites to invoke the native sharing capabilities of the host platform. So on an Android device this would open the normal share dialog, which includes sharing via whatever native apps may be installed. This is music to our ears, as for too long have we had to include such functionality with the performance hit and clumsy UI of a third party widget or worse still spend time rolling our own, the video below demonstrates the Web Share API in action:

Status: Editor's Draft (Service Workers)
Support: Available in Chrome, Opera and Firefox. Edge and Safari have marked the API as 'In Development'.

The Cache API is one of the core technologies of PWAs and is essentially like a key-value store, with the keys being HTTP requests and the values being HTTP responses. The Cache API provides the offline functionality of Progressive Web Apps, as a service worker can match requests to cached responses.

Status: Living Standard
Support: Available in Chrome, Opera, Firefox, Edge, Safari and polyfill for other browsers

The Fetch API replaces the old and trusty XMLHttpRequest object, which allows web developers to make network requests and handle the responses. The Fetch API uses Promises, which is a far easier and simpler interface to use and helps to avoid issues such as callback hell. Again, the Fetch API is used heavily within Progressive Web Apps to gracefully handle network requests from a service worker and their responses.

Status: Living Standard
Support: Available in Chrome, Firefox, Opera and Safari

Service workers are a type of web worker, a web worker runs a named JavaScript file in its own thread with a different global context to the current window object. Web workers are useful as they allow web developers to run scripts in another thread, similar to a background process, which keeps the main thread more idle and able to respond to user interaction.

Status: Editor's Draft
Support: Available in Chrome, Opera and Firefox. Edge and Safari have marked the API as 'In Development'.

Service Workers are a type of web worker that run a JavaScript file in the background, not requiring a web page or user interaction and act as proxy between a web app, and the browser and the network (when available). Service workers in the case of Progressive Web Apps take advantage of several new Web Platform APIs such as the Fetch API, Cache API, Push API and Background Sync API to deliver new capabilities to the Web. Service workers are crucial to Progressive Web Apps and are key to features such as offline access, background sync and push notifications.

Status: Editor's Draft (MediaStream Image Capture)
Support: Available in Chrome and Opera

The Image Capture API makes is far easier for web developers to control the device’s camera to capture a still image or video and adjust hardware camera settings such as zoom, brightness, contrast, ISO and white balance along with whether to use the front or rear facing camera if applicable.

Status: Candidate Recommendation
Support: Available in Chrome and Edge

Much like the Web Share API, the Payment Request API seeks to improve user experience on the Web by standardising the e-commerce checkout flow for web users, while potentially saving the collective effort of many web developers in the process. For users, rather than having to become accustomed to the intricacies of each and every e-commerce website checkout flow the Payment Request API will allow web developers to handover part of the checkout flow to supporting web browsers using the Payment Request API. This will not only save web developers time, but will result in an improved user experience for visitors as they can pre-populate forms with details securely saved within their web browser along with utilising a checkout flow with which they are already familiar.

Status: Living Document
Support: Available in Chrome, Opera, Samsung Internet

The network information API allows web developers to detect the connection type (wifi, ethernet, cellular, etc.) of the user’s device and effective connection type (slow-2g, 2g, 3g or 4g). This is useful as it allows us to make decisions in terms of whether to preload videos on page load or for a service worker to cache certain assets depending on effective connection type.

Status: Draft Community Group Report
Support: Available in Chrome

While Service Workers allow us to provide a web app experience when offline in terms of serving cached content to the user, what happens when the user wants to send data to our web app offline? That's where the Background Sync API comes in, it allows us to capture the request the user wants to send to the server and send it when the network connection is restored.

Status: Editor's Draft
Support: Available in Chrome and Firefox

Building upon Service Workers, the Push API gives web apps the ability to receive messages pushed to them from a server, regardless of whether the web app is in the foreground, or even currently open, on a device. This is already one of the more popular new APIs in usage terms as web apps are always keen to find new ways to re-engage users and push notifications are quite an effective way of communicating with users. In order to send push notifications web apps have to request permission from their users via the Permissions API.

Status: Editor's Draft
Support: Available in Edge and Firefox

As it sounds this API allows web apps to detect changes in ambient light, so much like how most SatNav systems will adapt their display contrast settings for night time use, this API enables web apps to similarly respond to changes in ambient light.

Status: Living Standard
Support: Available in Chrome, Firefox and Opera

The Broadcast Channel API allows simple communication between windows, tabs, frames and iframes from the same origin (domain). Use cases include being able to update the logged in or logged out status of a user across multiple tabs if they log-in or log-out on one tab. The Broadcast Channel API has similarities to the Channel Messaging API except that the latter is for one script dispatching messages to one other (one-to-one). Whereas the Broadcast Channel API is suitable for dispatching messages to many listeners (one-to-many).

Status: Editor's Draft
Support: Available in Chrome, Edge, Firefox, Opera and Safari

The Web Audio API is far from new, but it has been steadily improved more recently and provides web developers with the ability to control audio on the Web, allowing us to choose audio sources, add effects to audio, create audio visualisations, apply spatial effects (e.g. panning) and more.

Status: Editor's Draft
Support: Available in Chrome, Firefox, Opera and Samsung Internet

The Web Animations API is a great addition that allows web developers to build animations using JavaScript that render with the same performance as declarative CSS animations. The benefits include faster frame-rate with lower power consumption compared to traditional JavaScript animation which translates to a better user experience on all devices, particularly mobile. This is achieved by empowering developers to “build performant compositor threaded animations using JavaScript”. In addition, the API also allows us to inspect and manipulate running CSS animations, making it far easier to update some state once a series of animations have completed or pause running animations.

Status: Editor's Draft
Support: Available in Chrome and Opera

While full browser support may never arrive the WebUSB API is still worth a mention as being able to access USB devices on the Web feels like somewhat of a milestone.

Status: Recommendation
Support: Available in Chrome, Firefox, Edge, IE, Safari and Samsung Internet

Another API that’s not new but perhaps not well-known amongst web developers. The Media Source Extensions API (MSE) provides functionality enabling plugin-free web-based streaming media. Using MSE, the traditional src attribute of a <video> element and can be replaced with a Media Source object. This enables more advanced media delivery and control than is currently possible with <video> and <audio> elements alone. Use cases include adaptive streaming, so swapping the bitrate of a video stream in response to changing connection speeds. It lays the groundwork for adaptive bitrate streaming clients (using DASH or HLS) to be built on the MSE API, such as the open source Shaka player.

Status: Working Draft
Support: Available in Chrome, Firefox

The Media Recorder API makes it possible for web apps to easily record and instantly use media from a user’s input devices so audio, video or both. This therefore gives web developers the ability to easily build web apps that capture audio recordings or video recordings, another great asset to the Web Platform.

Status: Editor's Draft
Support: Available in Edge and Firefox (basic support)

The WebVR API provides a means for web apps to communicate with virtual reality devices such as the head-mounted Oculus Rift or HTC Vive. This enables web developers to build apps that can receive position and movement information from the VR device and translate that into movement around a 3D scene. Enabling web developers to build virtual product tours, interactive training and immersive games.

Status: Working Draft
Support: Not supported

Data from device sensors is used in many native apps such as games, augmented reality apps and fitness tracking apps and whilst it’s possible to access some sensor data on the Web already the Web is lacking the broad range of sensor data available to native apps. This is what the Generic Sensor API hopes to address, by exposing sensor devices to the Web Platform in a consistent, performant and easy to use way.  At the time of writing the Generic Sensor API has just been released as an origin trial in Google Chrome 63, so it’s very new. But it’s certainly one to watch as support, and the number of sensor interfaces, will hopefully grow.

Status: Draft Community Group Report
Support: Available in Chrome and coming to other browsers soon

This isn’t enormously exciting but worth a mention anyway as it might come as a surprise to many that there’s such a thing as a layout viewport and a visual viewport. When a user pinches and zooms on your page the visual and layout viewports diverge and this can cause unpredictable results. With the new Viewport API it makes it possible for web developers to tame this unpredictability in style! The video below shows both the visual viewport (red border) and the layout viewport (green overlay) and how they can diverge when pinching and zooming.

Status: Editor's Draft
Support: Available in Chrome for Android, coming soon to Chrome, Safari and Firefox

If you have an Android phone you are probably familiar with the notifications tray, that place where you see a banner spanning the width of the screen showing your latest emails, messages, push notifications, etc. When casting or consuming some video/audio media you might be familiar with seeing some playback controls here that allow you to skip the track or see the song, album and artist information. The Media Session API brings the ability to customise the notification tray content and playback controls for media on the Web. Enabling web developers to provide an experience deeply integrated into the host platform. So much so that this metadata, artwork and playback controls can be seen on the user’s lock screen and even a paired wearable device.

Status: Draft Community Group Report
Support: Available in Google Chrome

This is another one of those milestone type APIs, I don’t think many web developers would realise that it’s possible today in Chrome to connect your web app to a Bluetooth device! Granted it’s probably not for the faint-hearted and the specification if you can even call it that is very much in flux but it’s pretty incredible to know it’s something that is available on the web right now and is improving with each browser release.

Status: Editor's Draft
Support: Available in Google Chrome

The Device Memory API allows web developers to get some form of benchmark in terms of the performance and capabilities of a user's device. With a plethora of devices able to access the Web not all are able to handle everything web developers can build. Utilising the Device Memory API enables us to deliver a "Lite" experience to devices which will struggle with a website's full experience. We can also augment our website statistics by gathering device memory data where possible and therefore better inform our decision making and testing to match the capabilities of real user devices.

And there you have it, some bleeding-edge APIs, some existing APIs but not so well-known, and some other APIs that have just come a long way. Hopefully, this blog post has sparked some ideas for how you can utilise these new APIs to build experiences that you never thought were possible on the Web.