PWA OFFLINE
WebPole AR

Case study · Arquitectura frontend v6.0.0
Instalable Offline-first Portfolio
1.2s
carga inicial
+47%
Lighthouse
3.3kb
service worker
100%
offline usable

Contexto

Aplicación para entornos sin conectividad. Se comporta como app nativa, se instala y mantiene experiencia fluida con cache-first + versionado semántico.

HTML5 CSS3 ES6+ SW Manifest Cache API

Estrategia · Cache First

// service-worker.js - Ejemplo mejorado
const CACHE_NAME = 'webpole-ar-v6.0.0';
const ASSETS_TO_CACHE = [
'/',
'/pwa.html',
// CSS y JS locales no son necesarios si están en el HTML
// ¡IMPORTANTE! Cachear recursos externos
'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap',
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'
];
 
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS_TO_CACHE))
);
});

🔧 Service Worker

  • Precaching install
  • Cache first
  • Cleanup activate

📱 Web Manifest

  • standalone
  • splash screen
  • theme_color

🌐 Conectividad

  • navigator.onLine
  • indicador visual
  • UI sin cortes
Offline ready
detección en tiempo real
sin conexión → cache feedback visual

Resultados

Instalable como app nativa
100% offline
Lighthouse 95+
Mantenible con versionado

“Dominio avanzado de PWA, service workers y estrategias de caché. Listo para portafolio profesional.”

WebPole AR 2026
Volver a Planes Probar Demo & Instalar