Pagini frumoase, cu o pagină netedă, cu ajutorul API-ului Web History

În acest tutorial vom construi un site web cu pagini de tranziție frumoase, fără reîmprospătarea obișnuită a paginii agresive. Navigați prin paginile din demo pentru a vedea ce vreau să spun.

Pentru a realiza acest efect, vom folosi API-ul Web History. Pe scurt, acest API este folosit pentru a modifica istoricul browserului. Aceasta ne permite să încărcăm o nouă adresă URL, să modificăm titlul paginii, apoi să o înregistrăm în același timp ca o nouă vizită în browser fără a fi necesară încărcarea efectivă a paginii.

Acest lucru pare confuz, dar deschide o serie de posibilități - cum ar fi posibilitatea de a servi tranziții mai fine ale paginii și de a da un sentiment de viteză care îmbunătățește experiența utilizatorului. Probabil că ați asistat deja la API-ul Web History în acțiune pe un număr de site-uri Web și aplicații web, cum ar fi Trello, Quartz și Privacy.

Site-ul destul de abstract (și destul de frumos) cu cuarț

Înainte de a merge mai departe, să examinăm mai întâi într-un anumit API pe care o vom implementa pe site.

Aplicația Web History API, pe scurt

Pentru a accesa API-ul Web History, mai întâi scrieți window.history apoi urmați acest lucru cu unul dintre API-urile; o metodă sau o proprietate. În acest tutorial ne vom concentra pe pushState () astfel:

window.history.pushState (stat, titlu, url);

După cum puteți vedea din fragmentul de mai sus, pushState () metoda are trei parametri. 

1. Primul parametru, stat, ar trebui să fie un obiect care conține date arbitrare. Aceste date vor fi apoi accesibile prin intermediul window.history.state. Într-o aplicație din lumea reală, vom transmite date precum un ID de pagină, o adresă URL sau intrări serializate derivate dintr-un formular. 
2. Ultimii doi parametri sunt titlu și
3. URL-ul. Acestea două schimbă URL-ul și titlul documentului în browser, precum și le înregistrează ca o intrare nouă în istoricul browser-ului. 

Să examinăm următorul exemplu pentru a înțelege mai bine cum pushState () Metoda funcționează.

(functie ($) $ ("a") .on ("click", functie (eveniment) event.preventDefault (); window.history.pushState /)););) (jQuery);

În codul de mai sus, o legătură atașată la clic evenimentul apoi pune în aplicare pushState () metodă. Pe măsură ce faceți clic pe link, așteptăm ca codul să schimbe titlul documentului și adresa URL:

De sus până jos: Chrome, Firefox, Opera.

Și asta se întâmplă; screenshotul arată că adresa URL este schimbată în "about /" așa cum este definită în pushState () metodă. Și din moment ce pushState () metoda creează o nouă înregistrare în istoricul browser-ului, putem reveni la pagina anterioară prin intermediul browserului Înapoi buton.

Cu toate acestea, toate browserele din acest exemplu ignoră în prezent titlu parametru. Puteți vedea din ecranul pe care documentul nu se schimbă Despre - Acme așa cum se specifică. În plus, apelarea pushState () metoda nu va declanșa de asemenea popstate eveniment; un eveniment expediat de fiecare dată când se schimbă istoria - ceva de care avem nevoie! Există câteva discrepanțe privind modul în care browserele gestionează acest eveniment, după cum se menționează în MDN:

"Navigatorii tind să se ocupe de popstate eveniment diferit la încărcarea paginii. Chrome (înainte de v34) și Safari emit întotdeauna a popstate eveniment la pagina de încărcare, dar Firefox nu. "

Vom avea nevoie de o bibliotecă ca o rezervă pentru a face API-urile Istoric Web să funcționeze în mod consecvent în browser fără nici un fel de obstacole.

Meet History.js

Din moment ce pushState () metoda nu funcționează la întregul său potențial, în acest tutorial ne vom ocupa de History.js. După cum sugerează și numele, această bibliotecă JavaScript este a polyfill, replicând API-urile de Istorie Nativă care funcționează în diferite browsere. De asemenea, expune un set de metode similare API-urilor native, deși cu puține diferențe.

După cum am menționat mai devreme, API-ul nativ al browserului este apelat prin istorie obiect fereastră cu litera "h", în timp ce este accesat API-ul History.js Istorie cu majusculă "H". Având în vedere exemplul anterior și presupunând că avem fișierul history.js încărcat, putem revizui codul, după cum urmează (din nou, observați majusculă "H").

window.History.pushState (, titlu, url); 

Sper că această scurtă explicație este ușor de înțeles. Altfel, iată câteva referințe suplimentare dacă doriți să aflați mai multe despre API-ul Web History.

