Platform under construction

Browser APIs & BOM

Advanced

Workers, IndexedDB & Cache API

Workers, IndexedDB and Cache API support heavier browser applications: background work, structured storage and offline-capable caching.

const worker = new Worker("/worker.js", { type: "module" });

if ("caches" in window) {
  const cache = await caches.open("app-v1");
}

Browser APIs & BOM

Advanced browser APIs move work and data beyond simple page scripts.

Web Workers run JavaScript off the main thread. They are useful for CPU-heavy work that would otherwise freeze the interface.

IndexedDB stores larger structured data asynchronously in the browser. It is more capable than localStorage but more complex.

The Cache API stores Request and Response pairs and is commonly used with service workers for offline and performance strategies.

Web Worker

Runs JavaScript in a separate thread.

IndexedDB

Async structured browser database.

Cache API

Stores request/response pairs.

Service Worker

Network proxy layer for offline and caching strategies.

Examples

Browser APIs should be used with capability checks, permissions and fallbacks.

Feature-detect before using advanced APIs

if ("Worker" in window) {
  const worker = new Worker("/worker.js", { type: "module" });
}

Running heavy work on the main thread

for (let index = 0; index < 1_000_000_000; index += 1) {
  calculate(index);
}

// The interface freezes while this runs.

Code patterns

Reusable examples for quick reference.

These examples focus on practical browser APIs: URL state, storage, cookies, clipboard, permissions, observers and offline-capable platform tools.

Create worker

Move heavy work off the main thread.

const worker = new Worker("/worker.js", { type: "module" });
worker.postMessage({ type: "start" });

Receive worker message

Workers communicate by messages.

worker.addEventListener("message", event => {
  console.log(event.data);
});

Open cache

Cache API is promise-based.

const cache = await caches.open("app-v1");
await cache.add("/styles.css");

Feature detection

Advanced APIs need support checks.

if ("indexedDB" in window && "caches" in window) {
  enableOfflineFeatures();
}

Rules that matter

Treat the browser as a platform.

Browser APIs are powerful because they touch privacy, navigation, storage, permissions and performance. Use them deliberately.

Use workers for CPU-heavy work

Keep the main thread responsive.

Use IndexedDB for larger structured storage

Do not force large data into localStorage.

Use Cache API for request/response caching

It pairs naturally with service workers.

Version offline caches

Old cached assets need update strategies.

Feature-detect advanced APIs

Support varies by browser and context.

Plan data lifecycle

Offline data needs cleanup and migration.

Production thinking

A strong browser API layer makes features feel integrated with the platform instead of bolted onto the page.

Why does this matter?

Advanced browser apps need background work, durable storage and reliable caching to feel native-level fast.

Accessibility

Background work should not block input, focus or visible feedback.

Production note

Production offline features need versioning, cache invalidation and clear fallback behavior.

SEO note

Service workers and caches should not serve stale or broken content to users or crawlers.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Write pseudocode for a worker message.
Add serviceWorker support to the output.
Explain when IndexedDB is better than localStorage.

Practice assignment

Do this before moving to the next topic.

Feature-detect Worker.
Feature-detect IndexedDB.
Describe one Cache API use case.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Workers, IndexedDB & Cache API.