Add managed catalog sync and player UX improvements

2026-04-29 13:49:16 +02:00
parent b866845b6a
commit c8f8c76e8a
21 changed files with 71429 additions and 148 deletions
--- a/public/.htaccess
+++ b/public/.htaccess
@@ -0,0 +1,6 @@
+Options -Indexes
+
+RewriteEngine On
+
+# Route the JSON-looking URL to the PHP endpoint
+RewriteRule ^api/managed-stations\.json$ api/managed-stations.php [L]
--- a/public/api/managed-stations.php
+++ b/public/api/managed-stations.php
@@ -0,0 +1,42 @@
+<?php
+/**
+ * Managed catalog API endpoint.
+ * Served at /api/managed-stations.json via .htaccess rewrite.
+ * Returns the same JSON envelope as the Node backend: { schemaVersion, updatedAt, stations }.
+ */
+
+header('Content-Type: application/json; charset=utf-8');
+header('Cache-Control: no-cache');
+
+$catalogPath = __DIR__ . '/../stations.json';
+
+if (!is_file($catalogPath)) {
+    http_response_code(404);
+    echo json_encode(['error' => 'Catalog not found']);
+    exit;
+}
+
+$raw = file_get_contents($catalogPath);
+if ($raw === false) {
+    http_response_code(500);
+    echo json_encode(['error' => 'Failed to read catalog']);
+    exit;
+}
+
+$data = json_decode($raw, true);
+if ($data === null) {
+    http_response_code(500);
+    echo json_encode(['error' => 'Invalid catalog JSON']);
+    exit;
+}
+
+// Accept both plain array and already-enveloped format
+$stations = isset($data['stations']) ? $data['stations'] : $data;
+
+$envelope = [
+    'schemaVersion' => 1,
+    'updatedAt'     => date('c', filemtime($catalogPath)),
+    'stations'      => $stations,
+];
+
+echo json_encode($envelope, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
--- a/public/data/radio-stations-sync.json
+++ b/public/data/radio-stations-sync.json
--- a/public/stations.json
+++ b/public/stations.json
@@ -315,6 +315,29 @@
      "lastSongs": "https://data.radio.si/api/lastsongsxml/toti/json"
    }
  },
+  {
+    "id": "MurskiVal",
+    "name": "Radio Murski Val",
+    "slogan": "",
+    "category": "Regional",
+    "country": "SI",
+    "language": "sl",
+    "region": "Pomurje",
+    "tags": [
+      "regional",
+      "pomurje",
+      "murski-val"
+    ],
+    "website": "https://murskival.si/",
+    "enabled": true,
+    "assets": {
+      "logo": ""
+    },
+    "streams": {
+      "audio": "https://stream.murskival.si/"
+    },
+    "metadata": {}
+  },
  {
    "id": "Salomon",
    "name": "Radio Salomon",
@@ -1692,5 +1715,215 @@
      "audio": "https://stream.nextmedia.si/proxy/ekspres1?mp=/stream"
    },
    "metadata": {}