• Istoric API
• Manipularea istoricului browserului
• O introducere în istoricul HTML5

Construirea site-ului nostru static

În această secțiune nu vom discuta fiecare pas necesar pentru a construi în detaliu un site web static. Site-ul nostru este simplu simplu, după cum se arată în următoarea imagine:

Pagina de pornire a site-ului

Nu trebuie să creați un site care să pară exact același; aveți libertatea de a adăuga orice conținut și de a crea cât mai multe pagini de care aveți nevoie. Cu toate acestea, există câteva puncte particulare pe care trebuie să le luați în considerare în ceea ce privește structura HTML și utilizarea id și clasă atribute pentru unele elemente.

1. Încărcați jQuery și History.js în document cap. Poate fi încărcat ca o dependență de proiect prin Bower sau printr-un CDN cum ar fi CDNJS sau JSDelivr.
2. Înfășurați antetul, conținutul și subsolul în a div cu ID-ul împacheta; 
3. Există câteva elemente de navigare pe antetul site-ului web și pe subsol. Fiecare meniu ar trebui să indice o pagină. Asigurați-vă că paginile există și că aveți conținut.
4. Fiecare link de meniu este dat link-ul paginii clasa pe care o vom folosi pentru selectarea acestor meniuri.
5. În cele din urmă, dăm fiecare legătură a titlu atributul la care vom trece la pushState () pentru a determina titlul documentului.

Luând în considerare toate acestea, marcajul nostru HTML va arăta aproximativ după cum urmează:

Când ați terminat construirea site-ului dvs. static, putem trece în secțiunea principală a acestui tutorial.

Aplicarea API-ului Web History

Înainte de a începe scrierea oricărui cod, trebuie să creați un nou fișier pentru a ține JavaScript; o vom numi script.js și încărcați fișierul în document înainte de corp tag-ul de închidere. 

Să adăugăm prima noastră bucată de cod pentru a modifica titlul documentului și adresa URL după ce faceți clic pe navigarea prin meniu:

// 1. var $ wrap = $ ("#wrap"); // 2. $ wrap.on ("clic", ".page-link", funcție (eveniment) // 3. event.preventDefault (); // 4. if (window.location === this.href ) retur; // 5. var pageTitle = (this.title)? this.title: this.textContent; pageTitle = (this.getAttribute ("rel") === "home")? pageTitle: pageTitle + - "Acme"; // 6. History.pushState (null, pageTitle, this.href););

Am împărțit codul separat în mai multe secțiuni numerotate. Acestea vă vor face mai ușor să identificați codul cu următoarea referință:

1. Pe prima linie, selectăm elementul, 
   , care împachetează tot conținutul site-ului nostru.
2. Am atașat evenimentul de clic. Dar, după cum puteți vedea mai sus, îl atașăm la #wrap în loc să atașați evenimentul direct pe fiecare navigare de meniu. Această practică este cunoscută sub numele de eveniment delegare. Cu alte cuvinte, ale noastre #wrap elementul este responsabil pentru ascultarea de evenimente click în numele .link-ul paginii.
3. Am adăugat și noi event.preventDefault () astfel încât utilizatorii să nu fie direcționați spre pagina în cauză.
4. Dacă URL-ul meniului clickat este același cu fereastra curentă, nu este necesar să continuăm cu operația următoare, pur și simplu pentru că nu este necesar.
5.  titlul paginii variabila conține formatul titlului, derivat din atributul titlul linkului sau din textul linkului. Fiecare titlu al paginii urmează Pagina Titlu - Acme convenție, cu excepția paginii de pornire. "Acme" este numele companiei noastre fictive.
6. În cele din urmă, trecem titlul paginii și adresa URL a paginii la History.js pushState () metodă.

În acest moment, când faceți clic pe navigarea din meniu, titlul și adresa URL ar trebui să se modifice în consecință, după cum se arată mai jos:

Titlul paginii și adresa URL sunt modificate

Cu toate acestea, conținutul paginii rămâne același! Nu este actualizat pentru a se potrivi cu noul titlu și noua adresă URL. 

Conţinut

Trebuie să adăugăm următoarele linii de cod pentru a înlocui conținutul propriu-zis al paginii.

// 1. History.Adapter.bind (fereastra, "statechange", function () // 2. var state = History.getState (); // 3. $ .get (state.url, function (res) // $ $. ($ (Res), function (index, elem) if ($ wrap.selector! == "#" + elem.id) return; $ wrap.html .html ());););); 

Din nou, codul este împărțit în mai multe secțiuni numerotate.

