S(GH)PA: Hackul aplicației cu o singură pagină pentru paginile GitHub

Publicat: 2022-03-10
Rezumat rapid ↬ lorem ipsum

De ceva timp, îmi doresc posibilitatea de a direcționa căi pentru un site web GitHub Pages către index.html acestuia pentru a fi gestionat ca o aplicație cu o singură pagină (SPA). Aceasta este miza de masă, deoarece astfel de aplicații necesită ca toate solicitările să fie direcționate către un fișier HTML, cu excepția cazului în care doriți să copiați același fișier pe toate rutele de fiecare dată când faceți o modificare a proiectului. În prezent, GitHub Pages nu oferă o soluție de gestionare a rutelor; sistemul Pages se dorește a fi un mecanism simplu și simplu pentru difuzarea conținutului de bază al proiectului.

În cazul în care nu știai, GitHub oferă o bucată de personalizare pentru site-ul web al proiectului: abilitatea de a adăuga un fișier 404.html și de a-l servi ca pagină de eroare personalizată. Am făcut o primă încercare la un hack SPA pur și simplu duplicând fișierul meu index.html și redenumind copia în 404.html . Se pare că mulți oameni s-au confruntat cu aceeași problemă cu Paginile GitHub și le-a plăcut ideea generală. Cu toate acestea, problema pe care unii oameni de pe Twitter au ridicat-o corect a fost că pagina 404.html este încă difuzată cu un cod de stare 404, ceea ce nu este bun pentru crawlerele motoarelor de căutare. Mănușa fusese aruncată jos și am decis să răspund – și să răspund cu vigoare!

Încă o dată, cu sentiment

După ce am dormit pe el, m-am gândit în sinea mea: „Eu însumi, suntem adânci într-un teritoriu murdar de hack, așa că de ce nu fac acest hack și mai murdar?!” În acest scop, am dezvoltat un hack și mai bun, care oferă aceeași funcționalitate și simplitate, păstrând totodată sucul de crawler al site-ului dvs. - și nici nu mai trebuie să pierdeți timpul duplicând fișierul index.html și redenumindu-l în 404.html . ! Următoarea soluție ar trebui să funcționeze în toate browserele desktop și mobile moderne (Edge, Chrome, Firefox, Safari) și în Internet Explorer 10+.

Șablon și demonstrație : dacă doriți să omiteți explicația și să obțineți bunurile, iată un depozit de șablon și o adresă URL de testare pentru a-l vedea în acțiune.

Mai multe după săritură! Continuați să citiți mai jos ↓

Asta e So Meta

Primul lucru pe care l-am făcut a fost să investighez alte opțiuni pentru ca browserul să redirecționeze către pagina index.html . Partea aceea a fost destul de simplă. Practic, aveți trei opțiuni: o configurare a serverului, o manipulare a location JavaScript sau o metaetichetă de refresh . Prima este în mod evident o interdicție pentru paginile GitHub. Și JavaScript este practic la fel ca o reîmprospătare, dar probabil mai rău pentru indexarea crawler-ului. Asta ne lasă cu metaeticheta. O metaetichetă cu o valoare de reîmprospătare de 0 pare să fie tratată ca o redirecționare 301 de către motoarele de căutare, ceea ce funcționează bine pentru acest caz de utilizare.

Va trebui să începeți prin adăugarea unui fișier 404.html într-un depozit gh-pages care conține un document HTML gol în interiorul acestuia. Acest document trebuie să însumeze mai mult de 512 de octeți (explicat mai jos). Apoi, introduceți următorul marcaj în elementul head al paginii dvs. 404.html :

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

Acest cod setează adresa URL de intrare încercată la o variabilă din obiectul standard sessionStorage și redirecționează imediat către pagina index.html a proiectului dvs. folosind o etichetă meta reîmprospătare. Dacă faceți un site de organizare Github, nu puneți un nume de depozit în textul de înlocuire a atributului de conținut, doar faceți acest lucru: content=“0;URL='/'”

Personalizarea gestionării rutelor

Dacă doriți o gestionare mai elaborată a rutei, includeți doar o logică JavaScript suplimentară în eticheta de script afișată mai sus. Puteți modifica mai multe lucruri: compoziția href pe care o treceți la pagina index.html ; ce pagini ar trebui să rămână pe pagina 404 (prin eliminarea dinamică a etichetei meta); și orice altă logică pe care doriți să o implementați pentru a dicta conținutul afișat în funcție de ruta de intrare.

512 octeți magici

Aceasta este, fără îndoială, una dintre cele mai ciudate ciudatenii pe care le-am întâlnit vreodată în dezvoltarea web. Trebuie să vă asigurați că dimensiunea totală a paginii dvs. 404.html este mai mare de 512 octeți, deoarece, dacă nu este, Internet Explorer o va ignora și va afișa în schimb o pagină 404 de browser generică. Când în sfârșit mi-am dat seama, a trebuit să deschid o bere pentru a face față timpului necesar.

Să facem istorie

Pentru a captura și a restabili adresa URL la care a navigat inițial utilizatorul, va trebui să adăugați următoarea etichetă de script în head paginii dvs. index.html înainte ca orice alt JavaScript să acționeze asupra stării actuale a paginii:

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

Acest fragment de JavaScript preia adresa URL pe care am stocat-o în cache în sessionStorage pe pagina 404.html și înlocuiește intrarea curentă a history cu aceasta. Cum alegi să gestionezi lucrurile de aici depinde de tine, dar aș folosi popstate și hashchange dacă aș fi în locul tău.

Ei bine, oameni buni, asta este. Acum sărbătoriți scriind niște aplicații cu o singură pagină pe Paginile GitHub!

Acest articol face parte dintr-o serie de dezvoltare web de la evangheliști și ingineri din tehnologie Microsoft despre învățarea practică JavaScript, proiecte open-source și cele mai bune practici de interoperabilitate, inclusiv browserul Microsoft Edge.

Vă încurajăm să testați pe browsere și dispozitive (inclusiv Microsoft Edge - browserul implicit pentru Windows 10) cu instrumente gratuite pe dev.microsoftedge.com, inclusiv instrumente pentru dezvoltatori F12: șapte instrumente distincte, complet documentate, care vă ajută să depanați, să testați și accelerați paginile dvs. web. De asemenea, vizitați blogul Edge pentru a fi informat de dezvoltatorii și experții Microsoft.

Citiți suplimentare despre SmashingMag:

  • Un flux de lucru simplu, de la dezvoltare până la implementare
  • Crearea unei aplicații web complete în Foundation For Apps
  • Creați un blog cu pagini Jekyll și GitHub