S(GH)PA: jednostronicowy hack aplikacji dla stron GitHub

Od jakiegoś czasu chciałem mieć możliwość kierowania ścieżek dla witryny GitHub Pages do jej index.html w celu obsługi jako aplikacji jednostronicowej (SPA). Jest to stawki tabeli, ponieważ takie aplikacje wymagają, aby wszystkie żądania były kierowane do jednego pliku HTML, chyba że chcesz skopiować ten sam plik na wszystkie trasy za każdym razem, gdy wprowadzasz zmiany w projekcie. Obecnie GitHub Pages nie oferuje rozwiązania do obsługi tras; system Pages ma być płaskim, prostym mechanizmem do obsługi podstawowych treści projektowych.

Na wypadek, gdybyś nie wiedział, GitHub zapewnia jeden kawałek dostosowania witryny projektu: możliwość dodania pliku 404.html i wyświetlenia go jako niestandardowej strony błędu. Zrobiłem pierwszy atak na hack SPA, po prostu powielając mój plik index.html i zmieniając nazwę kopii na 404.html . Okazuje się, że wiele osób doświadczyło tego samego problemu z GitHub Pages i spodobał się ogólny pomysł. Jednak problem, który niektórzy użytkownicy Twittera poprawnie podnieśli, polegał na tym, że strona 404.html jest nadal obsługiwana z kodem stanu 404, co nie jest dobre dla robotów wyszukiwarek. Rękawica została rzucona i postanowiłem odpowiedzieć — i odpowiedzieć energicznie!

Jeszcze raz z uczuciem

Po przespaniu się na nim pomyślałem: „Ja, jesteśmy głęboko w brudnym terytorium hakerskim, więc dlaczego nie uczynię tego hakowania jeszcze bardziej brudnym?!” W tym celu opracowałem jeszcze lepszy hack, który zapewnia tę samą funkcjonalność i prostotę, jednocześnie zachowując sok robota indeksującego Twojej witryny — i nie musisz już tracić czasu na duplikowanie pliku index.html i zmienianie jego nazwy na 404.html ! Poniższe rozwiązanie powinno działać we wszystkich nowoczesnych przeglądarkach stacjonarnych i mobilnych (Edge, Chrome, Firefox, Safari) oraz w przeglądarce Internet Explorer 10+.

Szablon i demonstracja : jeśli chcesz pominąć wyjaśnienie i otrzymać towary, oto szablon repozytorium i testowy adres URL, aby zobaczyć go w akcji.

To takie meta

Pierwszą rzeczą, którą zrobiłem, było zbadanie innych opcji przekierowania przeglądarki na stronę index.html . Ta część była całkiem prosta. Zasadniczo masz trzy opcje: konfigurację serwera, manipulację location JavaScript lub metatag refresh . Pierwsza z nich jest oczywiście niedostępna dla stron GitHub. A JavaScript jest w zasadzie taki sam jak odświeżanie, ale prawdopodobnie gorzej w indeksowaniu robota. To pozostawia nam metatag. Wygląda na to, że metatag z wartością odświeżania równą 0 jest traktowany przez wyszukiwarki jako przekierowanie 301, co dobrze sprawdza się w tym przypadku użycia.

Musisz zacząć od dodania pliku 404.html do repozytorium gh-pages , które zawiera w sobie pusty dokument HTML. Ten dokument musi mieć łącznie więcej niż 512 bajtów (wyjaśniono poniżej). Następnie umieść następujący znacznik w elemencie head strony 404.html :

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

Ten kod ustawia adres URL próby wejścia na zmienną w standardowym obiekcie sessionStorage i natychmiast przekierowuje do strony index.html projektu przy użyciu metatagu odświeżania. Jeśli tworzysz witrynę organizacji Github, nie umieszczaj nazwy repozytorium w tekście zastępującym atrybut zawartości, po prostu zrób to: content=“0;URL='/'”

Dostosowywanie obsługi tras

Jeśli chcesz bardziej rozbudowanej obsługi tras, po prostu dołącz dodatkową logikę JavaScript w tagu script pokazanym powyżej. Możesz dostosować kilka rzeczy: kompozycję href , które przekazujesz na stronę index.html ; które strony powinny pozostać na stronie 404 (poprzez dynamiczne usuwanie metatagu); oraz wszelkie inne logiki, które chcesz wprowadzić, aby dyktować, jaka zawartość jest wyświetlana na podstawie trasy przychodzącej.

512 magicznych bajtów

Jest to jedno z najdziwniejszych dziwactw, jakie kiedykolwiek napotkałem w tworzeniu stron internetowych. Musisz upewnić się, że całkowity rozmiar Twojej strony 404.html jest większy niż 512 bajtów, ponieważ jeśli tak nie jest, Internet Explorer zignoruje go i zamiast tego wyświetli ogólną stronę 404 przeglądarki. Kiedy w końcu to zrozumiałem, musiałem otworzyć piwo, aby poradzić sobie z ilością czasu, która to zajęła.

Stwórzmy historię

Aby przechwycić i przywrócić adres URL, do którego początkowo przeszedł użytkownik, należy dodać następujący tag script w head strony index.html , zanim jakikolwiek inny kod JavaScript będzie działał na bieżący stan strony:

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

Ten fragment kodu JavaScript pobiera adres URL, który buforowaliśmy w sessionStorage na stronie 404.html i zastępuje nim bieżący wpis history . Od ciebie zależy, jak sobie z tym poradzisz, ale na twoim popstate i hashchange .

Cóż, ludzie, to wszystko. Teraz idź świętować, pisząc kilka aplikacji jednostronicowych na GitHub Pages!

Ten artykuł jest częścią serii poświęconej tworzeniu stron internetowych opracowanej przez ewangelistów technicznych i inżynierów firmy Microsoft na temat praktycznej nauki języka JavaScript, projektów typu open source i najlepszych praktyk dotyczących interoperacyjności, w tym przeglądarki Microsoft Edge.

Zachęcamy do testowania na różnych przeglądarkach i urządzeniach (w tym Microsoft Edge — domyślnej przeglądarce w systemie Windows 10) za pomocą bezpłatnych narzędzi w witrynie dev.microsoftedge.com, w tym narzędzi programistycznych F12: siedmiu odrębnych, w pełni udokumentowanych narzędzi ułatwiających debugowanie, testowanie i przyspieszyć swoje strony internetowe. Odwiedź także blog Edge, aby otrzymywać informacje od programistów i ekspertów firmy Microsoft.

Dalsze czytanie na SmashingMag:

• Prosty przepływ pracy od rozwoju do wdrożenia
• Tworzenie kompletnej aplikacji internetowej w bazie aplikacji
• Zbuduj blog ze stronami Jekyll i GitHub