+  },
+  {
+    "id": "radio-student",
+    "name": "Radio Študent",
+    "slogan": "",
+    "category": "Alternative",
+    "country": "SI",
+    "language": "sl",
+    "region": "National",
+    "tags": ["student", "alternative", "slovenija"],
+    "website": "https://radiostudent.si/",
+    "enabled": true,
+    "assets": { "logo": "" },
+    "streams": { "audio": "https://kruljo.radiostudent.si:8001/test.ogg?ck=1777460320120" },
+    "metadata": {}
+  },
+  {
+    "id": "stajerskival",
+    "name": "Štajerski val",
+    "slogan": "",
+    "category": "Pop",
+    "country": "SI",
+    "language": "sl",
+    "region": "Regional",
+    "tags": ["stajerskival", "stajerska", "slovenija"],
+    "website": "https://www.stajerskival.si",
+    "enabled": true,
+    "assets": { "logo": "" },
+    "streams": { "audio": "https://stream.stajerskival.si:8443//;stream.mp3" },
+    "metadata": {}
+  },
+  {
+    "id": "radio-rogla",
+    "name": "Radio Rogla",
+    "slogan": "",
+    "category": "Pop",
+    "country": "SI",
+    "language": "sl",
+    "region": "Regional",
+    "tags": ["rogla", "slovenija"],
+    "website": "https://www.radiorogla.si/",
+    "enabled": true,
+    "assets": { "logo": "" },
+    "streams": { "audio": "http://193.105.67.24:8010/;" },
+    "metadata": {}
+  },
+  {
+    "id": "radio-94",
+    "name": "Radio 94",
+    "slogan": "",
+    "category": "Pop",
+    "country": "SI",
+    "language": "sl",
+    "region": "Regional",
+    "tags": ["radio94", "slovenija"],
+    "website": "https://www.radio94.si/",
+    "enabled": true,
+    "assets": { "logo": "" },
+    "streams": { "audio": "http://77.38.12.198:8000/radio94" },
+    "metadata": {}
+  },
+  {
+    "id": "radio-sora",
+    "name": "Radio Sora",
+    "slogan": "",
+    "category": "Pop",
+    "country": "SI",
+    "language": "sl",
+    "region": "Regional",
+    "tags": ["sora", "slovenija"],
+    "website": "https://www.radio-sora.si/",
+    "enabled": true,
+    "assets": { "logo": "" },
+    "streams": { "audio": "https://stream.radio-sora.si/stream_glasba.php?bla=177746" },
+    "metadata": {}
+  },
+  {
+    "id": "primorskival",
+    "name": "Primorski Val",
+    "slogan": "",
+    "category": "Pop",
+    "country": "SI",
+    "language": "sl",
+    "region": "Regional",
+    "tags": ["primorska", "val", "slovenija"],
+    "website": "http://www.primorskival.si/",
+    "enabled": true,
+    "assets": { "logo": "" },
+    "streams": { "audio": "https://altair.streamerr.co/stream/primorskival" },
+    "metadata": {}
+  },
+  {
+    "id": "rockradio-classics",
+    "name": "Rock Radio Classics",
+    "slogan": "",
+    "category": "Rock",
+    "country": "SI",
+    "language": "sl",
+    "region": "National",
+    "tags": ["rock", "classics", "slovenija"],
+    "website": "https://www.rockradio.si/",
+    "enabled": true,
+    "assets": { "logo": "" },
+    "streams": { "audio": "https://stream.nextmedia.si/proxy/rocks_3?mp=/stream" },
+    "metadata": {}
+  },
+  {
+    "id": "rockradio-hardandheavy",
+    "name": "Rock Radio Hard & Heavy",
+    "slogan": "",
+    "category": "Rock",
+    "country": "SI",
+    "language": "sl",
+    "region": "National",
+    "tags": ["rock", "hard", "heavy", "metal", "slovenija"],
+    "website": "https://www.rockradio.si/",
+    "enabled": true,
+    "assets": { "logo": "" },
+    "streams": { "audio": "https://stream.nextmedia.si/proxy/rocks_2?mp=/stream" },
+    "metadata": {}
+  },
+  {
+    "id": "rockradio-bestballads",
+    "name": "Rock Radio Best Ballads",
+    "slogan": "",
+    "category": "Rock",
+    "country": "SI",
+    "language": "sl",
+    "region": "National",
+    "tags": ["rock", "ballads", "slovenija"],
+    "website": "https://www.rockradio.si/",
+    "enabled": true,
+    "assets": { "logo": "" },
+    "streams": { "audio": "https://stream.nextmedia.si/proxy/rocks_1?mp=/stream" },
+    "metadata": {}
+  },
+  {
+    "id": "rockradio",
+    "name": "Rock Radio",
+    "slogan": "",
+    "category": "Rock",
+    "country": "SI",
+    "language": "sl",
+    "region": "National",
+    "tags": ["rock", "slovenija"],
+    "website": "https://www.rockradio.si/",
+    "enabled": true,
+    "assets": { "logo": "" },
+    "streams": { "audio": "https://stream.nextmedia.si/proxy/rockr2_2?mp=/rock?uid=rrweb;" },
+    "metadata": {}
+  },
+  {
+    "id": "radio-gorenc",
+    "name": "Radio Gorenc",
+    "slogan": "",
+    "category": "Pop",
+    "country": "SI",
+    "language": "sl",
+    "region": "Regional",
+    "tags": ["gorenc", "gorenjska", "slovenija"],
+    "website": "https://www.radiogorenc.si/",
+    "enabled": true,
+    "assets": { "logo": "" },
+    "streams": { "audio": "https://stream.radiogorenc.si:8001/radiogorenc.mp3" },
+    "metadata": {}
+  },
+  {
+    "id": "radio-enter",
+    "name": "Radio Enter",
+    "slogan": "",
+    "category": "Pop",
+    "country": "SI",
+    "language": "sl",
+    "region": "National",
+    "tags": ["enter", "slovenija"],
+    "website": "https://enter.radio/",
+    "enabled": true,
+    "assets": { "logo": "" },
+    "streams": { "audio": "https://stream2.nextmedia.si/hls/ent/live.m3u8?sid=1777453580534156964" },
+    "metadata": {}
+  },
+  {
+    "id": "juboks-radio",
+    "name": "JUBoks Radio",
+    "slogan": "",
+    "category": "Pop",
+    "country": "SI",
+    "language": "sl",
+    "region": "National",
+    "tags": ["juboks", "slovenija"],
+    "website": "https://www.juboks.si/",
+    "enabled": true,
+    "assets": { "logo": "" },
+    "streams": { "audio": "https://stream2.nextmedia.si/hls/jub/live.m3u8?sid=1777461366421238395" },
+    "metadata": {}
+  },
+  {
+    "id": "radio-frajer",
+    "name": "Radio Frajer",
+    "slogan": "",
+    "category": "Pop",
+    "country": "SI",
+    "language": "sl",
+    "region": "National",
+    "tags": ["frajer", "slovenija"],
+    "website": "https://radiofrajer.si/",
+    "enabled": true,
+    "assets": { "logo": "" },
+    "streams": { "audio": "https://stream2.nextmedia.si/hls/frj/live.m3u8?sid=1777461467294078340" },
+    "metadata": {}
  }
 ]
