Las apps de una sola página pueden mostrar contenido diferente sin cargar una página nueva. Para ello, usan controladores de clics en vínculos y la API de History. La API de History permite manipular el historial de sesiones del navegador. De esta manera, podemos actualizar la URL cuando se muestra una página diferente (por lo general, se denomina "vista" en las apps de una sola página). También se asegura de que el botón Atrás del navegador siga funcionando como se espera.
Consulta la app de una sola página en este codelab. Muestra imágenes de gatos o perros y proporciona vínculos para alternar entre los dos animales. Parece que funciona bien.
Descubre el error 404 oculto
Lamentablemente, hay un error sutil en la app. Veamos qué sucede.
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
. - Haz clic en el vínculo Doggos. Observa cómo cambió la URL.
- Vuelve a cargar la app.
Se muestra una página con "Cannot GET /doggos", un error 404 oculto. Es "sospechosa",
porque la app web parece funcionar bien, siempre y cuando solo hagas clic en los vínculos dentro
de ella. Se produce un error cuando se usan las URLs en una ventana de navegador nueva o cuando se actualiza la página. El problema es que el servidor no sabe cómo responder a una solicitud para estas URLs. El código JavaScript de nuestra app web usa la API de History para navegar entre ellas, pero el servidor no sabe qué hacer con ellas.
Cada vez que el servidor no sabe qué hacer con una URL solicitada, responde con el código de estado HTTP 404. Con este código, el servidor indica que no encontró nada para la URL solicitada.
En este caso, los motores de búsqueda no indexarán las URLs, ya que un usuario haría clic en un resultado de la búsqueda y encontraría el mensaje de error, pero no el contenido que buscaba, como las imágenes de perros.
Cómo corregir el servidor
Este proyecto usa un servidor express.js escrito en JavaScript. Arreglaremos el servidor para que responda con index.html y la app de una sola página se encargará del resto.
- Haz clic en Remix to Edit para que el proyecto sea editable.
- Selecciona el archivo
server.js.
Este archivo contiene el código del servidor. Configura un servidor express.js y envía el contenido de index.html. La configuración de la ruta en la línea 15 solo entrega la app web cuando las solicitudes van a la URL /. El servidor también debe entregar las otras URLs que
creamos. Cambiemos esto para que se entreguen todas las URLs, de modo que también funcione con
URLs adicionales en el futuro.
Para ello, podemos cambiar el código que comienza en la línea 15 a lo siguiente:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/* coincide con cualquier URL y el servidor ahora responde con la app web en index.html para cualquier URL determinada.
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
.
Actualizar y abrir los vínculos en una nueva ventana de incógnito ahora debería funcionar como se espera.