Las apps de una sola página pueden mostrar contenido diferente sin cargar una página nueva. Para hacerlo, utilizan controladores de clics en los vínculos y la API de History. La API de History permite manipular el historial de la sesión del navegador. De esta manera, podemos actualizar la URL cuando mostramos una página diferente (por lo general, se denomina "vista" en apps de una sola página). También se asegura de que el botón Atrás del navegador siga funcionando como se espera.
En este codelab, echa un vistazo a la app de una página. Muestra imágenes de gatos o de perros, y proporciona vínculos para alternar entre los dos animales. ¡Parece funcionar bien!
Descubre el misterioso 404
Hay un error menor en la app. Analicémoslos.
- 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.
Obtienes una página con "Cannot GET /doggos", un error 404 engañoso. Es "oculta", porque la aplicación web parece funcionar bien siempre que solo hagas clic en sus vínculos. Se interrumpe cuando se usan las URLs en una ventana nueva del navegador o cuando se actualiza la página. El problema es que el servidor no sabe cómo responder a la 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.
Cuando el servidor no sabe qué hacer para una URL solicitada, responde con el código de estado HTTP 404. Con este código, el servidor indica que no encontró nada en 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 fotos de perros.
Repara el servidor
Este proyecto usa un servidor express.js escrito en JavaScript. Corrijamos 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 ruta configurada en la línea 15 solo entrega a la app web cuando las solicitudes van a la URL /. El servidor también debería entregar las otras URLs que creamos. Vamos a cambiar esto para publicar todas las URLs para que también funcione con URLs adicionales en el futuro.
Para ello, podemos cambiar el código que comienza en la línea 15 por lo siguiente:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
El /* 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
.
Ahora, actualizar y abrir los vínculos en una ventana de incógnito nueva debería funcionar como se espera.