Example: Category Catalog

A category catalog is the smallest useful product on top of PWARegistry.

Flow:

1. Fetch games that are ACTIVE.
2. For each listing, render name, icon, description.
3. On mobile, show narrow screenshots. On desktop, show wide screenshots.

Fetch

const listing = await fetch(
  "https://pwaregistry.org/api/v1/apps?category=games&status=active",
).then((r) => r.json());

Static equivalent: GET /registry/v1/categories/games.json.

Both return lightweight rows (id, name, domain, …). Load the full record when you render a detail page or a rich card:

async function loadGame(id) {
  return fetch(
    `https://pwaregistry.org/registry/v1/apps/${id}.json`,
  ).then((r) => r.json());
}

const game = await loadGame("example.com");
const name = game.application.name;
const icon = game.application.icons.primary?.src;
const description = game.application.description;
const shots = isMobile
  ? game.application.screenshots.narrow
  : game.application.screenshots.wide;

Replace games with any category from /registry/v1/categories.json: photo, productivity, utilities, and the rest of the W3C / MDN list.

If you later outgrow one-shot API calls, switch the same UI to the sync pattern. The card component does not change — only where the JSON comes from.