Página alternativa sin conexión
Muestre una página alternativa almacenada en caché cuando el usuario no tenga conexión
Página alternativa sin conexión es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
¿Por qué una página sin conexión?
Cuando no hay conexión de red, un service worker puede mostrar una página personalizada de respaldo sin conexión en lugar del error genérico del navegador de "sin conexión a Internet". El usuario ve la marca, información útil y cualquier contenido almacenado en caché, lo que es mucho mejor que el dinosaurio de Chromium o la pestaña triste de Firefox.
Almacenamiento en caché del respaldo
En el evento install del service worker, almacene previamente la página offline.html en la caché para que siempre esté disponible, incluso antes de que el usuario navegue sin conexión. El navegador garantiza que la caché sobreviva hasta el siguiente cambio en sw.js.
const CACHE = "v1";
self.addEventListener("install", (e) => {
e.waitUntil(
caches.open(CACHE).then((c) => c.addAll(["/offline.html", "/offline.css", "/logo.svg"]))
);
});Respuesta ante fallos
En el evento fetch, intente primero acceder a la red; si falla, devuelva la versión almacenada en caché de offline.html. Este patrón (red primero con respaldo sin conexión) es la receta más sencilla para una PWA y funciona con la mayoría de los sitios de contenido.
self.addEventListener("fetch", (e) => {
if (e.request.mode !== "navigate") return;
e.respondWith(
fetch(e.request).catch(() => caches.match("/offline.html"))
);
});Comprobación del modo navigate
Use offline.html como respaldo únicamente para solicitudes de navegación (cargas de páginas de nivel superior). Para imágenes, scripts y otras solicitudes de subrecursos, permita que fallen o use copias almacenadas en caché específicas de cada recurso; servir una página HTML en lugar de una imagen ausente empeora aún más la página.
Diseño de la página sin conexión
Mantenga ligera la página sin conexión: use CSS mínimo y ningún recurso externo, a menos que también esté almacenado en caché. Muestre el logotipo de la marca, un mensaje cordial ("Está sin conexión; el contenido se cargará cuando vuelva a conectarse") y un botón Reintentar que llame a location.reload().
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Offline</title>
<style>body{font-family:sans-serif;text-align:center;padding:2rem}</style>
</head>
<body>
<h1>You're offline</h1>
<p>This page is unavailable without an internet connection.</p>
<button onclick="location.reload()">Try again</button>
</body>
</html>Almacenamiento en caché de páginas visitadas
Además de una única página sin conexión, almacene en caché las páginas cargadas correctamente mediante una estrategia stale-while-revalidate o una caché en tiempo de ejecución. Al volver a un artículo visto recientemente sin conexión, el contenido seguirá apareciendo; solo fallará la carga de páginas que aún no se hayan visitado.
Actualización de versiones de la caché
Cuando actualice offline.html, cambie la constante CACHE en sw.js (CACHE = "v2"). En el evento activate, elimine las cachés antiguas: caches.keys().then(keys => keys.filter(k => k !== CACHE).forEach(k => caches.delete(k))). Las páginas sin conexión obsoletas resultan confusas.
Pruebas sin conexión
El panel Network de Chrome DevTools → la limitación "Offline" simula la ausencia de red. Navegue por la aplicación y verifique que la página sin conexión aparezca en las rutas no visitadas y que las páginas visitadas anteriormente sigan cargándose desde la caché.
Fallos de subrecursos
Si la propia página sin conexión hace referencia a un archivo CSS que no está almacenado en caché, ese archivo no se cargará sin conexión y la página se mostrará sin estilos. Almacene previamente en caché todos los recursos que necesite la página sin conexión (CSS, logotipo y fuentes) en el controlador de instalación.
Más allá de la página estática sin conexión
Las PWA avanzadas ponen en cola las acciones del usuario cuando no hay conexión mediante Background Sync, las reintentan cuando vuelve la conectividad y muestran una interfaz optimista mientras tanto. La biblioteca Workbox ofrece recetas para estos patrones; implementarlos por cuenta propia también es posible, pero requiere más trabajo.
Restablecimiento de la conexión
Escuche el evento online en la página sin conexión para detectar la reconexión: window.addEventListener("online", () => location.reload()). La página se recarga en cuanto vuelve la conectividad, sin que el usuario tenga que pulsar Reintentar.
Sea honesto
Los botones "Intentar de nuevo" deben reintentar de verdad: llame a location.reload(), no muestre un indicador de carga falso que no haga nada. Una interfaz honesta mantiene la confianza del usuario; las páginas sin conexión engañosas dañan rápidamente la credibilidad cuando los usuarios se dan cuenta.
Comprobación de conocimientos
¿Por qué el respaldo offline.html solo debe devolverse para solicitudes de navegación (e.request.mode === "navigate") y no para todas las solicitudes fallidas?
Resumen
Los service workers pueden mostrar una página personalizada de respaldo sin conexión en lugar del error genérico del navegador. Almacene previamente offline.html en caché durante install y sírvala en fetch cuando falle la red y la solicitud sea de navegación. Mantenga la página autosuficiente, cree una nueva versión de la caché para las actualizaciones y escuche el evento online para recargar automáticamente. Pruebe con la limitación sin conexión de DevTools.
Preguntas frecuentes
¿La lección «Página alternativa sin conexión» es gratis?
Sí — el texto completo de «Página alternativa sin conexión» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Página alternativa sin conexión»?
Muestre una página alternativa almacenada en caché cuando el usuario no tenga conexión Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Página alternativa sin conexión»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El manifiesto de la aplicación web
- Registro de un service worker desde HTML
- Color del tema e iconos de la aplicación
- Página alternativa sin conexión