HTML5: Network Information API
193
Del
71
Del
Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Innledning

En av de mest diskuterte konsepter i verden av webdesign er responsive web design. Tusenvis av artikler har blitt skrevet om responsive web design og jeg derfor ikke vil diskutere det i denne artikkelen. Imidlertid har responsive web design en viktig begrensning, er responsive web design for det meste basert på størrelsen av nettleseren view.

Selv om denne tilnærmingen fungerer godt for å tjene opp bilder av riktig størrelse og oppløsning, det er ikke ideelle i alle situasjoner, videoinnhold er ett eksempel. Det vi virkelig trenger i disse tilfellene er mer informasjon om enhetens nettverkstilkobling.

Tenk deg at du besøker YouTube på smarttelefonen eller nettbrettet. Du er hjemme og koblet over Wi-Fi. I slike tilfeller trenger du ikke bryr seg om hvor mange bytes som blir lastet ned, er du bare interessert i høy kvalitet videoinnhold. Dette er ikke sant hvis du er koblet over en treg mobil tilkobling. I så fall vil du se videoen, er sekundær kvaliteten.

Jeg skal være klart at alle utviklere som ønsker et nettsted for å være veldig bra har fortsatt å optimalisere verdiene det tjener til å tillate sider å laste så fort som mulig. Men i eksempelet ovenfor, tjene opp en høyoppløselig video er ikke bortkastet brukerens båndbredde, men en forbedring av brukeropplevelsen.

Network Information API er akkurat det vi trenger for å finne ut mer om nettverkstilkoblingen på enheten.

1. Hva er det?

Network Information API gir tilgang til tilkoblingstypen systemet bruker til å kommunisere med nettverket, mobilnettet, Wi-Fi, Bluetooth, etc. Det gir også et middel for skript for å bli varslet Hvis tilkoblingstype endringer. Dette er for å tillate utviklere å lage dynamiske endringer i DOM og /eller informere brukeren om at typen nettverkstilkobling er endret.

Den første utgivelsen av spesifikasjonen av Network Information API var i 2011, men API har endret flere ganger siden. Som et bevis på dette, er den gjeldende versjonen bare redaktørens utkast, noe som betyr at det er bundet til å endre seg i fremtiden.

Til tross for endringene, bruksmåter for API er så interessant at det er virkelig verdt å utforske den. I denne artikkelen vil vi diskutere den nyeste versjonen av spesifikasjonen, men vi vil også se på noen av de nedgraderte egenskaper og hendelser av grunner jeg skal forklare senere.

2. Implementering

Den nåværende versjonen av Network Information API eksponerer en forbindelse objekt som tilhører window.navigator objektet. Tilkoblingen objektet inneholder én egenskap, type, som returnerer brukeren agentens tilkoblingstype. Den type eiendom kan ha en av følgende values:


bluetooth


cellular

ethernet

none

wifi

other

unknown

Some av disse verdiene, for eksempel bluetooth og wifi, er selvforklarende, mens andre trenger litt mer forklaring. Den cellulære typen refererer til en mobil forbindelse, for eksempel EDGE, 3G, 4G, etc. Den andre typen innebærer at den aktuelle tilkoblingstypen er ikke ukjent, men det er ikke noen av de andre typene enten. Den ukjent type betyr at user agent har etablert en nettverkstilkobling, men det er ikke i stand til å avgjøre hva tilkoblingstypen er.

I tillegg til å skrive, eksponerer Network Information API den ontypechange hendelsen. Det er avfyrt hver gang den type nettverkstilkobling endres.

Utviklere kan bruke Network Information API for å endre noen funksjoner basert på gjeldende tilkoblingstype. For eksempel kan vi bremse ned en prosess som tar opp betydelig båndbredde hvis vi oppdager enheten bruker en mobil tilkobling. API lar oss også tildele en bestemt klasse til html element, for eksempel høy båndbredde, på samme måte Modernizr gjør. Vi kan utnytte CSS for å endre en eller flere egenskaper ved et element, for eksempel bakgrunnsbildet.

Nå som vi vet hva Network Information API gjør, og som vi kan dra nytte danne det, la oss se hvilke nettlesere støtter API.

3. Nettleser Støtte

På det i skrivende stund, er Network Information API bare støttes av Firefox, og bruker sin leverandør prefiks, og Chrome Canary. I Chrome Canary, må vi gjøre det mulig for eksperimentelle web plattform funksjoner
flagg for å bruke API. Du kan finne mer informasjon i dette innlegget av Paul irsk.

Som om støtte for Network Information API ikke allerede var dårlig nok, Firefox opp til versjon 30, den nyeste versjonen, støtter den gamle API-spesifikasjonen. På grunn av dette, og i tilfelle du ønsker å spille med Network Information API akkurat nå, er det viktig å ta en titt på egenskaper og hendelser eksponert av den forrige spesifikasjon av API.

Den gamle spesifikasjons utsatt to eiendommer , båndbredde og måles. Båndbredden Eiendommen er en dobbel representerer en estimering av dagens båndbredde i megabyte per sekund (MB /s). Den oppmålte Eiendommen er en boolsk som spesifiserer om det nettverkstilkoblingen på enheten er underlagt noen begrensninger. Den forrige spesifikasjonen også definert en OnChange begivenhet for å varsle eventuelle lyttere om endringer i de nevnte egenskapene.

For å gi deg et inntrykk av den nye og den gamle versjonen av spesifikasjonen, i neste avsnitt vil vi bygge en demo som bruker begge deler.

