map-gl-offline 0.7.0 → 0.8.2

package/dist/idb-offline-sw.js

@@ -1,396 +1,349 @@
 /**
- * Service Worker for offline map tile serving.
+ * Offline Service Worker for offline map tile serving.
  *
- * Intercepts /__offline__/{downloadId}/{type}/{...path} requests and serves
- * resources from IndexedDB. This is needed for Mapbox GL JS v3 which does NOT
- * have addProtocol, so tile requests from web workers cannot be intercepted
- * via window.fetch override alone.
- *
- * Self-contained: uses raw IndexedDB API (no imports).
- *
- * DB: 'offline-map-db' v3
- * Stores: tiles, styles, sprites, glyphs
- * Tile key format: {styleId}:{sourceId}:{z}:{x}:{y}.{ext}
+ * Built from src/sw/offline-sw.ts by scripts/build-sw.mjs.
+ * DO NOT EDIT THIS FILE BY HAND — changes will be overwritten on next build.
+ * Edit src/sw/offline-sw.ts or src/sw/shared.ts instead.
  */
-
-const DB_NAME = 'offline-map-db';
-const OFFLINE_PREFIX = '/__offline__/';
-
-// In-memory cache: regionId -> { styleKey, timestamp }
-const regionToStyleCache = new Map();
-const CACHE_TTL_MS = 60000;
-
-// -----------------------------------------------------------
-// Install / Activate
-// -----------------------------------------------------------
-
-self.addEventListener('install', () => {
-  self.skipWaiting();
-});
-
-self.addEventListener('activate', (event) => {
-  event.waitUntil(self.clients.claim());
-});
-
-// -----------------------------------------------------------
-// IndexedDB helpers (raw API, no idb library)
-// -----------------------------------------------------------
-
-function openDatabase() {
-  return new Promise((resolve, reject) => {
-    // Open without specifying a version so we never trigger onupgradeneeded.
-    // The main application is responsible for creating/upgrading the DB schema.
-    // If the DB doesn't exist yet, this will create it at version 1 with no stores,
-    // but the SW should only run after the main app has initialised the DB.
-    const request = indexedDB.open(DB_NAME);
-    request.onsuccess = () => resolve(request.result);
-    request.onerror = () => reject(request.error);
-  });
-}
-
-function idbGet(db, storeName, key) {
-  return new Promise((resolve, reject) => {
-    const tx = db.transaction(storeName, 'readonly');
-    const store = tx.objectStore(storeName);
-    const req = store.get(key);
-    req.onsuccess = () => resolve(req.result || null);
-    req.onerror = () => reject(req.error);
-  });
-}
-
-function idbGetAll(db, storeName) {
-  return new Promise((resolve, reject) => {
-    const tx = db.transaction(storeName, 'readonly');
-    const store = tx.objectStore(storeName);
-    const req = store.getAll();
-    req.onsuccess = () => resolve(req.result || []);
-    req.onerror = () => reject(req.error);
-  });
-}
-
-// -----------------------------------------------------------
-// findStyleByRegionId - search all styles for matching region
-// -----------------------------------------------------------
-
-async function findStyleByRegionId(db, regionId) {
-  // Check cache
-  const cached = regionToStyleCache.get(regionId);
-  if (cached && Date.now() - cached.timestamp < CACHE_TTL_MS) {
-    return cached.styleEntry;
+"use strict";
+(() => {
+  // src/sw/shared.ts
+  var OFFLINE_PREFIX = "/__offline__/";
+  var DB_NAME = "offline-map-db";
+  function makeTileKey(x, y, z, styleId, sourceId, ext) {
+    return `${styleId}:${sourceId}:${z}:${x}:${y}.${ext}`;
   }
-
-  try {
-    const allStyles = await idbGetAll(db, 'styles');
-    for (const styleEntry of allStyles) {
-      if (styleEntry.regions && Array.isArray(styleEntry.regions)) {
-        const hasRegion = styleEntry.regions.some(
-          (r) => r.regionId === regionId || r.id === regionId
-        );
-        if (hasRegion) {
-          regionToStyleCache.set(regionId, { styleEntry, timestamp: Date.now() });
-          return styleEntry;
+  var TILE_FALLBACK_EXTENSIONS = ["pbf", "mvt", "png", "jpg", "webp", "glb"];
+  function tileFallbackExtensions(requested) {
+    return TILE_FALLBACK_EXTENSIONS.filter((e) => e !== requested);
+  }
+  function parseTileYExt(yExt) {
+    const match = yExt.match(/^(\d+)\.([\w.]+?)(?:[?#]|$)/);
+    if (!match) return null;
+    const y = parseInt(match[1], 10);
+    if (Number.isNaN(y)) return null;
+    return { y, ext: match[2] };
+  }
+  function findStyleByRegionIdIn(styles, regionId) {
+    for (const entry of styles) {
+      const regions = entry.regions;
+      if (!Array.isArray(regions)) continue;
+      for (const r of regions) {
+        if (r?.regionId === regionId || r?.id === regionId) {
+          return entry;
         }
       }
     }
-    // Cache negative result
-    regionToStyleCache.set(regionId, { styleEntry: null, timestamp: Date.now() });
-    return null;
-  } catch (err) {
-    console.warn('[SW] Error searching for style by region ID:', regionId, err);
     return null;
   }
-}
-
-// -----------------------------------------------------------
-// Response builders
-// -----------------------------------------------------------
-
-function createTileKey(x, y, z, styleId, sourceId, ext) {
-  return `${styleId}:${sourceId}:${z}:${x}:${y}.${ext}`;
-}
-
-async function decompressGzip(data) {
-  try {
-    const ds = new DecompressionStream('gzip');
-    const stream = new Response(data).body.pipeThrough(ds);
-    return await new Response(stream).arrayBuffer();
-  } catch (err) {
-    console.warn('[SW] Gzip decompression failed:', err);
-    return data;
+  function parseGlyphPath(decodedPath) {
+    const pathParts = decodedPath.split("/");
+    const fontstackPart = pathParts[0] ?? "";
+    const rangePart = pathParts[1] || "0-255.pbf";
+    const fontstacks = fontstackPart.split(",").map((f) => f.trim()).filter(Boolean);
+    return { fontstacks, rangePart };
   }
-}
-
-async function buildTileResponse(resource) {
-  const headers = {
-    'Access-Control-Allow-Origin': '*',
-    'Cache-Control': 'public, max-age=31536000',
-  };
-
-  if (resource.contentType) {
-    headers['Content-Type'] = resource.contentType;
-  } else if (resource.type === 'vector') {
-    headers['Content-Type'] = 'application/vnd.mapbox-vector-tile';
+  function glyphCandidateKeys(actualStyleId, downloadId, fontstack, rangePart) {
+    const glyphPath = `${fontstack}/${rangePart}`;
+    const normalizedPath = glyphPath.endsWith(".pbf") ? glyphPath : `${glyphPath}.pbf`;
+    return dedupe([
+      `${actualStyleId}::${normalizedPath}`,
+      `${actualStyleId}::${glyphPath}`,
+      `${downloadId}::${normalizedPath}`,
+      `${downloadId}::${glyphPath}`,
+      normalizedPath,
+      glyphPath
+    ]);
   }
-
-  let finalData = resource.data;
-
-  // Check for gzip and decompress
-  const view = new Uint8Array(resource.data);
-  const isGzipped = view.length >= 2 && view[0] === 0x1f && view[1] === 0x8b;
-
-  if (isGzipped && resource.type === 'vector') {
-    finalData = await decompressGzip(resource.data);
+  function spriteCandidateKeys(actualStyleId, downloadId, decodedPath) {
+    const stripExt = decodedPath.replace(/\.(json|png)$/i, "");
+    return dedupe([
+      `${actualStyleId}::${decodedPath}`,
+      `${actualStyleId}:${decodedPath}`,
+      `${actualStyleId}::${stripExt}`,
+      `${actualStyleId}:${stripExt}`,
+      `${downloadId}::${decodedPath}`,
+      `${downloadId}:${decodedPath}`,
+      `${downloadId}::${stripExt}`,
+      `${downloadId}:${stripExt}`,
+      decodedPath
+    ]);
   }
-
-  if (resource.contentEncoding && resource.contentEncoding !== 'gzip') {
-    headers['Content-Encoding'] = resource.contentEncoding;
+  function modelCandidateKeys(actualStyleId, downloadId, decodedPath) {
+    return dedupe([
+      `${actualStyleId}::model::${decodedPath}`,
+      `${downloadId}::model::${decodedPath}`
+    ]);
   }
-
-  return new Response(finalData, { status: 200, statusText: 'OK', headers });
-}
-
-function deriveTileExtension(tiles) {
-  if (Array.isArray(tiles) && tiles.length > 0 && typeof tiles[0] === 'string') {
-    const match = tiles[0].match(/\.([\w]+)(?:\?|$)/i);
-    if (match) return match[1];
+  function matchTileJsonSource(sources, decodedPath) {
+    const asConfig = (v) => v && typeof v === "object" ? v : null;
+    if (decodedPath in sources) {
+      const config = asConfig(sources[decodedPath]);
+      if (config) return { sourceId: decodedPath, config };
+    }
+    for (const [sourceId, raw] of Object.entries(sources)) {
+      const config = asConfig(raw);
+      if (!config) continue;
+      const url = typeof config.url === "string" ? config.url : void 0;
+      const original = typeof config.__originalTilesetUrl === "string" ? config.__originalTilesetUrl : void 0;
+      if (url === decodedPath || original === decodedPath) {
+        return { sourceId, config };
+      }
+    }
+    return null;
   }
-  return 'pbf';
-}
-
-// -----------------------------------------------------------
-// Resource handlers
-// -----------------------------------------------------------
-
-async function handleTile(db, downloadId, rest) {
-  const styleEntry = await findStyleByRegionId(db, downloadId);
-  const actualStyleId = styleEntry ? styleEntry.key : downloadId;
-
-  // rest = ['sourceKey', 'z', 'x', 'y.ext']
-  if (rest.length !== 4) {
-    return new Response('Invalid tile path', { status: 400 });
+  function buildOfflineTileJson(sourceConfig, downloadId, sourceId, extension, tileUrlScheme, origin) {
+    const base = tileUrlScheme === "idb" ? `idb://${downloadId}/tile/${sourceId}/{z}/{x}/{y}.${extension}` : `${origin ?? ""}${OFFLINE_PREFIX}${downloadId}/tile/${sourceId}/{z}/{x}/{y}.${extension}`;
+    const tileJson = {
+      tilejson: typeof sourceConfig.tilejson === "string" ? sourceConfig.tilejson : "2.2.0",
+      name: sourceConfig.name ?? sourceId,
+      tiles: [base],
+      minzoom: typeof sourceConfig.minzoom === "number" ? sourceConfig.minzoom : 0,
+      maxzoom: typeof sourceConfig.maxzoom === "number" ? sourceConfig.maxzoom : 22
+    };
+    const copyable = [
+      "bounds",
+      "center",
+      "vector_layers",
+      "scheme",
+      "attribution",
+      "encoding",
+      "format",
+      "grids",
+      "data",
+      "template",
+      "version"
+    ];
+    for (const field of copyable) {
+      if (field in sourceConfig && sourceConfig[field] !== void 0) {
+        tileJson[field] = sourceConfig[field];
+      }
+    }
+    return tileJson;
   }
-
-  const sourceKey = rest[0];
-  const z = Math.floor(parseFloat(rest[1]));
-  const x = parseInt(rest[2], 10);
-  const yExt = rest[3];
-  const yMatch = yExt.match(/(\d+)\.(\w+)/);
-
-  if (!yMatch) {
-    return new Response('Invalid tile coordinates', { status: 400 });
+  function deriveTileExtensionFromTiles(tiles) {
+    if (Array.isArray(tiles) && tiles.length > 0 && typeof tiles[0] === "string") {
+      const match = tiles[0].match(/\.([\w]+)(?:[?#]|$)/i);
+      if (match) return match[1];
+    }
+    return "pbf";
   }
-
-  const y = parseInt(yMatch[1], 10);
-  const requestedExt = yMatch[2];
-
-  // Try primary key
-  const tileKey = createTileKey(x, y, z, actualStyleId, sourceKey, requestedExt);
-  let resource = await idbGet(db, 'tiles', tileKey);
-  if (resource && resource.data) {
-    return buildTileResponse(resource);
+  function isGzipped(buffer) {
+    if (buffer.byteLength < 2) return false;
+    const view = new Uint8Array(buffer, 0, 2);
+    return view[0] === 31 && view[1] === 139;
   }
-
-  // Fallback extensions
-  const fallbacks = ['pbf', 'mvt', 'png', 'jpg', 'webp'].filter((e) => e !== requestedExt);
-  for (const ext of fallbacks) {
-    const key = createTileKey(x, y, z, actualStyleId, sourceKey, ext);
-    resource = await idbGet(db, 'tiles', key);
-    if (resource && resource.data) {
-      return buildTileResponse(resource);
-    }
+  function dedupe(values) {
+    return Array.from(new Set(values));
   }
 
-  return new Response('Tile not found', { status: 404 });
-}
-
-async function handleGlyph(db, downloadId, rest) {
-  const styleEntry = await findStyleByRegionId(db, downloadId);
-  const actualStyleId = styleEntry ? styleEntry.key : downloadId;
-
-  // rest might be ['FontA,FontB', '0-255.pbf'] or ['FontA,FontB,FontC', '0-255.pbf']
-  const resourcePath = decodeURIComponent(rest.join('/'));
-  const pathParts = resourcePath.split('/');
-  const fontstackPart = pathParts[0] || '';
-  const rangePart = pathParts[1] || '0-255.pbf';
-
-  // Split comma-separated fonts for fallback
-  const fontstacks = fontstackPart.split(',').map((f) => f.trim());
-
-  for (const fontstack of fontstacks) {
-    const glyphPath = `${fontstack}/${rangePart}`;
-    const normalizedPath = glyphPath.endsWith('.pbf') ? glyphPath : `${glyphPath}.pbf`;
-
-    const candidateKeys = [
-      `${actualStyleId}::${normalizedPath}`,
-      `${actualStyleId}::${glyphPath}`,
-      `${downloadId}::${normalizedPath}`,
-      `${downloadId}::${glyphPath}`,
-      normalizedPath,
-      glyphPath,
-    ];
-
-    for (const key of candidateKeys) {
-      const resource = await idbGet(db, 'glyphs', key);
-      if (resource && resource.data) {
-        return new Response(resource.data, {
-          status: 200,
-          headers: { 'Content-Type': 'application/x-protobuf' },
-        });
+  // src/sw/offline-sw.ts
+  self.addEventListener("install", () => {
+    self.skipWaiting();
+  });
+  self.addEventListener("activate", (event) => {
+    event.waitUntil(self.clients.claim());
+  });
+  function openDatabase() {
+    return new Promise((resolve, reject) => {
+      const req = indexedDB.open(DB_NAME);
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => reject(req.error);
+    });
+  }
+  function idbGet(db, store, key) {
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(store, "readonly");
+      const req = tx.objectStore(store).get(key);
+      req.onsuccess = () => resolve(req.result ?? null);
+      req.onerror = () => reject(req.error);
+    });
+  }
+  function idbGetAll(db, store) {
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(store, "readonly");
+      const req = tx.objectStore(store).getAll();
+      req.onsuccess = () => resolve(req.result ?? []);
+      req.onerror = () => reject(req.error);
+    });
+  }
+  var CACHE_TTL_MS = 6e4;
+  var regionToStyleCache = /* @__PURE__ */ new Map();
+  async function findStyleByRegionId(db, regionId) {
+    const cached = regionToStyleCache.get(regionId);
+    if (cached && Date.now() - cached.ts < CACHE_TTL_MS) {
+      return cached.styleEntry;
+    }
+    try {
+      const all = await idbGetAll(db, "styles");
+      const hit = findStyleByRegionIdIn(all, regionId);
+      if (hit) {
+        regionToStyleCache.set(regionId, { styleEntry: hit, ts: Date.now() });
       }
+      return hit;
+    } catch (err) {
+      console.warn("[SW] findStyleByRegionId failed for", regionId, err);
+      return null;
     }
   }
-
-  return new Response('Glyph not found', { status: 404 });
-}
-
-async function handleSprite(db, downloadId, rest) {
-  const styleEntry = await findStyleByRegionId(db, downloadId);
-  const actualStyleId = styleEntry ? styleEntry.key : downloadId;
-
-  const decodedResourcePath = decodeURIComponent(rest.join('/'));
-
-  const candidateKeys = [
-    `${actualStyleId}::${decodedResourcePath}`,
-    `${actualStyleId}:${decodedResourcePath}`,
-    `${actualStyleId}::${decodedResourcePath.replace(/\.(json|png)$/i, '')}`,
-    `${actualStyleId}:${decodedResourcePath.replace(/\.(json|png)$/i, '')}`,
-    `${downloadId}::${decodedResourcePath}`,
-    `${downloadId}:${decodedResourcePath}`,
-    `${downloadId}::${decodedResourcePath.replace(/\.(json|png)$/i, '')}`,
-    `${downloadId}:${decodedResourcePath.replace(/\.(json|png)$/i, '')}`,
-    decodedResourcePath,
-    `${downloadId}::${decodedResourcePath}`,
-  ];
-
-  // Deduplicate
-  const uniqueKeys = [...new Set(candidateKeys)];
-
-  for (const key of uniqueKeys) {
-    const resource = await idbGet(db, 'sprites', key);
-    if (resource && resource.data) {
-      return new Response(resource.data, {
-        status: 200,
-        headers: resource.contentType ? { 'Content-Type': resource.contentType } : {},
-      });
+  async function decompressGzip(data) {
+    try {
+      const stream = new Response(data).body?.pipeThrough(new DecompressionStream("gzip"));
+      if (!stream) return data;
+      return await new Response(stream).arrayBuffer();
+    } catch (err) {
+      console.warn("[SW] Gzip decompression failed:", err);
+      return data;
     }
   }
-
-  return new Response('Sprite not found', { status: 404 });
-}
-
-async function handleTileJSON(db, downloadId, rest) {
-  const decodedResourcePath = decodeURIComponent(rest.join('/'));
-
-  // Try direct style lookup first
-  let styleEntry = await idbGet(db, 'styles', downloadId);
-
-  // Fallback: search by region ID
-  if (!styleEntry || !styleEntry.style || !styleEntry.style.sources) {
-    const foundStyle = await findStyleByRegionId(db, downloadId);
-    if (foundStyle) {
-      styleEntry = foundStyle;
+  async function buildTileResponse(resource) {
+    const headers = {
+      "Access-Control-Allow-Origin": "*",
+      "Cache-Control": "public, max-age=31536000"
+    };
+    if (resource.contentType) {
+      headers["Content-Type"] = resource.contentType;
+    } else if (resource.type === "vector") {
+      headers["Content-Type"] = "application/vnd.mapbox-vector-tile";
+    }
+    let finalData = resource.data;
+    if (isGzipped(resource.data) && resource.type === "vector") {
+      finalData = await decompressGzip(resource.data);
     }
+    if (resource.contentEncoding && resource.contentEncoding !== "gzip") {
+      headers["Content-Encoding"] = resource.contentEncoding;
+    }
+    return new Response(finalData, { status: 200, statusText: "OK", headers });
   }
-
-  if (!styleEntry || !styleEntry.style || !styleEntry.style.sources) {
-    return new Response('Style not found for TileJSON', { status: 404 });
+  async function handleTile(db, downloadId, rest) {
+    const styleEntry = await findStyleByRegionId(db, downloadId);
+    const styleId = styleEntry?.key ?? downloadId;
+    if (rest.length < 4) {
+      return new Response("Invalid tile path", { status: 400 });
+    }
+    const yExt = rest[rest.length - 1];
+    const x = parseInt(rest[rest.length - 2], 10);
+    const z = Math.floor(parseFloat(rest[rest.length - 3]));
+    const sourceKey = rest.slice(0, rest.length - 3).join("/");
+    const parsed = parseTileYExt(yExt);
+    if (!parsed || Number.isNaN(x) || Number.isNaN(z)) {
+      return new Response("Invalid tile coordinates", { status: 400 });
+    }
+    const primary = makeTileKey(x, parsed.y, z, styleId, sourceKey, parsed.ext);
+    let resource = await idbGet(db, "tiles", primary);
+    if (resource?.data) return buildTileResponse(resource);
+    for (const ext of tileFallbackExtensions(parsed.ext)) {
+      const key = makeTileKey(x, parsed.y, z, styleId, sourceKey, ext);
+      resource = await idbGet(db, "tiles", key);
+      if (resource?.data) return buildTileResponse(resource);
+    }
+    return new Response("Tile not found", { status: 404 });
   }
-
-  const sources = styleEntry.style.sources;
-  let matchedSourceId;
-  let matchedSourceConfig;
-
-  if (decodedResourcePath in sources) {
-    matchedSourceId = decodedResourcePath;
-    matchedSourceConfig = sources[decodedResourcePath];
-  } else {
-    for (const [sourceId, sourceValue] of Object.entries(sources)) {
-      const sourceUrl = typeof sourceValue.url === 'string' ? sourceValue.url : undefined;
-      const originalUrl =
-        typeof sourceValue.__originalTilesetUrl === 'string'
-          ? sourceValue.__originalTilesetUrl
-          : undefined;
-      if (sourceUrl === decodedResourcePath || originalUrl === decodedResourcePath) {
-        matchedSourceId = sourceId;
-        matchedSourceConfig = sourceValue;
-        break;
+  async function handleGlyph(db, downloadId, rest) {
+    const styleEntry = await findStyleByRegionId(db, downloadId);
+    const styleId = styleEntry?.key ?? downloadId;
+    const { fontstacks, rangePart } = parseGlyphPath(decodeURIComponent(rest.join("/")));
+    for (const fontstack of fontstacks) {
+      for (const key of glyphCandidateKeys(styleId, downloadId, fontstack, rangePart)) {
+        const resource = await idbGet(db, "glyphs", key);
+        if (resource?.data) {
+          return new Response(resource.data, {
+            status: 200,
+            headers: { "Content-Type": "application/x-protobuf" }
+          });
+        }
       }
     }
+    return new Response("Glyph not found", { status: 404 });
   }
-
-  if (!matchedSourceId || !matchedSourceConfig) {
-    return new Response('Source not found for TileJSON', { status: 404 });
+  async function handleSprite(db, downloadId, rest) {
+    const styleEntry = await findStyleByRegionId(db, downloadId);
+    const styleId = styleEntry?.key ?? downloadId;
+    const path = decodeURIComponent(rest.join("/"));
+    for (const key of spriteCandidateKeys(styleId, downloadId, path)) {
+      const resource = await idbGet(db, "sprites", key);
+      if (resource?.data) {
+        const headers = {};
+        if (resource.contentType) headers["Content-Type"] = resource.contentType;
+        return new Response(resource.data, { status: 200, headers });
+      }
+    }
+    return new Response("Sprite not found", { status: 404 });
   }
-
-  // Build offline TileJSON with /__offline__/ tile URLs
-  const extension = deriveTileExtension(matchedSourceConfig.tiles);
-  const offlineTiles = [
-    `${self.location.origin}${OFFLINE_PREFIX}${downloadId}/tile/${matchedSourceId}/{z}/{x}/{y}.${extension}`,
-  ];
-
-  const tileJson = {
-    tilejson: typeof matchedSourceConfig.tilejson === 'string' ? matchedSourceConfig.tilejson : '2.2.0',
-    name: matchedSourceConfig.name || matchedSourceId,
-    tiles: offlineTiles,
-    minzoom: typeof matchedSourceConfig.minzoom === 'number' ? matchedSourceConfig.minzoom : 0,
-    maxzoom: typeof matchedSourceConfig.maxzoom === 'number' ? matchedSourceConfig.maxzoom : 22,
-  };
-
-  // Copy additional fields
-  const fieldsToCopy = [
-    'bounds', 'center', 'vector_layers', 'scheme', 'attribution',
-    'encoding', 'format', 'grids', 'data', 'template', 'version',
-  ];
-  for (const field of fieldsToCopy) {
-    if (field in matchedSourceConfig && matchedSourceConfig[field] !== undefined) {
-      tileJson[field] = matchedSourceConfig[field];
+  async function handleModel(db, downloadId, rest) {
+    const styleEntry = await findStyleByRegionId(db, downloadId);
+    const styleId = styleEntry?.key ?? downloadId;
+    const path = decodeURIComponent(rest.join("/"));
+    for (const key of modelCandidateKeys(styleId, downloadId, path)) {
+      const resource = await idbGet(db, "models", key);
+      if (resource?.data) {
+        return new Response(resource.data, {
+          status: 200,
+          headers: { "Content-Type": resource.contentType || "model/gltf-binary" }
+        });
+      }
     }
+    return new Response("Model not found", { status: 404 });
   }
-
-  return new Response(JSON.stringify(tileJson), {
-    status: 200,
-    headers: { 'Content-Type': 'application/json' },
-  });
-}
-
-// -----------------------------------------------------------
-// Fetch event listener
-// -----------------------------------------------------------
-
-self.addEventListener('fetch', (event) => {
-  const url = event.request.url;
-  const idx = url.indexOf(OFFLINE_PREFIX);
-  if (idx === -1) return; // Not an offline request, let it pass through
-
-  event.respondWith(handleOfflineRequest(url, idx));
-});
-
-async function handleOfflineRequest(url, prefixIndex) {
-  try {
-    const path = url.substring(prefixIndex + OFFLINE_PREFIX.length);
-    const parts = path.split('/');
-    const [downloadId, type, ...rest] = parts;
-
-    if (!downloadId || !type) {
-      return new Response('Invalid offline URL', { status: 400 });
+  async function handleTileJSON(db, downloadId, rest) {
+    const path = decodeURIComponent(rest.join("/"));
+    let styleEntry = await idbGet(db, "styles", downloadId);
+    if (!styleEntry?.style?.sources) {
+      styleEntry = await findStyleByRegionId(db, downloadId);
     }
-
-    const db = await openDatabase();
-
-    switch (type) {
-      case 'tile':
-        return await handleTile(db, downloadId, rest);
-      case 'glyph':
-        return await handleGlyph(db, downloadId, rest);
-      case 'sprite':
-        return await handleSprite(db, downloadId, rest);
-      case 'tilesjson':
-        return await handleTileJSON(db, downloadId, rest);
-      default:
-        return new Response(`Unknown resource type: ${type}`, { status: 400 });
+    if (!styleEntry?.style?.sources) {
+      return new Response("Style not found for TileJSON", { status: 404 });
+    }
+    const match = matchTileJsonSource(styleEntry.style.sources, path);
+    if (!match) {
+      return new Response("Source not found for TileJSON", { status: 404 });
+    }
+    const ext = deriveTileExtensionFromTiles(match.config.tiles);
+    const tileJson = buildOfflineTileJson(
+      match.config,
+      downloadId,
+      match.sourceId,
+      ext,
+      "offline",
+      self.location.origin
+    );
+    return new Response(JSON.stringify(tileJson), {
+      status: 200,
+      headers: { "Content-Type": "application/json" }
+    });
+  }
+  self.addEventListener("fetch", (event) => {
+    const url = event.request.url;
+    const idx = url.indexOf(OFFLINE_PREFIX);
+    if (idx === -1) return;
+    event.respondWith(handleOfflineRequest(url, idx));
+  });
+  async function handleOfflineRequest(url, prefixIndex) {
+    try {
+      const path = url.substring(prefixIndex + OFFLINE_PREFIX.length);
+      const parts = path.split("/");
+      const [downloadId, type, ...rest] = parts;
+      if (!downloadId || !type) {
+        return new Response("Invalid offline URL", { status: 400 });
+      }
+      const db = await openDatabase();
+      switch (type) {
+        case "tile":
+          return await handleTile(db, downloadId, rest);
+        case "glyph":
+          return await handleGlyph(db, downloadId, rest);
+        case "sprite":
+          return await handleSprite(db, downloadId, rest);
+        case "model":
+          return await handleModel(db, downloadId, rest);
+        case "tilesjson":
+          return await handleTileJSON(db, downloadId, rest);
+        default:
+          return new Response(`Unknown resource type: ${type}`, { status: 400 });
+      }
+    } catch (err) {
+      console.error("[SW] Error handling offline request:", err);
+      return new Response("Service Worker error", { status: 500 });
     }
-  } catch (err) {
-    console.error('[SW] Error handling offline request:', err);
-    return new Response('Service Worker error', { status: 500 });
   }
-}
+})();