Underbara, smidiga sidövergångar med API för historia

I denna handledning kommer vi att bygga en webbplats med vackert smidiga övergångssidor, utan den vanliga aggressiva uppdateringen av sidan. Navigera genom sidorna i demo för att se vad jag menar.

För att uppnå denna effekt använder vi API för History Web. I ett nötskal används detta API för att ändra webbläsarens historia. Det tillåter oss att ladda en ny webbadress, ändra sidtiteln och sedan spela in det som ett nytt besök i webbläsaren utan att behöva ladda sidan faktiskt.

Det låter förvirrande, men det öppnar ett antal möjligheter, till exempel att kunna erbjuda smidigare sidövergångar och ge en känsla av snabbhet vilket förbättrar användarupplevelsen. Du har nog redan bevittnat API för webbhistorik i åtgärd på ett antal webbplatser och webbapplikationer, till exempel Trello, Quartz och Privacy..

Den ganska abstrakta (och ganska snygga) kvartswebbplatsen

Innan vi går längre, låt oss först titta på ett visst API som vi ska distribuera på webbplatsen.

API-nätet för historia, i korthet

För att komma åt API för webbhistorik skriver vi först window.history följ sedan detta med en av API: erna en metod eller en egendom. I denna handledning kommer vi att fokusera på pushstate () metod, så:

window.history.pushState (state, title, url);

Som du kan se från ovanstående kod, pushstate () Metoden tar tre parametrar.

Den första parametern, stat, bör vara ett objekt som innehåller godtyckliga data. Dessa data kommer då att vara tillgängliga via window.history.state. I en verklig världsapplikation skulle vi skicka data som ett sid-ID, en webbadress eller serialiserade inmatningar som härrör från en blankett.
De två sista parametrarna är titel och
url. Dessa två ändrar URL-adressen och dokumenttiteln i webbläsaren, samt registrerar dem som en ny post i webbläsarens historia.

Låt oss dissekera följande exempel för att bättre förstå hur pushstate () Metoden fungerar.

