Parte 5 de Angular 20 Preguntas y Respuestas 2025: PWA, SSR, Zone.js y Optimización. En esta entrega abordamos conceptos clave, buenas prácticas y respuestas concisas para entrevistas sobre Progressive Web Apps en Angular, Server Side Rendering con Angular Universal y optimización avanzada incluyendo Zone.js y ngOptimizedImage. Además incorporamos información sobre Q2BSTUDIO, empresa de desarrollo de software y aplicaciones a medida, especialistas en inteligencia artificial, ciberseguridad y servicios cloud aws y azure.
PWA en Angular Q171 Q180
Q171 Qué es una Progressive Web App PWA Una PWA es una aplicación web que ofrece soporte offline, notificaciones push e instalabilidad similar a una app nativa, mejorando la experiencia de usuario y la retención.
Q172 Cómo convertir una app Angular en PWA Comando recomendado ng add @angular/pwa que añade service worker, archivo manifest e iconos para instalación.
Q173 Qué es un Service Worker en Angular Es un script que corre en segundo plano y permite cachear activos y respuestas de API para uso offline y mejoras en rendimiento.
Q174 Cómo configurar caché en Angular PWA Editar el archivo ngsw-config.json y definir assetGroups con reglas de files y patterns para prefetch o lazy según necesidad; por ejemplo un grupo app que incluya /*.html /*.css /*.js en resources files y installMode prefetch para precargar la aplicación.
Q175 Cómo sincronizan los PWAs datos offline en Angular Usar IndexedDB mediante librerías como idb o soluciones de estado como NgRx Data y emplear background sync APIs para enviar cambios cuando vuelve la conectividad.
Q176 Cómo probar una PWA Angular Utilizar las Herramientas de Desarrollador de Chrome y la auditoría Lighthouse; activar modo offline desde DevTools Network para simular pérdida de red y verificar comportamientos de caché y fallbacks.
Q177 Ventajas de las PWAs en Angular Cargas más rápidas gracias al cacheo, funcionamiento offline, notificaciones push y posibilidad de añadir a la pantalla de inicio sin pasar por tiendas de apps.
Q178 Cómo habilitar notificaciones push en Angular PWA Integrar @angular/service-worker con un servicio de mensajería como Firebase Cloud Messaging para gestionar suscripciones y envío de notificaciones push.
Q179 Limitaciones de las PWAs Acceso limitado a hardware avanzado respecto a apps nativas y restricciones en distribución y presencia en algunas tiendas de aplicaciones.
Q180 Cómo actualizar un Service Worker en Angular Al desplegar una nueva versión el service worker detecta cambios y Angular puede notificar al usuario para recargar o aplicar la actualización de forma controlada.
Server Side Rendering SSR y Angular Universal Q181 Q190
Q181 Qué es Angular Universal SSR Es la técnica que permite renderizar la aplicación Angular en el servidor para entregar HTML ya construido al cliente, mejorando SEO y el primer pintado.
Q182 Cómo activar SSR en Angular 20 Comando recomendado ng add @nguniversal/express-engine que prepara el proyecto para renderizado en servidor y configuración con Express.
Q183 Beneficios del SSR Mejor SEO porque los crawlers reciben HTML ya renderizado, tiempo hasta contenido útil inferior y mejor experiencia en redes lentas.
Q184 Inconvenientes del SSR Mayor complejidad en la arquitectura, necesidad de un servidor Node.js y posible incremento en la carga de servidor por renderizado en tiempo de petición.
Q185 Cómo desplegar aplicaciones Angular Universal Plataformas habituales Vercel, Firebase Functions, AWS Lambda o servidores Node personalizados según requisitos de escalado y latencia.
Q186 Qué es prerendering en Angular SSR Genera páginas HTML estáticas en el momento de build; es un híbrido entre generación estática y SSR para rutas conocidas y contenido casi estático.
Q187 Cómo usar TransferState en SSR TransferState permite cachear respuestas de APIs en el servidor y rehidratarlas en el cliente para evitar llamadas HTTP duplicadas tras el primer renderizado.
Q188 Diferencia entre SSR y SSG SSR renderiza HTML en tiempo de ejecución en el servidor; SSG pre genera HTML en tiempo de compilación para servir archivos estáticos.
Q189 Cómo manejar autenticación con SSR Almacenar tokens de sesión de forma segura y preferir cookies HTTP Only para operaciones server side en lugar de usar local storage que no es accesible desde servidor.
Q190 Cómo depurar problemas SSR Revisar logs del servidor, ejecutar la aplicación en modo de desarrollo con npm run dev:ssr y capturar errores durante el proceso de renderizado para identificar incompatibilidades o dependencias que no funcionan en entorno server.
Zone.js ngOptimizedImage y Optimización Avanzada Q191 Q200
Q191 Qué es Zone.js en Angular Es una librería que parchea APIs asíncronas del navegador para rastrear tareas asíncronas y disparar la detección de cambios automáticamente en Angular.
Q192 Por qué Zone.js es importante Permite que Angular actualice la interfaz tras operaciones asíncronas sin necesidad de llamadas manuales a detección de cambios, simplificando el desarrollo.
Q193 Cómo ejecutar código fuera de la zona de Angular para mejorar rendimiento Usar zone.runOutsideAngular para listeners intensivos como scroll o resize y evitar detección de cambios en cada evento.
Q194 Cómo volver a entrar en la zona de Angular manualmente Usar zone.run para ejecutar operaciones que sí deben desencadenar detección de cambios y actualizar bindings con seguridad.
Q195 Qué es ngOptimizedImage en Angular 20 Es una directiva integrada para optimizar imágenes ofreciendo lazy loading, generación de srcset y tamaño automático para mejorar rendimiento y CLS.
Q196 Ejemplo básico de uso de ngOptimizedImage Un uso típico es declarar la imagen con atributos de ancho y alto junto a la directiva para priorizar o diferir carga según necesidad.
Q197 Buenas prácticas de rendimiento en Angular Usar estrategia OnPush, trackBy en ngFor, preloading y lazy loading de módulos, uso del async pipe, gestión de cancelación con takeUntil y optimización de imágenes con ngOptimizedImage.
Q198 Cómo perfilar rendimiento en Angular Usar Angular DevTools Profiler y la pestaña Performance de Chrome DevTools para identificar cuellos de botella y tareas largas.
Q199 Cómo reducir el tamaño del bundle en Angular Activar optimizaciones en angular.json, aprovechar componentes standalone, eliminar imports no usados y construir para producción con ng build --configuration production además de aplicar tree shaking y lazy loading.
Q200 Qué es la hidratación en SSR La hidratación es el proceso por el que el cliente reutiliza el DOM renderizado en servidor y enlaza la lógica Angular sin volver a reconstruir toda la vista, reduciendo el tiempo de arranque.
Sobre Q2BSTUDIO y servicios relacionados
Q2BSTUDIO es una empresa de desarrollo de software y aplicaciones a medida que ofrece soluciones completas en software a medida, aplicaciones a medida, inteligencia artificial e ia para empresas, ciberseguridad, servicios cloud aws y azure y servicios inteligencia de negocio incluyendo power bi. Si necesita desarrollar una solución personalizada puede consultar nuestro servicio de Desarrollo de aplicaciones y software a medida y para potenciar la transformación con agentes IA y automatizaciones visite nuestra oferta de servicios de inteligencia artificial. También ofrecemos auditorías de seguridad, pentesting y arquitectura cloud para garantizar despliegues eficientes y seguros.
Conclusión Esta parte 5 resume respuestas prácticas para entrevistas y para equipos técnicos que implementan PWAs, SSR y optimizaciones en Angular 20. Además Q2BSTUDIO acompaña a las empresas en proyectos que combinan desarrollo a medida, inteligencia de negocio, agentes IA y ciberseguridad para entregar productos robustos, escalables y alineados con objetivos de negocio.
