S(GH)PA: el truco de la aplicación de una sola página para las páginas de GitHub

Desde hace algún tiempo, quería tener la capacidad de enrutar las rutas de un sitio web de Páginas de GitHub a su index.html para manejarlo como una aplicación de una sola página (SPA). Esta es una apuesta de mesa porque dichas aplicaciones requieren que todas las solicitudes se enruten a un archivo HTML, a menos que desee copiar el mismo archivo en todas sus rutas cada vez que realice un cambio en el proyecto. Actualmente, GitHub Pages no ofrece una solución de manejo de rutas; el sistema Pages pretende ser un mecanismo plano y simple para servir contenido básico del proyecto.

En caso de que no lo supiera, GitHub proporciona un poco de personalización para el sitio web de su proyecto: la capacidad de agregar un archivo 404.html y que sirva como su página de error personalizada. Hice una primera puñalada en un truco de SPA simplemente duplicando mi archivo index.html y cambiando el nombre de la copia a 404.html . Resulta que muchas personas experimentaron el mismo problema con las páginas de GitHub y les gustó la idea general. Sin embargo, el problema que algunas personas en Twitter plantearon correctamente fue que la página 404.html todavía se sirve con un código de estado de 404, que no es bueno para los rastreadores de motores de búsqueda. Me habían arrojado el guante y decidí responder, ¡y responder con vigor!

Una vez más con sentimiento

Después de dormir sobre él, pensé: "Yo, estamos en lo más profundo del territorio de los trucos sucios, así que ¿por qué no hago que este truco sea aún más sucio?". Con ese fin, desarrollé un truco aún mejor que brinda la misma funcionalidad y simplicidad, al mismo tiempo que conserva el jugo del rastreador de su sitio web, y ni siquiera necesita perder el tiempo duplicando su archivo index.html y renombrándolo a 404.html ! La siguiente solución debería funcionar en todos los navegadores móviles y de escritorio modernos (Edge, Chrome, Firefox, Safari) y en Internet Explorer 10+.

Plantilla y demostración : si desea omitir la explicación y obtener los productos, aquí hay un repositorio de plantilla y una URL de prueba para verlo en acción.

Eso es tan meta

Lo primero que hice fue investigar otras opciones para que el navegador redirigiese a la página index.html . Esa parte fue bastante sencilla. Básicamente, tiene tres opciones: una configuración de servidor, una manipulación de location de JavaScript o una metaetiqueta de refresh . El primero es obviamente un no-go para las páginas de GitHub. Y JavaScript es básicamente lo mismo que una actualización, pero podría decirse que es peor para la indexación del rastreador. Eso nos deja con la etiqueta meta. Una metaetiqueta con un valor de actualización de 0 parece ser tratada como una redirección 301 por los motores de búsqueda, lo que funciona bien para este caso de uso.

Deberá comenzar agregando un archivo 404.html a un repositorio gh-pages que contiene un documento HTML vacío en su interior. Ese documento debe sumar más de 512 bytes (se explica a continuación). A continuación, coloque el siguiente marcado en el elemento de head de su página 404.html :

 <script> sessionStorage.redirect = location.href; </script> <meta http-equiv="refresh" content="0;URL='/REPO_NAME_HERE'">

Este código establece la URL de entrada intentada en una variable en el objeto sessionStorage estándar e inmediatamente redirige a la página index.html de su proyecto usando una etiqueta de actualización meta. Si está creando un sitio de la Organización Github, no coloque un nombre de repositorio en el texto de reemplazo del atributo de contenido, solo haga esto: content=“0;URL='/'”

Personalización de la gestión de rutas

Si desea un manejo de ruta más elaborado, simplemente incluya algo de lógica de JavaScript adicional en la etiqueta de secuencia de script que se muestra arriba. Puede modificar varias cosas: la composición del href que pasa a la página index.html ; qué páginas deben permanecer en la página 404 (a través de la eliminación dinámica de la metaetiqueta); y cualquier otra lógica que desee implementar para dictar qué contenido se muestra en función de la ruta de entrada.

512 bytes mágicos

Esta es, sin lugar a dudas, una de las peculiaridades más extrañas que he encontrado en el desarrollo web. Debe asegurarse de que el tamaño total de su página 404.html sea superior a 512 bytes, porque si no lo es, Internet Explorer lo ignorará y mostrará una página 404 de navegador genérica en su lugar. Cuando finalmente me di cuenta de esto, tuve que abrir una cerveza para hacer frente a la cantidad de tiempo que tomó.

Hagamos Historia

Para capturar y restaurar la URL a la que el usuario navegó inicialmente, deberá agregar la siguiente etiqueta de script al head de su página index.html antes de que cualquier otro JavaScript actúe en el estado actual de la página:

 <script> (function(){ var redirect = sessionStorage.redirect; delete sessionStorage.redirect; if (redirect && redirect != location.href) { history.replaceState(null, null, redirect); } })(); </script>

Este bit de JavaScript recupera la URL que almacenamos en caché en sessionStorage en la página 404.html y reemplaza la entrada del history actual con ella. La forma en que elija manejar las cosas desde aquí depende de usted, pero yo usaría popstate y hashchange si fuera usted.

Bueno, amigos, eso es todo. ¡Ahora ve a celebrar escribiendo algunas aplicaciones de una sola página en Páginas de GitHub!

Este artículo es parte de una serie de desarrollo web de los evangelistas tecnológicos e ingenieros de Microsoft sobre aprendizaje práctico de JavaScript, proyectos de código abierto y mejores prácticas de interoperabilidad, incluido el navegador Microsoft Edge.

Lo alentamos a probar en todos los navegadores y dispositivos (incluido Microsoft Edge, el navegador predeterminado para Windows 10) con herramientas gratuitas en dev.microsoftedge.com, incluidas las herramientas para desarrolladores F12: siete herramientas distintas y completamente documentadas para ayudarlo a depurar, probar y Acelera tus páginas web. Además, visite el blog de Edge para mantenerse informado por los desarrolladores y expertos de Microsoft.

Lectura adicional en SmashingMag:

• Un flujo de trabajo simple desde el desarrollo hasta la implementación
• Creación de una aplicación web completa en Foundation For Apps
• Crea un blog con páginas de Jekyll y GitHub