The article lists 12 commonly used JavaScript APIs, including Geolocation, DeviceOrientation, Battery Status, Vibration, etc. For each API, articles provide detailed explanations, sample code, and usage notes. These APIs can help developers implement functions such as obtaining user location, accessing device sensors, monitoring battery status, triggering device vibration, etc. in mobile web pages.
This article is suitable for developers who have a certain JavaScript programming foundation to read. By reading this article, readers can learn about some commonly used JavaScript APIs and learn how to use them to enhance the interaction and functionality of mobile web pages.
The front is the text~~~
1. Network Information API
The Network Information API allows web applications to obtain information about the user's network connection, such as the type of connection (eg, WiFi, cellular) and its effective bandwidth. The API can be used to optimize content delivery, manage offline caching, or provide a customized experience based on network conditions.
To access network information, navigator.connection an object can be used:
const connection =
navigator.connection ||
navigator.mozConnection ||
navigator.webkitConnection;
const effectiveType = connection.effectiveType;
const downlink = connection.downlink;
console.log('connection: ', connection);
console.log('Effective connection type:', effectiveType);
console.log('Downlink speed:', downlink);
2. Geolocation API
The Geolocation API allows web applications to obtain the geographic location of a user's device. This is useful for location-based services, mapping applications, and personalized content delivery. By obtaining the user's location, we may provide directional information, navigation or location-specific functionality.
For example, to get the user's current location, you can use getCurrentPosition() the method:
navigator.geolocation.getCurrentPosition(function success(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
console.log('Latitude:', latitude);
console.log('Longitude:', longitude);
});3. Media Capture API
The Media Capture API allows web applications to access the device's media capture capabilities, such as the camera and microphone. This API lets you integrate image and video capture functionality directly into your web applications. It's especially useful for applications that require uploading photos or videos, video conferencing, or augmented reality experiences.
To capture media from the device's camera, you can use getUserMedia() the method:
navigator.mediaDevices
.getUserMedia({ video: true, audio: false })
.then(function (stream) {
// Do something with the media stream
})
.catch(function (error) {
// Handle the error
});4. Payment Request API
The Payment Request API simplifies the process of integrating secure payment processes into web applications. It provides a standardized way to collect payment information and initiate payment requests, making it easier for users to make payments and improving the overall checkout experience. This API is especially valuable for e-commerce sites or any application involving financial transactions.
To initiate a payment request, an PaymentRequest object needs to be created:
const supportedPaymentMethods = [
{
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'mastercard'],
},
},
];
const paymentDetails = {
total: {
label: 'Total',
amount: { currency: 'USD', value: '10.00' },
},
};
const paymentRequest = new PaymentRequest(
supportedPaymentMethods,
paymentDetails,
);
paymentRequest
.show()
.then(function (paymentResponse) {
console.log('paymentResponse: ', paymentResponse);
// Process the payment response
})
.catch(function (error) {
console.log('error: ', error);
// Handle errors
});By integrating the payment request API, you can simplify the payment process and provide users with a seamless checkout experience.
5. Battery Status API
The Battery Status API provides valuable information about the device's battery charge and status. It allows you to determine if the battery is charging, how much time remains before it is fully drained, and the current battery level. For example:
navigator.getBattery().then(console.log);
6. Web Bluetooth API
The Web Bluetooth API allows web applications to communicate with Bluetooth devices, opening up possibilities for interacting with IoT devices and creating innovative connected experiences. This API enables web applications to discover nearby Bluetooth devices, establish a connection and exchange data with them. It is especially suitable for applications involving IoT devices, wearables or home automation systems.
To discover nearby bluetooth devices and connect to them you can use requestDevice() method:
navigator.bluetooth
.requestDevice({ filters: [{ services: ['heart_rate'] }] })
.then(function (device) {
// Connect to the selected device
})
.catch(function (error) {
// Handle errors
});Once connected, you can use the provided API to interact with the Bluetooth device and exchange data as needed.
7. Ambient Light Sensor API
The Ambient Light Sensor API allows web applications to access the device's ambient light sensor. This API provides information about the intensity of ambient light, enabling applications to adjust their display or behavior based on lighting conditions. Especially useful for applications that require adaptive brightness, readability optimization, or energy efficiency.
To get the current ambient light intensity, we can create an object and listen for its changes:
var sensor = new AmbientLightSensor();
sensor.onreading = function() {
var illuminance = sensor.illuminance;
console.log('Illuminance:', illuminance);
};
sensor.start();By using the Ambient Light Sensor API, we can create web applications that adapt to lighting conditions, improving readability and user experience.
8. Web Notification API
Notifications play a vital role in mobile applications, alerting users to important events or updates. The Web Notification API standardizes the way developers create notifications in web applications. Although the appearance and behavior of notifications may vary across browsers, this API provides a consistent way of notifying users outside of the context of a web page.
Creating a notification is as easy as constructing an object with the desired title and body:
const notification = new Notification('Email received', { body: 'You received an email. Read it now!' });9. Accelerometer API
The Accelerometer API allows web applications to access the device's accelerometer sensor. This API provides information about the device's acceleration in the x, , y and z axes, enabling applications to detect the device's motion, orientation, or tilt. It is especially useful for applications involving motion-based interactions, games, or virtual reality experiences.
To get accelerometer data, you can create an Accelerometer object and listen for its changes:
const accelerometer = new Accelerometer({ frequency: 60 });
accelerometer.addEventListener('reading', () => {
const { x, y, z } = accelerometer;
console.log('Acceleration X:', x);
console.log('Acceleration Y:', y);
console.log('Acceleration Z:', z);
});
accelerometer.start();10. Media Session API
The Media Session API allows web applications to control media playback, providing a consistent and integrated media control experience across platforms and devices. The API enables developers to customize media notifications, handle media playback operations, and integrate with system media controls.
To handle media playback operations, we can set up event listeners for various media-related events:
navigator.mediaSession.setActionHandler('play', function() {
// Handle play action
});
navigator.mediaSession.setActionHandler('pause', function() {
// Handle pause action
});
// Add more event listeners for other media actions11. Vibration API
Vibration API Allows web pages to control the device's vibration functionality, providing an opportunity to create haptic feedback or simulate effects in games.
Using the vibration API is very simple. We can call vibrate() the method, and specify the duration of the vibration in milliseconds:
navigator.vibrate(3000); // Vibrate for three seconds12. Device Orientation API
The Device Orientation API provides information about the physical orientation and motion of a device. This API is especially useful for applications such as navigation or games that rely on device orientation. Although the API is supported to varying degrees by different browsers, it provides valuable functionality for mobile Web applications.
If you want to detect device orientation changes, you can deviceorientation add an event listener to the event:
window.addEventListener('deviceorientation', function(event) {
console.log('Device orientation:', event.alpha, event.beta, event.gamma);
});Summarize
In this article, we explore 12 JavaScript APIs that can enhance your mobile web pages and provide a better user experience.
However, it is important to remember that browser support for these APIs may vary, and not all devices or browsers have the same level of compatibility. Therefore, it is important to perform feature detection and handle cases where the API is not supported. This ensures that users get a consistent experience across platforms.