--- a/public/sw.js
+++ b/public/sw.js
@@ -3,13 +3,81 @@
 //
 // This value is rewritten automatically before each build so deployed clients
 // refresh to the newest shell and cached assets.
-const CACHE_NAME = 'radioplayer-pwa-v5-1777404493334';
+const CACHE_NAME = 'radioplayer-pwa-v5-1777463324180';
+const STATION_SYNC_CACHE_NAME = 'radioplayer-station-sync-v1';
+const MANAGED_CATALOG_CACHE_NAME = 'radioplayer-managed-catalog-v1';
+const RADIO_BROWSER_API_ENDPOINT = 'https://de1.api.radio-browser.info/json/stations/search';
+const STATION_SYNC_TAG = 'radio-stations-refresh';
+const STATION_PERIODIC_SYNC_TAG = 'radio-stations-periodic-refresh';
+const MANAGED_CATALOG_PERIODIC_SYNC_TAG = 'radioplayer-managed-catalog-refresh';
+const STATION_SYNC_HEADERS = {
+  'content-type': 'application/json; charset=utf-8',
+};
+const MANAGED_CATALOG_SOURCE_HEADER = 'x-radioplayer-managed-source';
+
+const RADIO_COUNTRIES = [
+  { name: 'Austria', code: 'AT' },
+  { name: 'Belgium', code: 'BE' },
+  { name: 'Bulgaria', code: 'BG' },
+  { name: 'Cyprus', code: 'CY' },
+  { name: 'Czechia', code: 'CZ' },
+  { name: 'Denmark', code: 'DK' },
+  { name: 'Estonia', code: 'EE' },
+  { name: 'Finland', code: 'FI' },
+  { name: 'France', code: 'FR' },
+  { name: 'Germany', code: 'DE' },
+  { name: 'Greece', code: 'GR' },
+  { name: 'Russia', code: 'RU' },
+  { name: 'Hungary', code: 'HU' },
+  { name: 'Ireland', code: 'IE' },
+  { name: 'Italy', code: 'IT' },
+  { name: 'Japan', code: 'JP' },
+  { name: 'Latvia', code: 'LV' },
+  { name: 'Lithuania', code: 'LT' },
+  { name: 'Luxembourg', code: 'LU' },
+  { name: 'Malta', code: 'MT' },
+  { name: 'Mexico', code: 'MX' },
+  { name: 'Netherlands', code: 'NL' },
+  { name: 'Poland', code: 'PL' },
+  { name: 'Brazil', code: 'BR' },
+  { name: 'Portugal', code: 'PT' },
+  { name: 'Romania', code: 'RO' },
+  { name: 'Croatia', code: 'HR' },
+  { name: 'Serbia', code: 'RS' },
+  { name: 'Montenegro', code: 'ME' },
+  { name: 'Bosnia & Herzegovina', code: 'BA' },
+  { name: 'Argentina', code: 'AR' },
+  { name: 'United Kingdom', code: 'GB' },
+  { name: 'Slovenia', code: 'SI' },
+  { name: 'Slovakia', code: 'SK' },
+  { name: 'Spain', code: 'ES' },
+  { name: 'USA', code: 'US' },
+  { name: 'Canada', code: 'CA' },
+  { name: 'Australia', code: 'AU' },
+  { name: 'China', code: 'CN' },
+  { name: 'Sweden', code: 'SE' },
+  { name: 'Switzerland', code: 'CH' },
+  { name: 'Turkey', code: 'TR' },
+  { name: 'Ukraine', code: 'UA' },
+];
+const MAX_TAGS = 12;
+const OBVIOUSLY_UNSUPPORTED_CODECS = new Set([
+  'wma',
+  'wmav2',
+  'asf',
+  'ra',
+  'rm',
+  'ape',
+  'alac',
+  'amr',
+]);

 const CORE_ASSETS = [
  './',
  'index.html',
  'privacy.html',
  'data/radio-stations.json',
+  'data/radio-stations-sync.json',
  'stations.json',
  'manifest.json',
  'images/radio-placeholder.svg',
@@ -20,10 +88,281 @@ const CORE_ASSETS = [
 const CORE_PATHS = new Set(CORE_ASSETS.map((p) => new URL(p, self.registration.scope).pathname));
 const DATA_PATHS = new Set([
  new URL('data/radio-stations.json', self.registration.scope).pathname,
+  new URL('data/radio-stations-sync.json', self.registration.scope).pathname,
  new URL('stations.json', self.registration.scope).pathname,
  new URL('manifest.json', self.registration.scope).pathname,
 ]);
 const IMAGE_FALLBACK_PATH = new URL('images/radio-placeholder.svg', self.registration.scope).pathname;
+const SYNC_CATALOG_URL = new URL('data/radio-stations-sync.json', self.registration.scope).href;
+const SYNC_CATALOG_PATH = new URL('data/radio-stations-sync.json', self.registration.scope).pathname;
+const SYNC_META_URL = new URL('data/radio-stations-sync-meta.json', self.registration.scope).href;
+const SYNC_COUNTRY_PREFIX_PATH = new URL('data/countries/', self.registration.scope).pathname;
+const BUNDLED_MANAGED_CATALOG_URL = new URL('stations.json', self.registration.scope).href;
+const MANAGED_CATALOG_PATH = new URL('api/managed-stations.json', self.registration.scope).pathname;
+
+function trimToNull(value) {
+  if (typeof value !== 'string') return null;
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : null;
+}
+
+function toNumber(value) {
+  const parsed = typeof value === 'number' ? value : Number(value ?? 0);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+function toNullableNumber(value) {
+  const parsed = typeof value === 'number' ? value : Number(value ?? NaN);
+  return Number.isFinite(parsed) && parsed >= 0 ? parsed : null;
+}
+
+function parseTags(tags) {
+  if (typeof tags !== 'string' || tags.trim().length === 0) return [];
+
+  const seen = new Set();
+  const parsed = [];
+
+  for (const rawTag of tags.split(',')) {
+    const tag = rawTag.trim();
+    if (!tag) continue;
+    const normalizedTag = tag.toLowerCase();
+    if (seen.has(normalizedTag)) continue;
+    seen.add(normalizedTag);
+    parsed.push(tag);
+    if (parsed.length >= MAX_TAGS) break;
+  }
+
+  return parsed;
+}
+
+function isHttpsUrl(value) {
+  if (!value) return false;
+
+  try {
+    const url = new URL(value);
+    return url.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+
+function normalizeRadioBrowserStation(station, countryName) {
+  const stationUuid = trimToNull(station?.stationuuid);
+  if (!stationUuid) return null;
+
+  const name = trimToNull(station?.name);
+  if (!name) return null;
+
+  const streamUrl = trimToNull(station?.url_resolved) ?? trimToNull(station?.url);
+  if (!isHttpsUrl(streamUrl)) return null;
+
+  const codec = trimToNull(station?.codec);
+  if (codec && OBVIOUSLY_UNSUPPORTED_CODECS.has(codec.toLowerCase())) {
+    return null;
+  }
+
+  return {
+    id: stationUuid,
+    name,
+    country: trimToNull(station?.country) ?? countryName,
+    countryCode: trimToNull(station?.countrycode) ?? '',
+    language: trimToNull(station?.language),
+    tags: parseTags(station?.tags),
+    codec,
+    bitrate: toNullableNumber(station?.bitrate),
+    streamUrl,
+    homepage: trimToNull(station?.homepage),
+    logoUrl: trimToNull(station?.favicon),
+    votes: toNumber(station?.votes),
+    clickcount: toNumber(station?.clickcount),
+    source: 'radio-browser',
+    sourceStationUuid: stationUuid,
+  };
+}
+
+function getCountryCatalogUrl(countryCode) {
+  return new URL(`data/countries/${String(countryCode || '').toLowerCase()}.json`, self.registration.scope).href;
+}
+
+async function writeJsonToCache(cache, requestUrl, payload) {
+  await cache.put(requestUrl, new Response(JSON.stringify(payload), {
+    headers: STATION_SYNC_HEADERS,
+  }));
+}
+
+async function fetchCountryStations(country) {
+  const url = new URL(RADIO_BROWSER_API_ENDPOINT);
+  url.search = new URLSearchParams({
+    countrycode: country.code,
+    hidebroken: 'true',
+    is_https: 'true',
+    order: 'clickcount',
+    reverse: 'true',
+    limit: '100',
+  }).toString();
+
+  const response = await fetch(url, {
+    cache: 'no-store',
+    headers: {
+      accept: 'application/json',
+    },
+    mode: 'cors',
+  });
+
+  if (!response.ok) {
+    throw new Error(`${response.status} ${response.statusText}`);
+  }
+
+  const payload = await response.json();
+  if (!Array.isArray(payload)) {
+    throw new Error('Expected an array response from Radio Browser.');
+  }
+
+  return payload
+    .map((station) => normalizeRadioBrowserStation(station, country.name))
+    .filter(Boolean);
+}
+
+async function syncRadioStations(reason = 'sync') {
+  const syncCache = await caches.open(STATION_SYNC_CACHE_NAME);
+  const aggregatedStations = [];
+  const seenStationIds = new Set();
+  const seenStreamUrls = new Set();
+  const failedCountries = [];
+  let syncedCountries = 0;
+
+  for (const country of RADIO_COUNTRIES) {
+    try {
+      const stations = await fetchCountryStations(country);
+      await writeJsonToCache(syncCache, getCountryCatalogUrl(country.code), stations);
+
+      for (const station of stations) {
+        if (seenStationIds.has(station.id)) continue;
+        if (seenStreamUrls.has(station.streamUrl)) continue;
+
+        seenStationIds.add(station.id);
+        seenStreamUrls.add(station.streamUrl);
+        aggregatedStations.push(station);
+      }
+
+      syncedCountries += 1;
+    } catch (error) {
+      failedCountries.push(country.code);
+      console.debug(`[sw] Station sync failed for ${country.name} (${country.code})`, error);
+    }
+  }
+
+  aggregatedStations.sort((left, right) => {
+    const countryOrder = left.country.localeCompare(right.country, undefined, { sensitivity: 'base' });
+    if (countryOrder !== 0) return countryOrder;
+    if (right.clickcount !== left.clickcount) return right.clickcount - left.clickcount;
+    return left.name.localeCompare(right.name, undefined, { sensitivity: 'base' });
+  });
+
+  const meta = {
+    reason,
+    syncedAt: new Date().toISOString(),
+    countryCount: syncedCountries,
+    failedCountries,
+    stationCount: aggregatedStations.length,
+  };
+
+  if (aggregatedStations.length === 0) {
+    const existingCatalog = await syncCache.match(SYNC_CATALOG_URL);
+    if (existingCatalog) {
+      await writeJsonToCache(syncCache, SYNC_META_URL, {
+        ...meta,
+        reusedCachedCatalog: true,
+      });
+      return {
+        ...meta,
+        reusedCachedCatalog: true,
+      };
+    }
+
+    throw new Error('Station sync fetched no stations.');
+  }
+
+  await Promise.all([
+    writeJsonToCache(syncCache, SYNC_CATALOG_URL, aggregatedStations),
+    writeJsonToCache(syncCache, SYNC_META_URL, meta),
+  ]);
+
+  return meta;
+}
+
+async function respondWithSyncedCatalog(request) {
+  const syncCache = await caches.open(STATION_SYNC_CACHE_NAME);
+  const cached = await syncCache.match(request);
+  if (cached) return cached;
+
+  const bundled = await caches.match(new URL('data/radio-stations.json', self.registration.scope).href)
+    || await caches.match('data/radio-stations.json');
+
+  if (bundled) return bundled;
+
+  return fetch(new Request('data/radio-stations.json', { cache: 'reload' }));
+}
+
+async function respondWithSyncedCountryCatalog(request) {
+  const syncCache = await caches.open(STATION_SYNC_CACHE_NAME);
+  const cached = await syncCache.match(request);
+  if (cached) return cached;
+  return new Response('[]', {
+    headers: STATION_SYNC_HEADERS,
+    status: 200,
+  });
+}
+
+async function refreshManagedCatalogCache() {
+  const managedCatalogCache = await caches.open(MANAGED_CATALOG_CACHE_NAME);
+  const url = new URL('api/managed-stations.json', self.registration.scope).href;
+  try {
+    const response = await fetch(url, { cache: 'no-store' });
+    if (isCacheableResponse(response)) {
+      await managedCatalogCache.put(url, response);
+    }
+  } catch {
+    // Network unavailable — keep existing cache as-is.
+  }
+}
+
+async function respondWithManagedCatalog(request) {
+  const managedCatalogCache = await caches.open(MANAGED_CATALOG_CACHE_NAME);
+
+  try {
+    const networkResponse = await fetch(request);
+    if (isCacheableResponse(networkResponse)) {
+      await managedCatalogCache.put(request, networkResponse.clone());
+      return withManagedCatalogSource(networkResponse, 'remote');
+    }
+  } catch {
+    // Fall back to the last good remote response or bundled catalog below.
+  }
+
+  const cachedRemoteResponse = await managedCatalogCache.match(request);
+  if (cachedRemoteResponse) {
+    return withManagedCatalogSource(cachedRemoteResponse, 'cached-remote');
+  }
+
+  const bundledFallback = await caches.match(BUNDLED_MANAGED_CATALOG_URL);
+  if (bundledFallback) {
+    return withManagedCatalogSource(bundledFallback, 'bundled');
+  }
+
+  return withManagedCatalogSource(await fetch(BUNDLED_MANAGED_CATALOG_URL), 'bundled');
+}
+
+function withManagedCatalogSource(response, source) {
+  const headers = new Headers(response.headers);
+  headers.set(MANAGED_CATALOG_SOURCE_HEADER, source);
+
+  return new Response(response.body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers,
+  });
+}

 function isCacheableResponse(response) {
  return Boolean(response && response.ok && response.type === 'basic');
@@ -124,12 +463,30 @@ self.addEventListener('activate', (event) => {
    Promise.all([
      self.clients.claim(),
      caches.keys().then((keys) => Promise.all(
-        keys.map((k) => { if (k !== CACHE_NAME) return caches.delete(k); return null; })
+        keys.map((k) => {
+          if (k !== CACHE_NAME && k !== STATION_SYNC_CACHE_NAME && k !== MANAGED_CATALOG_CACHE_NAME) return caches.delete(k);
+          return null;
+        })
      )),
    ])
  );
 });

+self.addEventListener('sync', (event) => {
+  if (event.tag !== STATION_SYNC_TAG) return;
+  event.waitUntil(syncRadioStations('background-sync'));
+});
+
+self.addEventListener('periodicsync', (event) => {
+  if (event.tag === STATION_PERIODIC_SYNC_TAG) {
+    event.waitUntil(syncRadioStations('periodic-sync'));
+    return;
+  }
+  if (event.tag === MANAGED_CATALOG_PERIODIC_SYNC_TAG) {
+    event.waitUntil(refreshManagedCatalogCache());
+  }
+});
+
 self.addEventListener('fetch', (event) => {
  // Only handle GET requests
  if (event.request.method !== 'GET') return;
@@ -153,6 +510,21 @@ self.addEventListener('fetch', (event) => {
    return;
  }

+  if (url.pathname === SYNC_CATALOG_PATH) {
+    event.respondWith(respondWithSyncedCatalog(event.request));
+    return;
+  }
+
+  if (url.pathname === MANAGED_CATALOG_PATH) {
+    event.respondWith(respondWithManagedCatalog(event.request));
+    return;
+  }
+
+  if (url.pathname.startsWith(SYNC_COUNTRY_PREFIX_PATH) && url.pathname.endsWith('.json')) {
+    event.respondWith(respondWithSyncedCountryCatalog(event.request));
+    return;
+  }
+
  // Network-first for navigations and core assets to prevent "old UI" issues.
  if (isHtmlNavigation) {
    event.respondWith(