(funktion ($) $ ("a") .on ("klicka", funktion (händelse) event.preventDefault (); window.history.pushState (ID: 9, "About - Acme" / "););) (jQuery);

I ovanstående kod är en länk kopplad till klick händelse då utplacerar pushstate () metod. När vi klickar på länken förväntar vi oss att koden ändrar dokumentets titel och URL:

Från topp till tå: Chrome, Firefox, Opera.

Och det gör det; skärmbilden visar URL: n ändras till "om /" som definierad i pushstate () metod. Och sedan pushstate () Metoden skapar en ny post i webbläsarens historia, vi kan gå tillbaka till föregående sida via webbläsarens Tillbaka knapp.

Men alla webbläsare i det här exemplet ignorerar för närvarande titel parameter. Du kan se från skärmdumpen, dokumentet ändras inte till Om - Acme som specifierat. Dessutom ringer de pushstate () Metoden kommer inte heller att utlösa popstate händelse; en händelse som skickas varje gång historien förändras-något vi behöver! Det finns några skillnader i hur webbläsare hanterar den här händelsen, som anges i MDN:

"Browsers brukar hantera popstate händelse annorlunda på sidbelastning. Chrome (före v34) och Safari avger alltid a popstate händelse på sidan laddas, men Firefox gör det inte. "

Vi kommer att behöva ett bibliotek som en återgång för att göra API-programmen för History Web fungera konsekvent över webbläsaren utan några hinder.

Möt History.js

Sedan pushstate () Metoden fungerar inte till sin fulla potential, i denna handledning kommer vi att utnyttja History.js. Som namnet antyder är detta JavaScript-bibliotek ett polyfill, replikera de ursprungliga historiska API: erna som fungerar över olika webbläsare. Det avslöjar också en uppsättning metoder som liknar de inbyggda API: erna, om än med få skillnader.

Som nämnts tidigare kallas webbläsarens inbyggda API genom historia fönsterobjekt med små bokstäver "h", medan API API History är tillgängligt Historia med stor bokstav "H". Med tanke på det föregående exemplet och om vi antar att filen history.js har laddats, kan vi ändra koden, enligt följande (igen märker du versalen "H").

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

Jag hoppas att den här korta förklaringen är lätt att förstå. Annars, här är några ytterligare referenser om du vill lära dig mer om API för webbhistorik.

Historik API
Manipulera webbläsarhistoriken
En introduktion till HTML5-historiken

Bygga vår statiska webbplats

I det här avsnittet kommer vi inte att diskutera varje steg som behövs för att bygga en statisk webbplats i detalj. Vår hemsida är enkel, som visas i följande skärmdump:

Webbsidans hemsida

Du behöver inte skapa en webbplats som ser ut exakt densamma. du kan lägga till något innehåll och skapa så många sidor som du behöver. Det finns emellertid vissa specifika punkter som du måste överväga om HTML-strukturen och användningen av id och klass attribut för vissa element.

Ladda jQuery och History.js i dokumentet huvud. Du kan ladda det som ett projektberoende genom Bower eller via en CDN som CDNJS eller JSDelivr.
Vik header, innehåll och sidfot i en div med ID slå in;
Det finns några navigeringsobjekt på sidhuvudet och sidfoten. Varje meny ska peka på en sida. Se till att sidorna finns och ha innehåll.
Varje meny länk ges sid länk klass som vi ska använda för att välja dessa menyer.
Slutligen ger vi varje länk a titel attribut som vi ska vidarebefordra till pushstate () för att bestämma dokumenttiteln.

Med hänsyn till allt detta ser vår HTML-uppställning ungefär ut enligt följande:

         Hem
 Handla om
  
 
    
    Villkor

När du är färdig med att bygga din statiska webbplats kan vi gå vidare till huvuddelen av denna handledning.

Tillämpa API för History Web

Innan vi börjar skriva någon kod måste vi skapa en ny fil för att hålla vår JavaScript; vi heter det script.js och ladda filen i dokumentet före kropp stängande tagg.

Låt oss lägga till vårt första kodstycke för att ändra dokumentets titel och webbadressen när du klickar på menyns navigering:

// 1. var $ wrap = $ ("#wrap"); // 2. $ wrap.on ("click", ".page-link", funktion (händelse) // 3. event.preventDefault (); // 4. om (window.location === this.href ) return; // 5. var pageTitle = (this.title)? this.title: this.textContent; pageTitle = (this.getAttribute ("rel") === "hem")? pageTitle: pageTitle + â € "Acme"; // 6. History.pushState (null, pageTitle, this.href););

Jag har delat upp koden i flera nummererade sektioner. Dessa gör det enklare för dig att hitta koden med följande referens:

På första raden väljer vi elementet, , som omsluter allt vårt innehåll på webbplatsen.
Vi bifogar klickhändelsen. Men som du kan se ovan bifogar vi den till #slå in element istället för att fästa händelsen direkt på varje menynavigering. Denna praxis är känd som evenemangsdelegation. Med andra ord, vår #slå in element är ansvarig för att lyssna på att klicka på händelser på uppdrag av .sid länk.
Vi har också lagt till event.preventDefault () så att användarna inte kommer att riktas till den aktuella sidan.
Om den klickade menyns URL är densamma som det aktuella fönstret behöver vi inte fortsätta till nästa operation, helt enkelt för att det inte är nödvändigt.
De sidans titel variabel innehåller titelformatet som härrör från länktitelattributet eller länktexten. Varje sidtitel följer Sida Titel - Acme konvention, förutom hemsidan. "Acme" är vårt fiktiva företagsnamn.
Slutligen passerar vi sidans titel och sidadressen till History.js pushstate () metod.

Vid den här tiden, när vi klickar på menynavigationen, ska titeln såväl som webbadressen ändras enligt följande:

Sidtiteln och webbadressen ändras

Ändå är sidinnehållet detsamma! Det är inte uppdaterat för att matcha den nya titeln och den nya webbadressen.

Innehåll

Vi måste lägga till följande rader av kod för att ersätta det faktiska sidinnehållet.

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

Återigen delas koden här i flera numrerade sektioner.

Kodens första rad lyssnar på historikändringen som utförs via History.js pushstate () metod och kör den bifogade funktionen.
Vi hämtar tillståndsändringarna, som innehåller olika data som en URL, titel och id.
Genom jQuery .skaffa sig() Metod vi hämtar innehållet från den angivna webbadressen.
Slutligen sorterar vi ut elementet med en id som heter slå in från det hämtade innehållet, och så småningom ersätta det aktuella sidinnehållet med det.

När det är lagt till, bör innehållet nu uppdateras när vi klickar på menyns navigering. Som nämnts kan vi också komma åt besökta sidor fram och tillbaka via webbläsaren Tillbaka och Framåt knappar.

Vår hemsida kan presenteras just nu. Vi skulle dock vilja gå vidare genom att lägga till lite animering för att få sidan till liv och till sist känns vår hemsida mer övertygande.

Lägger till animationer och övergångar

Animering i denna situation behöver bara vara enkel, så vi skriver allt från början, istället för att ladda animeringar genom ett bibliotek som Animate.css, Motion UI of ZURB eller Effeckt.css. Vi heter namnet slideInUp, som följer:

@keyframes slideInUp från transform: translate3d (0, 10px, 0); opacitet: 0;  till transform: translate3d (0, 0, 0); opacitet: 1;

Som namnet antyder kommer animationen att glida sidinnehållet från botten till toppen tillsammans med elementets opacitet. Applicera animeringen till det element som omsluter sidens huvudinnehåll, enligt följande.

.avsnitt animation-duration: .38s; animations-fill-mode: båda; animationsnamn: slideInUp;

Övergången från en sida till en annan bör nu känna sig mjukare när animationen tillämpas. Här kan du sluta och kalla det en dag! Vår hemsida är klar och vi är redo att distribuera den för att världen ska se.

Det finns dock en sak som du kanske behöver överväga att lägga till, särskilt för dem som vill övervaka antalet besök och besökarnas beteende på din webbplats.

Vi måste lägga till Google Analytics för att spåra vardera sidvisning.

Google Analytics

Eftersom våra sidor kommer att laddas asynkront (förutom för första sidladdad) spårning av sidvisningsnumret ska också ske asynkront.

Till att börja med, se till att du har standard Google Analytics lagt till i dokumentet huvud. Koden ser vanligen ut som följer:

Då måste vi justera vår JavaScript-kod för att inkludera spårningskoden för Google Analytics så att varje sida som laddas asynkront, kommer också att mätas som en sidvisning.

Vi har flera alternativ. Först kan vi börja räkna när användaren klickar på en navigeringslänk eller när du ändrar sidtitel och webbadress eller när innehållet på sidan har laddats fullständigt.

Vi väljer den sistnämnda, vilket förmodligen är den mest autentiska, och därmed utnyttjar vi jQuery löfte() metod efter att vi ändrat sidinnehållet enligt följande:

$ wrap.html ($ (elem) .html ()) .promise () .done (funktion (res) // Se till att det nya innehållet läggs till och metoden 'ga ()' är tillgänglig. ga === "funktion" && res.length! == 0) ga ('set', sida: window.location.pathname, title: state.title); ga ('skicka', 'sidvisning') ;);

Det är allt det är, vi kommer nu ha sidvisning inspelad i Google Analytics.

Avslutar

I denna handledning har vi förbättrat en enkel statisk webbplats med webbhistorik API för att göra sidövergången mjukare, lasten snabbare och överlag ger en bättre upplevelse till våra användare. I slutet av denna handledning genomförde vi också Google Analytics för att spela in användaren sidvisning asynkront. Dessutom är vår hemsida perfekt krypa-kan av sökrobotar eftersom det är, som nämnts, bara en enkel HTML-webbplats.

Detta var en köttig handledning som förklarade många saker som CSS Animation, jQuery Ajax och jQuery Promise. Här är en handfull referenser för att du ska undersöka, för att förstärka det du har lärt dig.

En nybörjar Introduktion till CSS Animation
Snabbtips: JavaScript-evenemangsdelegation om 4 minuter
AJAX för Front-End Designers
Käbbla Async Uppgifter med jQuery-löften
Demystifying Google Analytics

Slutligen glöm inte att besöka demo webbplatsen för denna handledning samt källkoden i förvaret.

Webbdesign