Navigation API

<!doctype html>
<meta charset="utf-8">
<title>Navigation API · ejemplo mínimo</title>
<!-- Un enrutador de una sola página con la Navigation API. Sírvelo por HTTP (npx serve .), no con file://. -->
<nav>
  <a href="?vista=inicio">Inicio</a> ·
  <a href="?vista=obra">Obra</a> ·
  <a href="?vista=contacto">Contacto</a> ·
  <button id="back">Atrás</button>
</nav>
<main id="view"></main>
<script type="module">
const view = document.querySelector('#view');
const pages = { inicio: 'Bienvenida', obra: 'Trabajos', contacto: 'Escríbeme' };
const render = (url) => {
  const vista = new URL(url).searchParams.get('vista') ?? 'inicio';
  view.textContent = pages[vista] ?? 'No encontrada';
};

if (!('navigation' in window)) {
  view.textContent = 'Sin Navigation API: los enlaces recargan la página.';
} else {
  render(location.href);
  // Un único punto para todas las navegaciones: enlaces, formularios, atrás/adelante, location…
  navigation.addEventListener('navigate', (event) => {
    if (!event.canIntercept || event.hashChange || event.downloadRequest) return;
    const url = new URL(event.destination.url);
    if (url.pathname !== location.pathname) return; // deja pasar lo que no es de esta página
    event.intercept({
      async handler() {
        await new Promise((r) => setTimeout(r, 150)); // aquí iría un fetch
        render(url);
      },
    });
  });
  document.querySelector('#back').onclick = () => navigation.canGoBack && navigation.back();
  navigation.addEventListener('navigatesuccess', () => console.log('Entradas:', navigation.entries().length));
}
</script>