🧰 Browser API Overview

What Are Browser APIs?

A Web API (Application Programming Interface) is a set of objects, methods, and events the browser exposes to your JavaScript. You don't install them — they ship inside the browser. When you write document.querySelector(...), fetch(...), or navigator.geolocation, you're calling browser APIs.

💡 A useful analogy: Think of the browser as a Swiss Army knife. The knife is the platform; each fold-out tool — scissors, screwdriver, bottle opener — is an API. Your app picks the tools it needs, and it doesn't have to carry them itself.

Collectively these APIs let a web app do things that used to require a native install:

• Read device hardware — camera, microphone, GPS, sensors
• Store data on the client and work offline
• Talk to servers over HTTP and real-time sockets
• Run background threads and defer work until the network returns
• Draw complex 2D/3D graphics and process audio

The Major Categories

There are far too many APIs to memorise, but they cluster into a handful of families. Learn the shape of the map first; you can always look up a specific method later.

The browser platform has grown in waves: basic DOM scripting in the 1990s, Ajax (XMLHttpRequest) and canvas in the 2000s, the HTML5 wave (Geolocation, Web Storage, WebSockets) in the 2010s, and Service Workers, WebAssembly, and hardware APIs since. The trend line is clear — the gap between web and native keeps shrinking.

Feature Detection & Progressive Enhancement

Not every browser supports every API, and support changes over time. The professional habit is never to assume an API exists — you detect it first, then enhance. This is the opposite of the old, brittle practice of sniffing the user-agent string.

// Feature detection: ask "does this exist?" before using it
if ('geolocation' in navigator) {
  navigator.geolocation.getCurrentPosition(showPosition);
} else {
  showManualLocationInput(); // graceful fallback
}

// The same pattern for a newer capability
if ('share' in navigator) {
  await navigator.share({ title: 'Great article', url: location.href });
} else {
  showCustomShareDialog();
}

When you're unsure whether something is safe to use, check Can I Use for a support matrix and MDN for the authoritative reference and its browser-compatibility tables.

Deep Dive: The Geolocation API

The Geolocation API returns the user's coordinates, powering maps, "stores near me", weather, and delivery tracking. Because location is sensitive, the browser always asks permission first and only works over HTTPS.

The three methods

• getCurrentPosition() — one-shot: get the position once.
• watchPosition() — subscribe to updates as the user moves; returns a watch ID.
• clearWatch(id) — stop watching.

Callbacks receive a GeolocationPosition whose coords holds latitude, longitude, accuracy (in metres), and sometimes altitude, heading, and speed. Here's a modern, promise-wrapped version so you can use async/await:

// Wrap the callback API in a Promise for clean async/await
function getPosition(options) {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(resolve, reject, options);
  });
}

async function showLocation() {
  if (!('geolocation' in navigator)) {
    return console.warn('Geolocation not supported');
  }
  try {
    const pos = await getPosition({ enableHighAccuracy: true, timeout: 10_000 });
    const { latitude, longitude, accuracy } = pos.coords;
    console.log(`You are near ${latitude.toFixed(4)}, ${longitude.toFixed(4)} (±${accuracy}m)`);
  } catch (err) {
    // err.code tells you WHY it failed
    switch (err.code) {
      case err.PERMISSION_DENIED:    return console.log('User declined location access');
      case err.POSITION_UNAVAILABLE: return console.log('Position unavailable');
      case err.TIMEOUT:              return console.log('Location request timed out');
    }
  }
}

The permission flow is a small handshake between four parties. Understanding it explains why you sometimes see a prompt and sometimes don't (the browser remembers a prior decision):

Deep Dive: Web Workers

JavaScript on a page runs on a single thread — the same one that handles clicks, scrolling, and rendering. A long calculation blocks that thread, freezing the whole UI. Web Workers fix this by running scripts on a separate background thread, keeping the page responsive.

A worker lives in its own file. The two sides talk exclusively through postMessage() and the message event — data is copied between them (structured cloning), never shared directly.

// main.js — create the worker and talk to it
const worker = new Worker('primes.worker.js');

document.querySelector('#run').addEventListener('click', () => {
  status.textContent = 'Working…';
  worker.postMessage({ limit: 5_000_000 }); // hand off the heavy job
});

worker.addEventListener('message', (e) => {
  status.textContent = `Found ${e.data.count} primes`;
});

worker.addEventListener('error', (e) => {
  status.textContent = 'Worker error: ' + e.message;
});

// primes.worker.js — runs on its own thread
self.addEventListener('message', (e) => {
  const { limit } = e.data;
  let count = 0;
  for (let n = 2; n < limit; n++) {
    let prime = true;
    for (let d = 2; d * d <= n; d++) {
      if (n % d === 0) { prime = false; break; }
    }
    if (prime) count++;
  }
  self.postMessage({ count }); // send the result back
});

Web Workers are ideal for image filtering, parsing large files, cryptography, or any CPU-bound loop. Their cousin, the Service Worker, is a specialised worker that sits between your page and the network to enable offline support and push notifications — a topic worth a lesson of its own.

Emerging APIs

The platform keeps growing. These are newer and less universally supported — always feature-detect and provide a fallback before relying on them:

A tidy way to survey what the current browser supports is to build a capabilities map — the exact idea behind this lesson's exercise:

const capabilities = {
  geolocation:   'geolocation' in navigator,
  webWorkers:    typeof Worker !== 'undefined',
  serviceWorker: 'serviceWorker' in navigator,
  webShare:      'share' in navigator,
  bluetooth:     'bluetooth' in navigator,
  fileSystem:    'showOpenFilePicker' in window,
  webGPU:        'gpu' in navigator
};
console.table(capabilities);

Best Practices

// Distinguishing failure modes when calling a network API
async function loadData(url) {
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    if (err instanceof TypeError) console.error('Network/offline error', err);
    else console.error('Request failed', err);
    return null; // fall back gracefully
  }
}

Hands-on Exercise

const caps = {
  Geolocation:    'geolocation' in navigator,
  'Web Workers':  typeof Worker !== 'undefined',
  'Service Worker':'serviceWorker' in navigator,
  'Web Share':    'share' in navigator,
  Clipboard:      'clipboard' in navigator,
  'File System':  'showOpenFilePicker' in window
};

const report = document.querySelector('#report');
for (const [name, supported] of Object.entries(caps)) {
  const li = document.createElement('li');
  li.textContent = `${supported ? '✅' : '❌'} ${name}`;
  report.appendChild(li);
}

document.querySelector('#share').addEventListener('click', async () => {
  const data = { title: document.title, url: location.href };
  if (navigator.share) {
    try { await navigator.share(data); } catch { /* user cancelled */ }
  } else if (navigator.clipboard) {
    await navigator.clipboard.writeText(location.href);
    alert('Link copied to clipboard!');
  }
});

Summary & Quiz

📚 Further Reading

• MDN — Web APIs index
• Can I Use — support tables
• What Web Can Do Today
• web.dev — Learn (capabilities & PWAs)

🚀 What's Next?

We touched the navigator object throughout this tour. Next we'll zoom into two of the most everyday browser objects — Navigator and Location — to read browser and connection info and to inspect and manipulate the URL.