Nydelige, glatte sidetransisjoner med History Web API

I denne opplæringen skal vi bygge et nettsted med vakkert glatte overgangssider, uten den vanlige aggressive sideoppdateringen. Naviger gjennom sidene i demoen for å se hva jeg mener.

For å oppnå denne effekten bruker vi API for History Web. I et nøtteskall brukes denne API for å endre nettleserloggen. Det tillater oss å laste inn en ny nettadresse, endre sidetittelen, og samtidig registrere den som et nytt besøk i nettleseren uten å måtte laste siden faktisk..

Dette virker forvirrende, men det åpner for en rekke muligheter, for eksempel å kunne tjene jevnere sidetransisjoner og gi en følelse av fart som forbedrer brukeropplevelsen. Du har sikkert allerede vært vitne til API for nettlogg i handling på en rekke nettsteder og webprogrammer, for eksempel Trello, Quartz og Personvern.

Den ganske abstrakte (og ganske fin) kvarts nettsiden

Før vi går videre, la oss først se på en bestemt API som vi skal distribuere på nettsiden.

API for History Web, i korthet

For å få tilgang til API for nettlogg skriver vi først window.history følg deretter dette med en av APIene; en metode eller en eiendom. I denne opplæringen vil vi fokusere på pushstate () metode, så:

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

Som du kan se fra den ovennevnte koden, er pushstate () metoden tar tre parametere. 

1. Den første parameteren, stat, bør være et objekt som inneholder vilkårlig data. Disse dataene vil da være tilgjengelige gjennom window.history.state. I en ekte verdensapplikasjon vil vi overføre data som en side-ID, en nettadresse eller serielliserte innganger som er hentet fra et skjema. 
2. De to siste parameterne er tittel og
3. url. Disse to endrer nettadressen og dokumenttittelen i nettleseren, samt registrerer dem som en ny oppføring i nettleserloggen. 

La oss dissekere følgende eksempel for å bedre forstå hvordan pushstate () Metoden fungerer.