4. Demo

Så langt har vi dekket egenskapene og hendelsene avslørt av API samt API bruksmåter. I denne delen skal vi lage en enkel nettside for å se API i aksjon.

Demoen består av en HTML5-side som har en ikke-sorterte liste med tre listeelementer. Hvert element inneholder en tekstbit å bekrefte verdien av eiendommene avslørt av den gamle og den nye spesifikasjonen av Network Information API. Listeelementene er som standard skjult og kun vist dersom tilsvarende eiendommer er støttet.

Demoen registrerer også om nettleseren implementerer den gamle spesifikasjonen av API (å målrette Firefox) og om nettleseren støtter nettverks API informasjon i det hele tatt. I det første tilfellet, vil du se meldingen Old API versjon støttes
, i det andre tilfellet meldingen API støttes ikke
vil bli vist.

Testing for støtte av Network Information API er veldig enkelt som du kan se nedenfor:
//Deal med leverandøren prefixesvar forbindelse = window.navigator.connection || window.navigator.mozConnection || null; if (tilkobling === null) {//API støttes ikke :(} else {//API støttet La oss starte moroa:)!}

For å finne ut om den versjonen implementert er den gamle spesifikasjonen, kan vi teste for tilstedeværelse av oppmålt eiendommen som vist nedenfor:
if ('måles' i forbindelse) {//Old version} else {//Ny versjon}

Når vi har testet for støtte for Network Information API og vi har funnet ut hvilken versjon av spesifikasjonen nettleseren støtter, kan vi legge et behandlingsprogram til riktig hendelse. Inni handler vi oppdaterer teksten i tilsvarende liste elementet, for eksempel type for den nye API-spesifikasjonen.

Du kan finne hele koden av demoen nedenfor, og du kan også spille med det hvis du vil.
<! DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < meta name = "view" content = "width = device-width, initial-skala = 1,0" /> < meta name = "forfatter" content = "Aurelio De Rosa" > < title > Network Information API Demo av Aurelio De Rosa < /title > < style > * {-webkit-Box-sizing: border-boksen; -moz-box-sizing: border-boksen; box-sizing: border-boksen; } Body {max-width: 500px; margin: 2em auto; padding: 0 0.5em; font-size: 20px; } H1 {text-align: center; } .api-Support {display: block; } .hidden {Display: none; } .value {Font-weight: bold; } .author {Display: block; margin-top: 1em; } ≪ /style > < /head > < body > < h1 > Network Information API < /h1 > < span id = "ni-unsupported" class = "api-støtte skjult" > API støttes ikke < /span > < span id = "nio-støttet" class = "api-støtte skjult" > Old API versjon støttes < /span > < ul > < li class = "new-api skjult" > Tilkoblingstype er < span id = "t-verdi" class = "verdi" > udefinert < /span >. < /li > < li class = "old-api skjult" > Tilkoblingen båndbredde er < span id = "b-verdi" class = "verdi" > udefinert < /span >. < /li > < li class = "old-api skjult" > Tilkoblingen er < span id = "m-value" class = "verdi" > udefinert < /span >. < /li > < /ul > < liten class = "forfatter" > Demo skapt av < a href = "http://www.audero.it" > Aurelio De Rosa < /a > (< a href = "http://twitter.com/AurelioDeRosa" > @ AurelioDeRosa < /a >). < br /> Denne demoen er en del av < a href = "http://github.com/AurelioDeRosa/HTML5-API-demos" > HTML5 API demoer depotet < /a >. < /liten > < script > Var tilkobling = window.navigator.connection || window.navigator.mozConnection || null; if (tilkobling === null) {document.getElementById ('ni-ustøttet') classList.remove ('skjult.'); } Else if ('måles' i forbindelse) {document.getElementById ('nio-støttet') classList.remove ('skjult.'); [] .slice.call (document.getElementsByClassName ('old-api')) foreach (funksjon (element) {element.classList.remove ('skjult');}).; Var bandwidthValue = document.getElementById ('b-value'); Var meteredValue = document.getElementById ('m-value'); connection.addEventListener ("endre", funksjon (hendelse) {bandwidthValue.innerHTML = connection.bandwidth; meteredValue.innerHTML = (connection.metered '': '? ikke ") +' måles ';}); connection.dispatchEvent (ny hendelse ("endre")); } Else {var typeValue = document.getElementById ('t-value'); [] .slice.call (document.getElementsByClassName ("ny-api ')) foreach (funksjon (element) {element.classList.remove (' skjult ');}).; connection.addEventListener ('typechange', funksjon (hendelse) {typeValue.innerHTML = connection.type;}); connection.dispatchEvent (ny hendelse ('typechange')); } ≪ /script > < /body > < /html >
Konklusjon

I denne artikkelen, jeg introduserte deg til Network Information API. I den første delen av denne artikkelen, har vi diskutert hva API er og hva den kan gjøre for oss. Vi har også lært hvilke egenskaper og hendelser Network Information API eksponerer. Som jeg nevnte i Browser Support
, API er for tiden dårlig støttet, men dette er delvis på grunn av flere endringer av API spesifikasjon.

Network Information API er svært enkel å bruke og det finnes ingen unnskyldninger for å ikke dra nytte av den informasjonen det gir når den er støttet av flere nettlesere. Hva synes du om dette API? Vil du bruke den når det er støttet av flere nettlesere? Anmeldelser