javascript - que - single page application ejemplo

¿Cómo forzar la actualización de páginas de aplicación de página única(SPA)?

Question

En la representación totalmente basada en el lado del servidor (no en la Web 2.0), la implementación del código del lado del servidor actualizaría directamente las páginas del lado del cliente al recargar la página. En contraste, en la aplicación de página única basada en React, incluso después de que se hayan actualizado los componentes de React, todavía habrá algunos clientes que usen una versión antigua de los componentes (solo obtienen la nueva versión tras la recarga del navegador, lo que rara vez debería ocurrir) -> Si las páginas son totalmente SPA, es posible que algunos clientes solo actualicen las páginas después de unas horas.

¿Qué técnicas deberían emplearse para asegurarse de que las versiones anteriores de los componentes ya no sean utilizadas por ningún cliente?

Actualización: la API no ha cambiado, solo React Component se actualiza con la versión más reciente.

Answer 1

¿Qué técnicas deberían emplearse para asegurarse de que las versiones anteriores de los componentes ya no sean utilizadas por ningún cliente?

Hoy (2018), muchas aplicaciones frontales utilizan trabajadores de servicios . Con él, es posible administrar el ciclo de vida de su aplicación de varias maneras.

Este es un primer ejemplo, mediante el uso de una notificación ui, solicitando a sus visitantes que actualicen la página web para obtener la última versión de la aplicación.

import * as SnackBar from ''node-snackbar'';

// ....

// Service Worker
// https://github.com/GoogleChrome/sw-precache/blob/master/demo/app/js/service-worker-registration.js

const offlineMsg = ''Vous êtes passé(e) en mode déconnecté.'';
const onlineMsg = ''Vous êtes de nouveau connecté(e).'';
const redundantMsg = ''SW : The installing service worker became redundant.'';
const errorMsg = ''SW : Error during service worker registration : '';
const refreshMsg = ''Du nouveau contenu est disponible sur le site, vous pouvez y accéder en rafraichissant cette page.'';
const availableMsg = ''SW : Content is now available offline.'';
const close = ''Fermer'';
const refresh = ''Rafraîchir'';

if (''serviceWorker'' in navigator) {
  window.addEventListener(''load'', () => {
    function updateOnlineStatus() {
      SnackBar.show({
        text: navigator.onLine ? onlineMsg : offlineMsg,
        backgroundColor: ''#000000'',
        actionText: close,
      });
    }
    window.addEventListener(''online'', updateOnlineStatus);
    window.addEventListener(''offline'', updateOnlineStatus);
    navigator.serviceWorker.register(''sw.js'').then((reg) => {
      reg.onupdatefound = () => {
        const installingWorker = reg.installing;
        installingWorker.onstatechange = () => {
          switch (installingWorker.state) {
            case ''installed'':
              if (navigator.serviceWorker.controller) {
                SnackBar.show({
                  text: refreshMsg,
                  backgroundColor: ''#000000'',
                  actionText: refresh,
                  onActionClick: () => { location.reload(); },
                });
              } else {
                console.info(availableMsg);
              }
              break;
            case ''redundant'':
              console.info(redundantMsg);
              break;
            default:
              break;
          }
        };
      };
    }).catch((e) => {
      console.error(errorMsg, e);
    });
  });
}

// ....

También hay una forma elegante de verificar las actualizaciones en segundo plano y luego actualizar la aplicación en silencio cuando el usuario hace clic en un enlace interno. Este método se presenta en ach.codes y se discute en este thread también.

Answer 2

Puede enviar la versión de la aplicación con cada respuesta desde cualquier punto final de su API. De modo que cuando la aplicación realiza cualquier solicitud de API, puede comprobar fácilmente que hay una nueva versión y que necesita una recarga difícil. Si la versión en la respuesta de la API es más reciente que la almacenada en localStorage, configure window.updateRequired = true . Y puede tener el siguiente componente de reacción que envuelve el Link react-router :

import React from ''react'';
import { Link, browserHistory } from ''react-router'';

const CustomLink = ({ to, onClick, ...otherProps }) => (
  <Link
    to={to}
    onClick={e => {
      e.preventDefault();
      if (window.updateRequired) return (window.location = to);
      return browserHistory.push(to);
    }}
    {...otherProps}
  />
);

export default CustomLink;

Y úselo en lugar del Link del enrutador de reacción en toda la aplicación. Así que cada vez que hay una actualización y el usuario navega a otra página, habrá una recarga difícil y el usuario obtendrá la última versión de la aplicación.

También puede mostrar un mensaje emergente que dice: "Hay una actualización, haga clic en [aquí] para habilitarla". Si solo tienes una página o tus usuarios navegan muy raramente. O simplemente vuelve a cargar la aplicación sin preguntar. Depende de tu aplicación y usuarios.

Answer 3

Sí en la representación del lado del servidor. Si necesita actualizar una pequeña parte de la página, también debe volver a cargar toda la página. Pero en los SPAs actualizas tus cosas con ajax, por lo tanto no es necesario volver a cargar la página. Viendo tu problema tengo algunas suposiciones:

Verá que uno de sus componentes se actualizó pero otros componentes que obtuvieron datos de la misma API no se actualizaron. Aquí viene la arquitectura de flujo . donde tenga sus datos almacenados y su componente escuche los cambios de la tienda, siempre que los datos de su tienda cambien todos los componentes que escuchan su cambio se actualizarán (sin escena de almacenamiento en caché).

O

Necesita controlar su componente para ser actualizado automáticamente. Para eso

1. Puede solicitar su servidor para datos en intervalos específicos
2. Websockets puede ayudarlo a actualizar los datos de los componentes del servidor.

Answer 4

Similar a la respuesta de Steve Taylor, pero en lugar de versionar los puntos finales de la API, yo versionaría la aplicación cliente de la siguiente manera.

Con cada solicitud HTTP, envíe un encabezado personalizado, como:

X-Client-Version: 1.0.0

El servidor podría entonces interceptar dicho encabezado y responder en consecuencia.

Si el servidor es consciente de que la versión del cliente es obsoleta, por ejemplo, si la versión actual es 1.1.0 , responda con un código de estado HTTP que será manejado adecuadamente por el cliente, como por ejemplo:

418 - I''m a Teapot

El cliente puede programarse para reaccionar ante tal respuesta al actualizar la aplicación con:

window.location.reload(true)

La premisa subyacente es que el servidor es consciente de la última versión del cliente.

EDITAR:

Una respuesta similar se da here .

Answer 5

Puede hacer que un componente React realice una solicitud ajax a su servidor, cuando se carga la aplicación, para buscar "versión de interfaz" . En la API del servidor, puede mantener un valor incremental para la versión del cliente. El componente React puede almacenar este valor en el cliente (cookie / local storage / etc). Cuando detecta un cambio, puede invocar window.location.reload(true); lo que debería obligar al navegador a descartar la caché del cliente y volver a cargar el SPA. O mejor aún, informe al usuario final que se cargará una nueva versión y pregúnteles si desean guardar el trabajo y luego volver a cargar, etc. Depende de lo que quiera hacer.