(funksjon ($) $ ("a") .on ("klikk", funksjon (hendelse) event.preventDefault (); window.history.pushState (ID: 9, "About - Acme" / "););) (jQuery);

I ovennevnte kode er en lenke knyttet til klikk hendelsen deployer deretter pushstate () metode. Når vi klikker på koblingen, forventer vi at koden skal endre dokumenttittel og URL:

Fra topp til bunn: Chrome, Firefox, Opera.

Og det gjør det; skjermbildet viser nettadressen er endret til "om /" som definert i pushstate () metode. Og siden pushstate () Metoden lager en ny post i nettleserloggen, vi kan gå tilbake til forrige side gjennom nettleseren Tilbake knapp.

Men alle nettleserne i dette eksemplet ignorerer for øyeblikket tittel parameter. Du kan se fra skjermbildet, dokumentet endres ikke til Om - Acme som spesifisert. Videre ringer til pushstate () Metoden vil ikke også utløse popstate begivenhet; et arrangement som sendes hver gang historien endrer seg - noe vi trenger! Det er noen uoverensstemmelser om hvordan nettlesere håndterer denne hendelsen, som angitt i MDN:

"Nettlesere har en tendens til å håndtere popstate Hendelsen annerledes på sidebelastning. Chrome (før v34) og Safari sender alltid a popstate hendelse på sidebelastning, men Firefox gjør det ikke. "

Vi trenger et bibliotek som tilbakebetaling for å gjøre API-nettene for History Web-arbeid fungerer konsekvent over nettleseren uten noen hindringer.

Møt History.js

Siden pushstate () Metoden virker ikke fullt ut, i denne opplæringen skal vi utnytte History.js. Som navnet antyder, er dette JavaScript-biblioteket en polyfill, kopiere de opprinnelige historikk-APIene som fungerer over forskjellige nettlesere. Det avslører også et sett med metoder som ligner på de innfødte APIene, om enn med få forskjeller.

Som nevnt tidligere, kalles nettleserens innfødte API gjennom historie vindu objekt med små bokstaver "h", mens API-filen History.js er tilgjengelig gjennom Historie med store bokstaver "H". Gitt det forrige eksempelet og antar at vi har history.js-filen lastet, kan vi revidere koden, som følger (igjen, legg merke til store bokstaver "H").

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

Jeg håper denne korte forklaringen er lett å forstå. Ellers er det noen flere referanser hvis du vil lære mer om API-nett for nettloggen.

• History API
• Manipulere nettleserhistorikken
• En introduksjon til HTML5-historien

Bygg vårt statiske nettsted

I denne delen diskuterer vi ikke hvert trinn for å bygge en statisk nettside i detalj. Vår nettside er enkel, som vist på følgende skjermbilde:

Nettstedets hjemmeside

Du trenger ikke å opprette et nettsted som ser ut akkurat det samme. Du er fri til å legge til noe innhold og opprette så mange sider som du trenger. Det er imidlertid noen spesielle punkter du må vurdere om HTML-strukturen og bruken av id og klasse attributter for enkelte elementer.

1. Legg inn jQuery og History.js i dokumentet hode. Du kan laste det som en prosjektavhengighet gjennom Bower, eller gjennom en CDN som CDNJS eller JSDelivr.
2. Vik inn overskriften, innholdet og bunnteksten i en div med ID pakke inn; 
3. Det er noen navigasjonselementer på nettstedets overskrift og bunnteksten. Hver meny skal peke på en side. Kontroller at sidene eksisterer og har innhold.
4. Hver meny lenke er gitt side-link klasse som vi skal bruke for å velge disse menyene.
5. Til slutt gir vi hver lenke a tittel attributt som vi skal passere til pushstate () for å bestemme dokumenttittelen.

Tatt i betraktning alt dette, vil HTML-oppslaget vårt omtrentlig se ut som følger:

Når du er ferdig med å bygge din statiske nettside, kan vi gå videre til hoveddelen av denne opplæringen.

Bruk av API for History Web

Før vi begynner å skrive noen kode, må vi opprette en ny fil for å holde vår JavaScript; vi skal nevne det script.js og last filen i dokumentet før kropp avsluttende tag. 

La oss legge til vårt første stykke kode for å endre dokumenttittel og URL ved å klikke på menynavigasjonen:

// 1. var $ wrap = $ ("#wrap"); // 2. $ wrap.on ("click", ".page-link", funksjon (hendelse) // 3. event.preventDefault (); // 4. hvis (window.location === this.href ) return; // 5. var sideTitle = (this.title)? this.title: this.textContent; pageTitle = (this.getAttribute ("rel") === "hjem")? ​​pageTitle: pageTitle + â € "Acme"; // 6. History.pushState (null, sideTitle, this.href););

Jeg har delt koden fra hverandre i flere nummererte seksjoner. Disse vil gjøre det enklere for deg å finne koden med følgende referanse:

1. På den første linjen velger vi elementet, 
   , som bryter inn alt vårt nettstedinnhold.
2. Vi legger til klikkhendelsen. Men, som du kan se over, legger vi det til #pakke inn element i stedet for å legge hendelsen direkte på hver menynavigasjon. Denne praksisen er kjent som arrangement delegering. Med andre ord, vår #pakke inn elementet er ansvarlig for å lytte til hendelser på vegne av .side-link.
3. Vi har også lagt til event.preventDefault () slik at brukerne ikke vil bli ledet til den aktuelle siden.
4. Hvis den klikkede menyadressen er den samme som det nåværende vinduet, trenger vi ikke fortsette til neste operasjon, bare fordi det ikke er nødvendig.
5. De side tittel variabel inneholder tittelformatet, avledet fra linktittelattributtet eller lenketeksten. Hver side tittel følger Side Tittel - Acme konvensjon, unntatt hjemmesiden. "Acme" er vårt fiktive firmanavn.
6. Til slutt passerer vi side tittel og siden URL til History.js pushstate () metode.

På dette tidspunktet, når vi klikker på menynavigasjonen, skal tittelen og nettadressen endres tilsvarende som vist nedenfor:

Sidetittelen og nettadressen endres

Likevel er sidens innhold det samme! Det er ikke oppdatert for å matche den nye tittelen og den nye nettadressen. 

Innhold

Vi må legge til følgende kodelinjer for å erstatte det faktiske sidens innhold.

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

Igjen er koden her delt inn i flere nummererte seksjoner.

1. Den første linjen i koden lytter til historikkendringen utført via History.js pushstate () metode og kjører den vedlagte funksjonen.
2. Vi henter statsendringene, og inneholder ulike data som en URL, tittel og ID.
3. Gjennom jQuery .få() Metode vi henter innholdet fra den oppgitte nettadressen.
4. Til slutt sorterer vi elementet ut med en id oppkalt pakke inn fra det hentede innholdet, og til slutt erstatte det nåværende sideinnholdet med det.

Når det er lagt til, bør innholdet nå oppdateres når vi klikker på menynavigasjonen. Som nevnt, kan vi også få tilgang til besøkte sider frem og tilbake gjennom nettleseren Tilbake og Framover knapper.

Vår nettside er presentabel på dette tidspunktet. Vi ønsker imidlertid å gå videre ved å legge til en liten animasjon for å bringe siden til liv, og til slutt føler nettstedet vårt mer overbevisende.

Legge til animasjon og overganger

Animasjon i denne situasjonen trenger bare å være enkel, så vi vil skrive alt fra riper, i stedet for å laste animasjoner gjennom et bibliotek som Animate.css, Motion UI of ZURB, eller Effeckt.css. Vi nevner animasjonen slideInUp, som følger:

@keyframes slideInUp fra transform: translate3d (0, 10px, 0); opasitet: 0;  til transform: translate3d (0, 0, 0); opasitet: 1; 

Som navnet antyder, vil animasjonen skyve sidens innhold fra bunn til toppen sammen med elementets opasitet. Bruk animasjonen til elementet som bryter inn hovedinnholdet på siden, som følger.

.avsnitt animasjon-varighet: .38s; animasjons-fyll-modus: begge deler; animasjonsnavn: slideInUp;  

Overgangen fra en side til en annen bør nå føles mykere når animasjonen er brukt. Her kan du stoppe og ringe det en dag! Vår nettside er ferdig, og vi er klare til å distribuere den til verden for å se.

Det er imidlertid en ting du må vurdere å legge til, spesielt for de som ønsker å overvåke antall besøk og de besøkendees oppførsel på nettstedet ditt.

Vi må legge til Google Analytics for å spore hver sidevisning.

Google Analytics

Siden våre sider vil bli lastet asynkront (bortsett fra første side lastet) sporing av sidevisningsnummeret bør også gjøres asynkront.

Først må du sørge for at standard Google Analytics er lagt til i dokumentet hode. Koden ser vanligvis ut som følger:

Da må vi justere JavaScript-koden vår for å inkludere sporingskoden for Google Analytics slik at hver side som lastes asynkront, måles også som en sidevisning.

Vi har flere alternativer. Først kan vi begynne å telle når brukeren klikker en navigasjonslink, eller når du endrer sidetittel og URL, eller når innholdet på siden er fullstendig lastet.

Vi velger den sistnevnte, som er uten tvil den mest autentiske, og dermed utnytter vi jQuery love() metode etter at vi endrer sidens innhold, som følger:

$ wrap.html ($ (elem) .html ()) .promise () .done (funksjon (res) // Kontroller at det nye innholdet er lagt til, og 'ga ()' metoden er tilgjengelig. ga === "funksjon" && res.length! == 0) ga ('sett', side: window.location.pathname, title: state.title); ga ('send', 'sidevisning') ;);

Det er alt det er, vi vil nå ha sidevisning registrert i Google Analytics.

Wrapping Up

I denne opplæringen har vi forbedret et enkelt statisk nettsted med Web History API for å gjøre sidovergangen jevnere, lasten raskere, og samlet gir en bedre opplevelse til brukerne. På slutten av denne opplæringen implementerte vi også Google Analytics for å registrere bruker sidevisning asynkront. I tillegg er vår nettside perfekt gjennomgå-stand av søkemotor bots siden det er, som nevnt, bare en enkel HTML-nettside.

Dette var en kjedelig opplæring, og forklarte mange ting som CSS Animation, jQuery Ajax og jQuery Promise. Her er en håndfull referanser for deg å se på, for å styrke hva du har lært.

• En nybegynners introduksjon til CSS Animasjon
• Hurtig Tips: Delegasjon av JavaScript-begivenhet på 4 minutter
• AJAX for Front-End Designers
• krangle Async Oppgaver med jQuery-løfter
• Demystifying Google Analytics

Til slutt, ikke glem å besøke demo-siden av denne opplæringen, så vel som kildekoden i depotet.