S(GH)PA: Der Single-Page-App-Hack für GitHub-Seiten

Seit einiger Zeit möchte ich die Möglichkeit haben, Pfade für eine GitHub Pages-Website an ihre index.html weiterzuleiten, um sie als Single-Page-App (SPA) zu handhaben. Dies ist Tabelleneinsatz, da bei solchen Apps alle Anforderungen an eine HTML-Datei weitergeleitet werden müssen, es sei denn, Sie möchten bei jeder Änderung am Projekt dieselbe Datei über alle Ihre Routen hinweg kopieren. Derzeit bietet GitHub Pages keine Route-Handling-Lösung an; Das Pages-System soll ein flacher, einfacher Mechanismus zum Bereitstellen grundlegender Projektinhalte sein.

Falls Sie es nicht wussten, GitHub bietet ein Stück Anpassung für Ihre Projekt-Website: die Möglichkeit, eine 404.html -Datei hinzuzufügen und sie als Ihre benutzerdefinierte Fehlerseite zu verwenden. Ich habe einen ersten Versuch mit einem SPA-Hack unternommen, indem ich einfach meine index.html -Datei dupliziert und die Kopie in 404.html . Es stellt sich heraus, dass viele Leute das gleiche Problem mit GitHub Pages erlebt haben und die allgemeine Idee mochten. Das Problem, das einige Leute auf Twitter zu Recht angesprochen haben, war jedoch, dass die Seite 404.html immer noch mit dem Statuscode 404 bereitgestellt wird, was für Suchmaschinen-Crawler nicht gut ist. Der Fehdehandschuh war zu Boden geworfen worden, und ich beschloss, zu antworten – und mit Nachdruck zu antworten!

Noch einmal mit Gefühl

Nachdem ich darauf geschlafen hatte, dachte ich mir: „Selbst, wir sind tief im schmutzigen Hack-Territorium, also warum mache ich diesen Hack nicht noch schmutziger?!“ Zu diesem Zweck habe ich einen noch besseren Hack entwickelt, der die gleiche Funktionalität und Einfachheit bietet und gleichzeitig den Crawler-Saft Ihrer Website bewahrt – und Sie müssen nicht einmal mehr Zeit damit verschwenden, Ihre index.html -Datei zu duplizieren und sie in 404.html ! Die folgende Lösung sollte in allen modernen Desktop- und mobilen Browsern (Edge, Chrome, Firefox, Safari) und in Internet Explorer 10+ funktionieren.

Vorlage und Demo : Wenn Sie die Erklärung überspringen und die Ware erhalten möchten, finden Sie hier ein Vorlagen-Repo und eine Test-URL, um es in Aktion zu sehen.

Das ist also Meta

Als erstes habe ich andere Optionen untersucht, um den Browser dazu zu bringen, auf die Seite index.html umzuleiten. Dieser Teil war ziemlich einfach. Sie haben grundsätzlich drei Möglichkeiten: eine Serverkonfiguration, eine JavaScript- location oder ein refresh -Meta-Tag. Ersteres ist offensichtlich ein No-Go für GitHub-Seiten. Und JavaScript ist im Grunde dasselbe wie eine Aktualisierung, aber wohl schlechter für die Crawler-Indizierung. Damit bleiben wir beim Meta-Tag. Ein Meta-Tag mit einem Aktualisierungswert von 0 scheint von Suchmaschinen als 301-Weiterleitung behandelt zu werden, was für diesen Anwendungsfall gut funktioniert.

Sie müssen zunächst eine 404.html -Datei zu einem gh-pages Repository hinzufügen, das ein leeres HTML-Dokument enthält. Dieses Dokument muss insgesamt mehr als 512 Byte umfassen (siehe unten). Fügen Sie als Nächstes das folgende Markup in das head -Element Ihrer 404.html -Seite ein:

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

Dieser Code setzt die versuchte Eingangs-URL auf eine Variable im standardmäßigen sessionStorage-Objekt und leitet sofort mithilfe eines Meta-Refresh-Tags auf die index.html -Seite Ihres Projekts um. Wenn Sie eine Github-Organisationssite erstellen, geben Sie keinen Repo-Namen in den Text zum Ersetzen des Inhaltsattributs ein, sondern tun Sie Folgendes: content=“0;URL='/'”

Anpassen der Routenbehandlung

Wenn Sie eine ausgefeiltere Routenbehandlung wünschen, fügen Sie einfach etwas zusätzliche JavaScript-Logik in das oben gezeigte script -Tag ein. Sie können mehrere Dinge optimieren: die Zusammensetzung der href , die Sie an die Seite index.html übergeben; welche Seiten auf der 404-Seite bleiben sollen (durch dynamisches Entfernen des Meta-Tags); und jede andere Logik, die Sie einrichten möchten, um festzulegen, welche Inhalte basierend auf der eingehenden Route angezeigt werden.

512 magische Bytes

Das ist zweifellos eine der seltsamsten Macken, die mir je in der Webentwicklung begegnet sind. Sie müssen sicherstellen, dass die Gesamtgröße Ihrer 404.html Seite größer als 512 Byte ist, denn wenn dies nicht der Fall ist, ignoriert Internet Explorer dies und zeigt stattdessen eine generische Browser-404-Seite an. Als ich das endlich herausfand, musste ich ein Bier aufschlagen, um mit der Zeit fertig zu werden, die es brauchte.

Lasst uns Geschichte schreiben

Um die URL zu erfassen und wiederherzustellen, zu der der Benutzer ursprünglich navigiert ist, müssen Sie das folgende script -Tag zum head Ihrer index.html -Seite hinzufügen, bevor irgendein anderes JavaScript auf den aktuellen Zustand der Seite einwirkt:

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

Dieses Stück JavaScript ruft die URL ab, die wir in sessionStorage auf der Seite 404.html zwischengespeichert haben, und ersetzt den aktuellen history damit. Wie Sie die Dinge von hier aus handhaben, liegt bei Ihnen, aber ich würde popstate und hashchange wenn ich Sie wäre.

Nun, Leute, das war's. Feiern Sie jetzt, indem Sie einige Single-Page-Apps auf GitHub Pages schreiben!

Dieser Artikel ist Teil einer Webentwicklungsserie von Microsoft-Tech-Evangelisten und -Ingenieuren zu praktischem JavaScript-Lernen, Open-Source-Projekten und Best Practices für Interoperabilität, einschließlich Microsoft Edge-Browser.

Wir empfehlen Ihnen, verschiedene Browser und Geräte (einschließlich Microsoft Edge – dem Standardbrowser für Windows 10) mit kostenlosen Tools auf dev.microsoftedge.com zu testen, einschließlich der F12-Entwicklertools: sieben unterschiedliche, vollständig dokumentierte Tools zum Debuggen, Testen und beschleunigen Sie Ihre Webseiten. Besuchen Sie auch den Edge-Blog, um von Microsoft-Entwicklern und -Experten auf dem Laufenden zu bleiben.

Weiterführende Literatur zu SmashingMag:

• Ein einfacher Workflow von der Entwicklung bis zur Bereitstellung
• Erstellen einer vollständigen Web-App in Foundation for Apps
• Erstellen Sie einen Blog mit Jekyll- und GitHub-Seiten