valor metodo funcion eventos evento escribir detectar con change cambios cambio cambiar javascript angularjs versioning single-page-application

javascript - metodo - funcion on change



Detectar el cambio de versión de la aplicación en una aplicación de una sola página. (4)

Decidí agregar mis pensamientos finales como respuesta aquí también:

Fuimos por una solución reducida por ahora.

Como tenemos un "servicio de proxy" que es (nuevamente por ahora) el único que interactúa con esta aplicación, agregamos la versión de la aplicación en el encabezado http de todas las respuestas. Si recibimos una versión más reciente, aparece una ventana emergente que notifica al usuario y se emite una actualización completa de la página ...

Esta solución no funcionará para aplicaciones que no tengan su propio servicio "privado".

Hoy se planteó una pregunta aquí y no tengo una respuesta evidente.

Supongamos que concatenamos y minimizamos todos los archivos de recursos (CSS y Javascript) y los declaramos en la "Página maestra".

En una aplicación de varias páginas, si un archivo CSS cambia, se recargará en la próxima carga de la página completa.

En una aplicación de una sola página, el usuario puede seguir trabajando durante días y nunca recargar la página principal donde se declaran los archivos CSS. El usuario nunca verá los cambios hasta que se emita un Ctrl-F5.

Estoy seguro de que alguien ya pensó en esto y tiene una experiencia para compartir :)

Para mí, usar WebSockets no es una opción. Primero porque es excesivo y segundo porque no todos mis clientes soportan la tecnología. La misma razón se aplica a todos los fallbacks de WebSockets ... No seguiré golpeando mis servidores debido a esto.

Entonces, ¿alguna idea a alguien? :)

Por cierto, estamos usando AngularJS si eso puede ayudar para una solución específica.

¡Gracias!


He superado este mismo problema. Mi solución que se opina y puede no responder a sus criterios:

Cuando empaqueté mi aplicación frontal y mi aplicación de servidor, comparto un archivo de configuración que contiene la versión actual de la aplicación frontal.

Parte frontal: el 75% de mis rutas cambian implícitamente a un servicio web (resolución de cambio de ruta). Cada vez que llamo a mi servidor, incluyo un encabezado HTTP personalizado (o un parámetro GET / POST) que contiene la versión del cliente de la aplicación frontal.

Lado del servidor: comparo la versión de la aplicación frontal (la del navegador del usuario, la última vez que el usuario cargó / actualizó el SPA) con la versión de la aplicación frontal del archivo de configuración compartido:

  • Si la versión coincide: no hago nada.
  • Si la versión no coincide, envío un código de error de estado HTTP personalizado (por ejemplo, 418)

Luego, parte frontal: agregué un Interceptor de respuesta que intercepta cualquier código de error 418 y hago una actualización forzada de toda la aplicación

Eso es. Básicamente, el evento que "verifica" si la versión de la aplicación frontal es la última es un cambio de ruta (que llama a un WS a través de ajax). Pero podría agregar un intervalo infinito de $ llamando a un WS dedicado cada 5 minutos más o menos ... Puedo agregar algo de código si es necesario.

Espero que esto ayude ;)


Llámeme anticuado, pero le haré saber a mi usuario que hay una interfaz de usuario actualizada más fresca, mejor y más impresionante disponible con un cuadro de alerta. Cuando actúen y hagan clic en ella, simplemente actualice la página. Tal vez el código no resuelva esto, pero algo de psicología de UX ...


Suponiendo que está utilizando el enrutamiento de AngularJS a través del servicio $ route y el proveedor, entonces puede usar el evento $routeChangeSuccess para realizar una solicitud del servidor si hay cambios significativos que deben cambiarse; Si hay alguno, puedes hacer un window.location.reload () para actualizar la página y obtener todos los recursos y htmls actualizados.

El siguiente proceso puede cambiarse dependiendo de cómo quiera implementarlo:

1 . Configure un archivo de configuración en su servidor indicando la versión de la aplicación. También puede elegir asignar diferentes versiones para diferentes archivos, pero dado que ha concatenado todos sus archivos de recursos, supongo que puede limitar las opciones de versión en su configuración.

2 . Cree un servicio que contenga toda la información necesaria (versiones de archivos del servidor) y métodos para realizar una solicitud del servidor a su servidor para verificar las versiones actuales de los archivos almacenados en el servicio.

3 . Use el evento $routeChangeSuccess para realizar una solicitud del servidor utilizando el servicio que ha creado en el paso 2 , si la solicitud devolvió una confirmación válida de que hubo cambios, haga la recarga de la página forzada a través de window.location.reload() .