Hace años que alguien dice: “Hey, ¿podemos hacer que esta aplicación sea instalable y funcione offline también?” Cueva la lenta y dolorosa caída al agujero de conejo de PWA: configuraciones de trabajadores de servicio frágiles, caos de caché, router de aplicaciones rompiendo cosas, y los usuarios se quedaron atrapados con versiones antiguas a menos que llamaran manualmente a los dioses de caché. Así que hice lo que cualquier desarrollador razonable con demasiado café y no suficiente paciencia haría: construí mi propio paquete maldito. Introducing: next-pwa-pack Es un envoltorio drop-in para Next.js (yep, funciona bien con App Router) que le da soporte completo de PWA simplemente envolviendo su diseño con un proveedor. literalmente escribe: import { PWAProvider } from "next-pwa-pack"; export default function layout({ children }) { return <PWAProvider>{children}</PWAProvider>; } y ¡Tow tu aplicación instala como una nativa, funciona fuera de línea, cache páginas, pestañas de sincronización e incluso naves con un panel de desarrollo integrado para que no tengas que adivinar si algo está funcionando. boom Sólo deje entrar y continúe con tu vida. ¿Por qué he construido esto Cada vez que un cliente pidió “offline-first” o “funciones de PWA”, me morí un poco dentro. , solo para encontrar que no soporta el último App Router, o intentaría rodar mi propio y acabar refrescar la página con rabia para ver si el trabajador del servicio realmente actualizó. next-pwa Al final, me di cuenta de que lo que quería era una configuración no-brainer. Algo que me dio un trabajador de servicio que trabajaba, pre-cache, lógica de actualización y control de versiones - y salió del camino. Algo que podría conectar a cualquier proyecto Next.js y confiar. Así que lo construí. ¿Qué es lo que realmente está sucediendo debajo del hoyo, Los barcos se defraudan , de , y Que sw.js maneje HTML y el caché estático de activos con un estándar saneado - las respuestas HTML reciben un TTL de 10 minutos, y los activos como JS, CSS y imágenes se almacenan permanentemente. next-pwa-pack sw.js manifest.json offline.html Para mantener todas las pestañas del navegador en sincronía, utiliza eventos para transmitir actualizaciones a lo largo de la sesión. Si se va fuera de línea, sirve un los usuarios no se enfrentan a la temida pantalla blanca. localStorage offline.html Y dado que no se trata sólo de “estar fuera de línea”, también añadí una API pequeña para que puedas interactuar con la capa de caché. ¿Quieres prefetchar algunas páginas después de publicar nuevo contenido? El truco: también hay si necesita rastrear el estado de la instalación o escuchar nuevas versiones. clearAllCache() updateSWCache(["/blog", "/dashboard"]) usePWAStatus() Modo de Dev Goodies Si usted permite En el proveedor, obtendrá un panel de depuración de PWA flotante directamente en su aplicación. muestra su estado en línea/offline, le permite limpiar o refrescar la caché, desactivar el trabajador del servicio, e incluso cambiar la caché en o fuera mientras está probando. No más cavar a través de Chrome DevTools o desactivar manualmente los trabajadores del servicio cada cinco minutos. devMode Pocos puntos a tener en cuenta No es mágico, por lo que todavía tendrá que personalizar su manifest.json y subir iconos si desea instalar banners para que parezcan buenos. Sólo almacenamos en caché las solicitudes de GET —sin mutación ni datos POST sensibles— y si desea cambiar la TTL de HTML u otras reglas de caché, tendrá que ajustar la directamente (por el momento - un sistema de config está llegando). sw.js Pero en términos de rendimiento, el impacto es mínimo, y en caso alguno, los visitantes de regreso verán un impulso de velocidad de las respuestas en caché. ¿Qué es lo siguiente El mapa de ruta incluye soporte para reglas TTL basadas en configuración, notificaciones push, estrategias de caché más inteligentes basadas en patrones de URL, integración con ISR (regeneración estática incremental), e incluso un panel integrado para rastrear las métricas de caché en tiempo real. Título: DR y construido porque estaba haciendo trabajadores de servicio de cables a mano y debugando cachés en la producción. Funciona fuera de la caja, juega bien con la última características, y ayuda a que su aplicación permanezca rápida, instalable y resiliente - sin destruir su inteligencia de desarrollador. next-pwa-pack Next.js Es de código abierto, puedes probarlo aquí: <https://github.com/dev-family/next-pwa-pack](https://github.com/dev-family/next-pwa-pack) Use, forja, rompa y dime lo que piensas. Quédate en caché!
