Las aplicaciones de una sola página pueden mostrar contenido diferente sin necesidad de cargar una página nueva. Tareas pendientes por lo que usan controladores de clics en vínculos y la API de History. La historia API te permite hacer lo siguiente: manipular el historial de sesiones del navegador. De esta manera, podemos actualizar la URL cuando mostrar una página diferente (por lo general, se denomina "vista" en las aplicaciones de una sola página). También se asegura de que el botón Atrás del navegador siga funcionando como se espera.
Observa la app de una sola página en este codelab. Muestra un gato o un perro imágenes y proporciona vínculos para alternar entre los dos animales. Parece que funciona bien.
Descubre el sigiloso 404
Lamentablemente, hay un error sutil en la app. Veamos los detalles.
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona
Pantalla completa
- Haz clic en el vínculo de 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 "engañoso"
porque la aplicación web parece funcionar bien siempre y cuando solo hagas clic en los vínculos que se encuentran
que la modifica. Se interrumpe cuando se usan las URLs en una nueva ventana del navegador o cuando se actualiza la
. El problema es que el servidor no sabe cómo responder a una solicitud de
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ó
para la URL solicitada.
En este caso, los motores de búsqueda no indexarán las URLs porque un usuario haría clic en un resultado de la búsqueda y encuentren el mensaje de error, pero no el contenido buscando, como las fotos de los perros.
Cómo reparar el servidor
Este proyecto usa un servidor express.js escrito en JavaScript: Corrijamos el servidor, de modo que responda con index.html y el único de Google se encargará del resto.
- Haz clic en Remix para editar para que el proyecto se pueda editar.
- 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 contenido a la app web.
cuando las solicitudes se dirigen a la URL /. El servidor también debe mostrar las otras URL que
que creaste. Vamos a cambiar esto para publicar todas las URLs, así que también funciona 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');
});
/* coincide con cualquier URL, y el servidor ahora responde con la app web en
index.html para cualquier URL.
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona
Pantalla completa
Ahora, actualizar y abrir los vínculos en una nueva ventana de incógnito debería funcionar como lo esperado.