Store and render a local pack

manifest.json
tiles/base.pmtiles
tiles/gebco.pmtiles       # if requested
tiles/gmrt.pmtiles        # if available/requested
tiles/contours.pmtiles    # if requested
styles/dark.json
styles/light.json
sprites/dark.json        # plus PNG, @2x and the selected other theme
fonts.tar
fonts/<fontstack>/<range>.pbf  # extracted from fonts.tar
places.json              # check manifest; older packs may lack it

const root = await navigator.storage.getDirectory();
const packs = await root.getDirectoryHandle('packs', { create: true });
const packDir = await packs.getDirectoryHandle(manifest.packId, { create: true });
const quota = await navigator.storage.estimate();
console.log('Available estimate', (quota.quota ?? 0) - (quota.usage ?? 0));
const persistent = await navigator.storage.persist();
console.log('Persistent storage granted', persistent);
// After verifying/extracting all resources, save manifest.json last.
// Store your active pack ID in IndexedDB only when the pack is complete.
// Removal after switching away from this pack:
// await packs.removeEntry(manifest.packId, { recursive: true });

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  if (url.origin !== self.location.origin || !url.pathname.startsWith('/offline-pack/')) return;
  event.respondWith((async () => {
    try {
      const parts = url.pathname.slice('/offline-pack/'.length).split('/').map(decodeURIComponent);
      if (parts.some(p => !p || p === '.' || p === '..' || /[\\/]/.test(p)))
        return new Response('Invalid path', { status: 400 });
      let dir = await (await navigator.storage.getDirectory()).getDirectoryHandle('packs');
      for (const name of parts.slice(0, -1)) dir = await dir.getDirectoryHandle(name);
      const file = await (await dir.getFileHandle(parts.at(-1))).getFile();
      const ext = parts.at(-1).split('.').at(-1);
      const type = { json: 'application/json', png: 'image/png', pbf: 'application/x-protobuf' }[ext];
      return new Response(file, { headers: { 'Content-Type': type || 'application/octet-stream' } });
    } catch { return new Response('Local pack resource missing', { status: 404 }); }
  })());
});

import { maplibregl, packProtocol, resolveStyle } from '@sw-maps/core';
import { PMTiles, FileSource } from 'pmtiles';

// Prerequisites: manifest, packDir and a controlling service worker as above.
const base = location.origin + '/offline-pack/' + manifest.packId;
const protocol = packProtocol();
maplibregl.addProtocol('pmtiles', protocol.tile);
for (const entry of manifest.files.filter(f => f.path.endsWith('.pmtiles'))) {
  const names = entry.path.split('/');
  let dir = packDir;
  for (const name of names.slice(0, -1)) dir = await dir.getDirectoryHandle(name);
  const file = await (await dir.getFileHandle(names.at(-1))).getFile();
  const source = new FileSource(file);
  const key = base + '/' + entry.path;
  protocol.add(new PMTiles({ getKey: () => key,
    getBytes: (...args) => source.getBytes(...args) }));
}
const response = await fetch(base + '/styles/dark.json');
if (!response.ok) throw new Error('Local style unavailable');
const map = new maplibregl.Map({ container: 'map',
  style: resolveStyle(await response.json(), base),
  bounds: [[manifest.bbox[0], manifest.bbox[1]], [manifest.bbox[2], manifest.bbox[3]]] });
map.on('error', event => {
  if (!String(event.error?.message).includes('Tile not found')) console.error(event.error);
});