De una aplicación web dependiente de la red a una aplicación web independiente de la red

Soy un desarrollador web de pila completa y actualmente estoy construyendo principalmente aplicaciones de una sola página utilizando un marco frontal como el marco angular y de fondo como el arranque de primavera.

Por lo general, el diseño de mi aplicación web (digamos que es un CRUD) es el siguiente: digamos que estoy en la página de actualización y actualizo una entidad. Luego se realiza una solicitud al backend que actualiza la entidad en la base de datos. Cuando el backend responde diciendo que todo está bien, su entidad se ha actualizado (código de estado 200) paso por la página siguiente, que es la página de lectura con una URL, como por ejemplo, entityName/{id}donde paso la identificación de la entidad a la página siguiente a través de la URL. Luego, en la página de lectura, obtengo esa identificación, hago una solicitud al backend, recupero los datos de la entidad y los visualizo.

El problema surge cuando el usuario pierde la conectividad a Internet, por lo que no se puede realizar la solicitud al backend y, en consecuencia, los datos no se pueden mostrar a la interfaz de usuario o actualizarse.

Otro diseño sería este: estoy en la página de actualización y actualizo mi entidad. Se realiza una solicitud al backend pero también se mantiene el estado en el lado del cliente. Entonces, digamos que la conectividad se pierde, aún puedo ir a la página de lectura y mostrar la entidad actualizada. Además, como el estado / los datos se mantienen en el lado del cliente, no tengo que hacer esa segunda solicitud al backend para obtener la entidad del id, ya que la entidad vive en el lado del cliente. Durante el tiempo que el usuario pasó en la aplicación, la conectividad regresa y la solicitud de actualización se realiza al servidor para sincronizar los datos en la base de datos y en el lado del cliente.

Me parece que el segundo enfoque es más conveniente para el usuario ya que la interfaz de usuario no se basa tanto en la solicitud hecha al backend para mostrar su información, haciéndola más fluida y agradable.

Sé muy bien que el primer enfoque está en uso. Me desarrollo así y mi pregunta es: ¿es posible pasar del primer diseño al segundo diseño y, en caso afirmativo, con qué tecnologías?

Lo que haría para implementar el segundo diseño sería compartir datos entre componentes utilizando servicios (cuando se implementa con angular). De esta forma, el estado de la aplicación se puede mantener del lado del cliente. Pero tal vez hay una mejor manera. Escuché acerca de la biblioteca NgRx para administrar el estado de una aplicación. ¿Es la forma correcta de administrar el estado de la aplicación en el lado del cliente?

También hay un segundo problema que es asegurarse de que las solicitudes que no se pudieron realizar cuando se perdió la conectividad se realicen cuando la conectividad vuelva. Y entonces me pregunto: ¿es posible usar una herramienta que permita poner en cola las solicitudes y volver a ejecutarlas cuando la conectividad esté de vuelta? Tengo la noción de trabajadores de servicios y aplicaciones web progresivos, pero solo la noción (como sé que un trabajador de servicios se puede usar para almacenar en caché los datos intercambiados con el servidor) y me pregunto si es una forma de resolver este problema.

Estoy esperando tus comentarios en mi publicación. Espero que no haya sido demasiado largo. Gracias por adelantado.

Además, como el estado / los datos se mantienen en el lado del cliente, no tengo que hacer esa segunda solicitud al backend para obtener la entidad del id, ya que la entidad vive en el lado del cliente

Esto depende completamente de cuánto puede confiar en el BE. Si se produce un error por cualquier motivo (¿token caducado / desconectado? ¿Datos actualizados en otro cliente?), Este enfoque puede ser significativamente más complicado.

¿Es posible pasar del primer diseño al segundo diseño y, en caso afirmativo, con qué tecnologías?

Potencialmente, puede hacer que su aplicación sea una PWA y usar trabajadores de servicio . Encontré una buena guía para esto aquí . En caso de que el blog se caiga, pasa por el almacenamiento en caché de los activos y las fuentes en el ngsw-config.json, luego toca el almacenamiento en caché de la API. Así es como se vería el resultado final:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ],
  "dataGroups": [{
    "name": "api-freshness",
    "urls": [
      "/timeline"
    ],
    "cacheConfig": {
      "strategy": "freshness",
      "maxSize": 100,
      "maxAge": "3d",
      "timeout": "10s"
    }
  },
    {
      "name": "api-performance",
      "urls": [
        "/favorites"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d"
      }
    }
  ]
}

"Para la estrategia de red primero, es frescura, para caché primero: rendimiento"

¿Es la forma correcta de administrar el estado de la aplicación en el lado del cliente?

Puede usar NgRx para almacenar en caché los datos de su aplicación, pero deberá asegurarse de que la memoria caché esté siempre actualizada. Idealmente, usa un websocket para detectar cambios de BE, pero también podría hacer encuestas.

Sin embargo, si todo lo que necesita es la funcionalidad fuera de línea, los PWA se sienten como el camino a seguir.

¿Es posible usar una herramienta que permita poner en cola las solicitudes y volver a ejecutarlas cuando la conectividad vuelva?

Esta característica se llama sincronización de fondo y es una característica de los trabajadores del servicio. Dicho esto, encontré este problema abierto en él. Podrías probar esto, pero se siente como un truco. Si fuera por mí, crearía una serie de observables que se llaman cuando se restablece la conexión hasta que haya un mejor soporte de pwa para esto