1. Prima linie a codului ascultă modificarea Istoricului efectuată prin intermediul History.js pushState () și execută funcția atașată.
2. Descoperim modificările de stare, conținând diverse date, cum ar fi o adresă URL, un titlu și un id.
3. Prin jQuery .obține() metodă vom prelua conținutul de la adresa URL dată.
4. În sfârșit, rezolvăm elementul cu un id numit împacheta din conținutul preluat și, eventual, să înlocuiți conținutul curent al paginii cu acesta.

Odată ce a fost adăugat, conținutul ar trebui să fie actualizat atunci când faceți clic pe navigarea din meniu. Așa cum am menționat, putem accesa și paginile vizitate înainte și înapoi prin browser Înapoi și Redirecţiona butoane.

Site-ul nostru este prezent în acest moment. Cu toate acestea, dorim să mergem mai departe adăugând o mică animație pentru a aduce pagina la viață și, în cele din urmă, site-ul nostru se simte mai convingător.

Adăugarea de animație și tranziții

Animația în această situație trebuie să fie simplă, așa că vom scrie totul pentru zgârieturi, în loc să încărcăm animații printr-o bibliotecă cum ar fi Animate.css, Motion UI din ZURB sau Effeckt.css. Vom numi animația slideInUp, după cum urmează:

@frame cheie slideInUp de la transform: translate3d (0, 10px, 0); opacitate: 0;  pentru a transforma translate3d (0, 0, 0); opacitate: 1; 

După cum sugerează și numele, animația va glisa conținutul paginii de jos în sus împreună cu opacitatea elementului. Aplicați animația la elementul care înfășoară conținutul principal al paginii, după cum urmează.

.secțiune animație-durată: .38s; animație-umplere-mod: ambele; animație-nume: slideInUp;  

Trecerea de la o pagină la alta ar trebui să se simtă acum mai ușoară odată ce animația este aplicată. Aici, puteți opri și o numiți o zi! Site-ul nostru este realizat și suntem gata să îl implementăm pentru a vedea lumea.

Cu toate acestea, există încă un lucru pe care ar trebui să îl adăugați, mai ales pentru cei care doresc să monitorizeze numărul de vizite și comportamentul vizitatorilor pe site-ul dvs..

Trebuie să adăugăm Google Analytics pentru a urmări fiecare vizualizare pagina.

Google Analytics

Deoarece paginile noastre vor fi încărcate în mod asincron (cu excepția iniţială pagina încărcată) urmărirea numărului de vizualizare a paginii ar trebui să se facă și în mod asincron.

Pentru început, asigurați-vă că ați adăugat standardul Google Analytics în document cap. De obicei, codul arată după cum urmează:

Apoi, trebuie să modificăm codul nostru JavaScript pentru a include codul de urmărire Google Analytics astfel încât fiecare pagină încărcată în mod asincron să fie, de asemenea, măsurată ca vizualizare pagina.

Avem mai multe opțiuni. În primul rând, putem începe să numărăm când utilizatorul face clic pe un link de navigare sau când schimbă titlul paginii și adresa URL sau când conținutul paginii a fost încărcat complet.

Vom opta pentru acesta din urmă, care este, probabil, cel mai autentic și, în acest mod, vom folosi efectul jQuery promisiune() după modificarea conținutului paginii, după cum urmează:

$ wrap.html ($ (elem) .html ()) .promise () .done (funcția (res) // Asigurați-vă că noul conținut este adăugat și că metoda "ga () ga === "funcția" && res.length! == 0) ga ('set', page: window.location.pathname, title: state.title); ;);

Asta este tot ce este, vom avea acum vizualizare pagina înregistrată în Google Analytics.

Înfășurarea în sus

În acest tutorial am îmbunătățit un site web static simplu cu API-ul Web History pentru a ușura trecerea la pagini, încărcarea mai rapidă și, în general, pentru a oferi o experiență mai bună utilizatorilor noștri. La sfârșitul acestui tutorial, am implementat și Google Analytics pentru a înregistra utilizatori vizualizare pagina asincronă. În plus, site-ul nostru este perfect târască-able de către motoarele de căutare, deoarece este, după cum sa menționat, doar un simplu site HTML.

Acesta a fost un tutorial de mâncare, explicând multe lucruri precum CSS Animation, jQuery Ajax și Promise jQuery. Iată câteva referințe pe care trebuie să le priviți pentru a vă consolida ceea ce ați învățat.

• Inițierea unui începător în animația CSS
• Sfat rapid: Delegarea evenimentului JavaScript în 4 minute
• AJAX pentru designeri frontali
• Ceartă async Sarcini cu promisiunile jQuery
• Demistificarea Google Analytics

În cele din urmă, nu uitați să vizitați site-ul demo al acestui tutorial, precum și codul sursă din depozit.