Convertir una aplicación web en una PWA instalable sin conexión

Ya tenemos una aplicación web funcional y queremos que se comporte como una aplicación móvil completa, pero sin reescribir todo desde cero. La tarea es convertir el frontend actual en una Aplicación Web Progresiva para que los visitantes de smartphones y tabletas puedan instalarla en la pantalla de inicio, lanzarla en una ventana separada sin la barra de direcciones del navegador y continuar usando pantallas clave incluso cuando estén sin conexión. El backend y la lógica de negocio permanecen como están; el trabajo se centra en el lado del cliente y la capa de acceso sin conexión a su alrededor.

Específicamente se necesita un service worker que almacene en caché el shell de la aplicación y los recursos críticos, así como una estrategia razonable de almacenamiento en caché de respuestas de API para que los datos previamente cargados permanezcan disponibles sin conexión y se sincronicen de nuevo cuando se restablezca la red. Un manifiesto de aplicación web correcto con íconos, colores de tema y URL de inicio adecuada debería hacer que la aplicación sea instalable en Android e iOS, y quiero que el aviso de instalación se maneje de manera ordenada en lugar de dejarlo a su suerte. Además, necesitas configurar completamente las notificaciones push: solicitar permiso, almacenar la suscripción y una forma simple de enviar un push de prueba.

El rendimiento y la fiabilidad son parte del resultado: la aplicación debería pasar la auditoría de instalabilidad, degradar correctamente con una página de prueba sin conexión y no romper el comportamiento existente para los usuarios de escritorio.

— Service worker con almacenamiento en caché del shell y recursos
— Página de prueba sin conexión y caché de lectura de API
— Manifiesto de aplicación web, íconos y manejo de instalación
— Notificaciones push: permiso, suscripción, envío de prueba
— Pasar auditoría de instalabilidad/Lighthouse PWA
— Documentación para implementación y versionado de caché