Modern Web APIs: URLSearchParams, Streams, Fetch & Web Workers Architecture Runbook

// Construct canonical URL with safe base resolution
const endpoint = new URL('/api/v2/products', 'https://api.example.com');

// Safe, automatic percent-encoding via URLSearchParams
endpoint.searchParams.set('category', 'audio & video'); // Encodes '&' to '%26'
endpoint.searchParams.set('sort', 'price_desc');
endpoint.searchParams.set('page', '1');

// Handling multiple values for the same key (e.g. filter tags)
const tags = ['bluetooth', 'noise-cancelling', 'waterproof'];
tags.forEach(tag => endpoint.searchParams.append('tag', tag));
// Resulting query: ?category=audio+%26+video&sort=price_desc&page=1&tag=bluetooth&tag=noise-cancelling&tag=waterproof

// Iterating and inspecting parameters
for (const [key, val] of endpoint.searchParams.entries()) {
  console.log(`${key}: ${val}`);
}

console.log(endpoint.toString());

Uses WHATWG URL and URLSearchParams to automatically handle percent-encoding, preventing injection bugs.

async function fetchWithTimeout(resource: string, options: RequestInit = {}, timeoutMs = 8000) {
  // Create an automated deadline signal
  const timeoutSignal = AbortSignal.timeout(timeoutMs);

  // Combine user-provided signal (e.g. component unmount) with timeout signal
  const combinedSignal = options.signal
    ? AbortSignal.any([options.signal, timeoutSignal])
    : timeoutSignal;

  try {
    const response = await fetch(resource, {
      ...options,
      signal: combinedSignal
    });

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

    return await response.json();
  } catch (err: any) {
    if (err.name === 'TimeoutError') {
      console.error(`Request to ${resource} timed out after ${timeoutMs}ms`);
    } else if (err.name === 'AbortError') {
      console.warn(`Request to ${resource} was explicitly aborted by user/client`);
    }
    throw err;
  }
}

Enforces hard request deadlines and combines multiple abort signals using AbortSignal.any().

async function streamNdjson(url: string, onRecord: (record: any) => void) {
  const response = await fetch(url);
  if (!response.body) throw new Error('Response body stream unavailable');

  // Pipe response bytes through a UTF-8 text decoder stream
  const textStream = response.body.pipeThrough(new TextDecoderStream());
  const reader = textStream.getReader();

  let leftover = '';

  while (true) {
    const { value, done } = await reader.read();
    if (done) break;

    const chunk = leftover + value;
    const lines = chunk.split('\n');
    // Save uncompleted line fragment for next read
    leftover = lines.pop() || '';

    for (const line of lines) {
      const trimmed = line.trim();
      if (trimmed) {
        onRecord(JSON.parse(trimmed));
      }
    }
  }

  if (leftover.trim()) {
    onRecord(JSON.parse(leftover.trim()));
  }
}

Pipes response bytes through TextDecoderStream, consuming streaming lines without loading the whole file into RAM.

// --- main-thread.ts ---
const worker = new Worker(new URL('./compute-worker.ts', import.meta.url), { type: 'module' });

// Allocate 32 MB binary buffer
const buffer = new ArrayBuffer(32 * 1024 * 1024);
const u8 = new Uint8Array(buffer);
crypto.getRandomValues(u8.subarray(0, 1024)); // sample data

// Zero-copy transfer: buffer ownership moves to worker instantly (0ms latency)
worker.postMessage({ buffer, action: 'PROCESS_HASH' }, [buffer]);
console.log('Main thread buffer byteLength after transfer:', buffer.byteLength); // 0 (detached!)

worker.onmessage = (e) => {
  console.log('Worker computation complete:', e.data.result);
};

// --- compute-worker.ts ---
self.onmessage = (e) => {
  const { buffer, action } = e.data;
  const view = new Uint8Array(buffer);
  
  // Perform intensive CPU calculations on background thread
  let checksum = 0;
  for (let i = 0; i < view.length; i++) {
    checksum = (checksum + view[i]) & 0xFFFFFFFF;
  }
  
  self.postMessage({ result: checksum });
};

Transfers 32MB ArrayBuffer to background Web Worker using Transferable Objects with zero memory copying.

// Initialize cross-tab event bus
const authChannel = new BroadcastChannel('auth_state');

// Listen for logout events originating from any open browser tab
authChannel.onmessage = (event) => {
  if (event.data.type === 'USER_LOGOUT') {
    window.location.href = '/login';
  }
};

// Mutual exclusion: ensure only ONE tab refreshes the OAuth session token
async function refreshAuthSessionToken() {
  if (!navigator.locks) {
    return performTokenRefresh(); // Fallback for older browsers
  }

  // Request an exclusive cross-tab lock named 'oauth_token_refresh'
  return await navigator.locks.request('oauth_token_refresh', { mode: 'exclusive' }, async (lock) => {
    console.log(`Acquired exclusive lock: ${lock.name}`);
    const newToken = await performTokenRefresh();
    
    // Notify all other open tabs about the updated session
    authChannel.postMessage({ type: 'TOKEN_REFRESHED', expiresAt: newToken.expiresAt });
    return newToken;
  });
}

Prevents race conditions across browser tabs using navigator.locks.request and BroadcastChannel.