David Turnbull for Lingo.dev

Posted on Sep 17

21 native browser APIs you might not have used before

#api #javascript #webdev

Introduction

When I started working at Lingo.dev, I noticed that some Node.js packages were no longer needed since they could be replaced with native features.

Similarly, modern browsers ship with dozens of lesser-known APIs. These native features handle everything from haptic feedback to barcode scanning, sometimes eliminating the need for external libraries.

Here are 21 browser APIs with practical code examples for each.

1. Web Share API

The Web Share API lets you tap into the native sharing capabilities of the operating system. Instead of building custom share buttons for every platform, you can invoke the system's share dialog with a single API call.

navigator.share({
  title: 'Check out this article',
  text: 'Found this interesting article about browser APIs',
  url: 'https://example.com/article'
});

2. Vibration API

Control the device's vibration motor to provide haptic feedback. This works primarily on mobile devices and can enhance user interactions with subtle physical responses.

// Vibrate pattern: 100ms on, 50ms off, 100ms on
navigator.vibrate([100, 50, 100]);

3. Broadcast Channel API

Communicate between different browser contexts (tabs, windows, iframes) of the same origin. Think of it as a message bus for your application across multiple windows.

const channel = new BroadcastChannel('app-notifications');

// Send message to other tabs
channel.postMessage({ type: 'user-logout' });

// Listen for messages
channel.onmessage = (event) => {
  console.log('Received:', event.data);
};

4. Screen Wake Lock API

Prevent the device screen from dimming or locking while your app is in use. Perfect for recipe apps, presentation tools, or video players.

const wakeLock = await navigator.wakeLock.request('screen');

// Release when done
wakeLock.release();

5. Page Visibility API

Detect when a page becomes visible or hidden to the user. This helps optimize performance by pausing unnecessary operations when the user switches tabs.

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('Tab is hidden');
  } else {
    console.log('Tab is visible');
  }
});

6. Clipboard API

Modern, promise-based API for interacting with the clipboard. It handles both text and other data types with proper permission management.

// Copy text
await navigator.clipboard.writeText('Hello World');

// Read text
const text = await navigator.clipboard.readText();

7. Web Speech API

Add speech recognition and synthesis to your web apps. The API consists of two parts: SpeechRecognition for converting speech to text, and SpeechSynthesis for text-to-speech.

// Speech to text
const recognition = new webkitSpeechRecognition();
recognition.onresult = (event) => {
  console.log(event.results[0][0].transcript);
};
recognition.start();

// Text to speech
speechSynthesis.speak(new SpeechSynthesisUtterance('Hello World'));

8. Battery Status API

Monitor the device's battery level and charging status. Useful for adjusting app behavior based on power availability.

const battery = await navigator.getBattery();
console.log(`Battery: ${battery.level * 100}%`);
console.log(`Charging: ${battery.charging}`);

9. Network Information API

Get information about the user's network connection, including connection type and effective bandwidth. This helps you adapt content delivery based on network conditions.

console.log(`Connection: ${navigator.connection.effectiveType}`);
console.log(`Downlink: ${navigator.connection.downlink}Mbps`);

10. Payment Request API

Streamline checkout flows by integrating with the browser's native payment UI. Users can pay with saved cards, digital wallets, and other payment methods.

const payment = await new PaymentRequest(
  [{ supportedMethods: 'basic-card' }],
  { total: { label: 'Total', amount: { currency: 'USD', value: '10.00' } } }
).show();

11. Resize Observer API

Efficiently monitor element size changes without relying on window resize events. Perfect for responsive components that need to react to size changes.

new ResizeObserver(entries => {
  entries.forEach(entry => {
    console.log(`New width: ${entry.contentRect.width}`);
  });
}).observe(document.querySelector('.element'));

12. Credential Management API

Streamline sign-in flows by integrating with the browser's password manager. Users can sign in with a single tap using saved credentials.

// Store credentials
await navigator.credentials.store(
  new PasswordCredential({ id: 'user@example.com', password: 'p@ssw0rd' })
);

// Get credentials
const cred = await navigator.credentials.get({ password: true });

13. Screen Orientation API

Control and respond to screen orientation changes. Useful for games, video players, and other apps that benefit from specific orientations.

// Lock to landscape
await screen.orientation.lock('landscape');

// Current orientation
console.log(screen.orientation.type); // "landscape-primary"

14. Idle Detection API

Detect when the user becomes idle (no interaction with keyboard, mouse, or screen). Useful for chat apps, collaborative tools, or security features.

const detector = new IdleDetector();
detector.addEventListener('change', () => {
  console.log(`User: ${detector.userState}, Screen: ${detector.screenState}`);
});
await detector.start({ threshold: 60000 });

15. File System Access API

Read and write files directly from the browser with user permission. This enables powerful file manipulation without server round-trips.

// Open file
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const content = await file.text();

// Save file
const writable = await fileHandle.createWritable();
await writable.write('New content');
await writable.close();

16. EyeDropper API

Let users pick colors from anywhere on their screen. Perfect for design tools, theme customizers, or any app that works with colors.

const { sRGBHex } = await new EyeDropper().open();
console.log(sRGBHex); // "#ff5733"

17. WebOTP API

Automatically read SMS verification codes on mobile devices. This streamlines two-factor authentication by eliminating manual code entry.

const { code } = await navigator.credentials.get({
  otp: { transport: ['sms'] }
});

18. Contact Picker API

Access the device's contact list with user permission. Users can select contacts to share with your app without manual entry.

const contacts = await navigator.contacts.select(
  ['name', 'email'],
  { multiple: true }
);

19. Barcode Detection API

Detect and decode barcodes and QR codes directly in the browser. No external libraries needed for scanning various code formats.

const barcodes = await new BarcodeDetector().detect(imageElement);
console.log(barcodes[0].rawValue);

20. Geolocation API

While not exactly unknown, the Geolocation API has some lesser-used features like watching position changes and fine-tuning accuracy requirements.

// Get position with high accuracy
navigator.geolocation.getCurrentPosition(
  position => console.log(position.coords),
  error => console.error(error),
  { enableHighAccuracy: true }
);

// Watch position changes
const watchId = navigator.geolocation.watchPosition(position => {
  console.log(`Moved to: ${position.coords.latitude}, ${position.coords.longitude}`);
});

21. Notification API

Create system notifications that appear outside the browser window. Combined with service workers, these can work even when your app isn't open.

// Request permission
await Notification.requestPermission();

// Show notification
new Notification('Hello!', {
  body: 'This is a notification',
  icon: '/icon.png'
});