Today, web applications seamlessly integrate with external services, and can directly interact with a device's hardware to deliver dynamic, more advanced experiences. At the heart of this revolution lies a powerful tool: the Web Application Programming Interfaces, or Web APIs.
There are plenty of APIs we can use in our web projects, some are well-established and supported by many browsers, while others are still in an experimental phase and supported only by a subset of browsers (typically Chrome and Edge).
This article delves into a selection of web APIs, showcasing their diverse functionalities and the transformative impact they can have on web application development.
1. Device Orientation API
Smartphones, and other mobile devices, are equipped with built-in sensors that track their position in space.
With the DeviceOrientationEvent we can detect when a user tilts or rotates the device and create features triggered by these patterns. When the device's accelerometer senses a change in orientation, this event fires, providing us with the data to react accordingly.
There are three orientations we can listen to:
For instance, the native app of Revolut allows you to toggle on/off the credit card details by moving the device forward and backward. Similarly, web applications can now explore alternative interaction methods beyond traditional UI elements, generating increased interest and engagement.
2. Page Visibility API
Designed to enhance web application responsiveness, the Page Visibility API equips developers with tools to track a page's visibility. It provides events for detecting visibility changes and properties for retrieving the current state, allowing for optimized resource management and user experience adjustments.
While not the newest API, the Page Visibility API remains remarkably underutilized despite its potential to effortlessly optimize application resource usage.
In the screenshots above the tab's title changes when the API detects that the content is not visible anymore (play/pause values are displayed accordingly).
Imagine a scenario where a client continuously polls the server for fresh data.
With the Page Visibility API, we can automatically pause these requests when the user minimizes the browser or switches tabs, resuming them only when the page regains focus. This is particularly valuable in situations demanding bandwidth and data transfer optimization or when we want to stop mandatory video advertisements when the tab is not in focus.
3. Ambient Light (Sensors API)
The AmbientLightSensor interface empowers information the hosting device captures regarding the surrounding area's light level. The amount of light detected is provided in terms of luminance value (an integer), and developers can implement any logic around this information.
We can implement environmentally responsive web solutions, allowing applications to react to their surroundings. With the Ambient Light interface, we can design applications that adjust their user interface (UI) elements dynamically. It ensures a comfortable viewing experience for users in different lighting conditions, whether they're basking in bright sunlight or relaxing in a dimly lit room.
Context-aware APIs have already been available for mobile apps for a long time, this is exactly what native apps like Google Maps offer, switching to dark mode while we drive through a gallery or use the app at night. But we can now provide this feature to our web users too.
Live Demo
Here is the live demo to some of the APIs described in the article and new ones. Each section covers a separate use case and can be tested with a mobile or desktop device (not all APIs are cross-compatible).
Github repo (if you like it, leave a ⭐️ )
Conclusion
While each Web API offers individual benefits, their combined potential is truly transformative. With careful design and creativity, web developers can craft web solutions that rival the functionality and user experience of native Android and iOS apps.
To exemplify a personal experience, the native camera app on my Android phone lacks a self-shot feature.
Instead of downloading a third-party solution, I built a web project using the Media Capture and Streams API to access the camera. Here's where I needed to inject some creativity: I combined the camera API with a predefined motion pattern from the Device Orientation API to trigger the camera shutter. By rotating the device forward and then backward a three-second timer is triggered before taking the shot. This allows for a more comfortable self-portrait experience compared to a traditional on-screen button press.
Once captured, the Share API lets users seamlessly share the photo through their preferred native apps like WhatsApp, Gmail, or Twitter.
Top comments (0)