Unleashing the Power of Under-The-Radar Web APIs for Progressive Web Apps
If you think you know all about web APIs, think again. Ever heard of the Screen Orientation API? How about the Device Orientation API, Vibration API, or Contact Picker API? These under-the-radar features might just be the missing pieces in the puzzle for creating more powerful and user-friendly progressive web apps (PWAs). Let’s dive in!
A couple of years ago, four JavaScript APIs flew under the radar in the State of JavaScript survey. These APIs have tremendous potential but often go unnoticed. Despite the vast array of new web APIs in the ECMAScript specification, many remain in obscurity due to a lack of awareness and incomplete browser support.
This situation can be a real conundrum:
Most of these APIs are tailored to enhance progressive web apps (PWAs) and bridge the gap between web and native apps. While adding a manifest file technically turns a website into a PWA, true app-like experiences require the use of various APIs. The lesser-known APIs like Screen Orientation, Device Orientation, Vibration, and Contact Picker are vital pieces of the PWA puzzle, bringing native app functionality to web experiences.
For a hands-on experience with these APIs, you can check out this demo as we explore each one in depth.
1. Screen Orientation API
The Screen Orientation API allows you to detect and respond to the device’s current orientation, enabling you to optimize the user experience for mobile devices by adjusting the UI dynamically. Additionally, you can lock the screen in a specific orientation, which is useful for displaying videos and full-screen content that benefit from a particular viewport orientation.
By accessing properties of the screen object, such as screen.orientation, you can determine the current orientation and angle of the screen. Utilizing the screen.orientation object’s methods like .lock() and .unlock(), you can control the screen orientation and respond to orientation changes using the "orientationchange" event.
Browser Support
(View larger image here)
Finding And Locking Screen Orientation
To explore the Screen Orientation API in action, let’s create a simple demo to demonstrate how you can detect the device’s orientation and lock it in place. Here’s a snippet of the HTML boilerplate:
<main>
<p>Orientation Type: <span class="orientation-type"></span><br />
Orientation Angle: <span class="orientation-angle"></span></p>
<button type="button" class="lock-button">Lock Screen</button>
<button type="button" class="unlock-button">Unlock Screen</button>
<button type="button" class="fullscreen-button">Go Full Screen</button>
</main>