Advanced Browser APIs — Series 2

Preview — 3 of 10 questions

What is logged?

javascript

const controller = new AbortController();
const { signal } = controller;

async function loadData() {
  try {
    await fetch('/api/data', { signal });
    console.log('Fetch completed');
  } catch (err) {
    console.log('Caught:', err.name);
  }
}

loadData();
controller.abort();

A"Fetch completed"

B"Caught: TypeError"

C"Caught: AbortError"

DNothing is logged — abort() silently cancels without rejecting anything

Which statement correctly describes the behavior of this Service Worker code?

javascript

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => {
      return cached || fetch(event.request);
    })
  );
});

Aevent.respondWith() tells the browser to use the given Promise's resolved Response as the reply to the network request — here, serving a cached response if one exists, otherwise falling back to a real network fetch.

BIt always fetches from the network, ignoring the cache entirely, since caches.match runs asynchronously and its result is discarded.

CThis code causes every request to fail, because event.respondWith cannot accept a .then() chain, only a raw Response object.

Dcaches.match blocks the entire page until it returns, freezing the UI on every request.

Assuming Tab B's listener was already attached before Tab A calls postMessage, what happens?

javascript

// Tab A
const channelA = new BroadcastChannel('app-updates');
channelA.postMessage({ type: 'LOGOUT' });

// Tab B (a separate tab of the same origin, already listening)
const channelB = new BroadcastChannel('app-updates');
channelB.onmessage = (e) => {
  console.log('Tab B received:', e.data.type);
};

ATab A's own channelA also receives its own message and logs it too.

BNothing happens — BroadcastChannel only works within a single tab, not across tabs.

CA SecurityError is thrown, since cross-tab messaging is blocked by default.

D"Tab B received: LOGOUT" is logged in Tab B's console.

Answer all 10 questions (7 more), see explanations for every answer, and track your score.