SissejuhatusBrauseri API-d

Veebiarenduse maastik areneb kiiresti. Igal aastal saavad brauserid uusi võimalusi, mis võivad teie kodeerimisprotsessi lihtsustada. Kaasaegsete veebirakenduste levikuga on arendajatel juurdepääs võimsatele tööriistadele otse brauseris, mis välistab vajaduse liigsete teekide ja raamistike järele.

Selles artiklis uurime10 alakasutatud brauseri API-dmis aitavad teil levinud probleeme tõhusamalt lahendada. Miks risustada oma projekti teekidega, kui brauser saab sellega hakkama?

Olenemata sellest, kas olete kogenud arendaja või alles alustate, võivad need API-d üllatada oma lihtsuse ja võimsusega. Sukeldume otse ja vaatame, kuidas need tööriistad võivad teie veebirakendusi täiustada.

1. Struktureeritud klooni API

Structured Clone API on objektide kopeerimiseks mõeldud mängumuutja. Paljude arendajate jaoks on objektide kopeerimine alati olnud keeruline ülesanne, mis nõuab sageli teeke või keerukaid funktsioone. Selle API abil saate hõlpsalt luua objektist sügava koopia:

const koopia = struktureeritudClone(originaal);

See ühekihiline kiht lahendab palju probleeme:

Käsitleb keerulisi andmetüüpe, naguKaart, MäärajaBlob.
Haldab ringviiteid ilma teie koodi kokkujooksmiseta.
Märkus. See ei klooni funktsioone, mida on oluline meeles pidada.

Näiteks kaaluge, millal peate kopeerima keeruka objekti, mis sisaldab pesastatud massiive või objekte. Traditsiooniliste meetodite (nt JSON-i serialiseerimine) kasutamine võib põhjustada andmete kadumist või tõrkeid, eriti ümmarguste viidete korral. Structured Clone API kõrvaldab need probleemid, pakkudes sujuvat viisi teie andmete dubleerimiseks.

Tugi:Saadaval tänapäevastes brauserites, nagu Chrome, Firefox ja Safari, muutes selle tootmiskasutuseks ohutuks.

Praktiline näpunäide. Selle API kasutamisel kontrollige alati brauseri ühilduvust, et tagada teie rakenduse järjepidev toimimine erinevates keskkondades.

2. Performance API

Jõudluse mõõtmisel jäetakse Performance API sageli tähelepanuta. Selle asemel, et loota kolmandate osapoolte tööriistadele, saate oma koodi toimivuse jälgimiseks ja võrdlemiseks kasutada seda API-t.

performance.mark("start");
// kood mõõtmiseks
performance.mark("lõpp");
performance.measure("calc", "start", "end");
console.log(performance.getEntriesByName("calc"));

See võib aidata teil kindlaks teha:

Millised funktsioonid on kiiremad.
Kui optimeerimisest on tegelikult kasu.
Kas töötaja või WASM on rakendamist väärt.

Näiteks kui arendate keerulist veebirakendust, mis töötleb kasutajaandmeid, saate kasutada Performance API-t konkreetsete funktsioonide või funktsioonide võrdlemiseks. Täitmisaega mõõtes saate tuvastada kitsaskohad ja vastavalt sellele optimeerida.

Lisaks võimaldab Performance API teil logida üksikasjalikke jõudlusmõõdikuid, mis võivad olla teie rakenduse silumisel või optimeerimisel hindamatud. Neid mõõdikuid saate vaadata brauseri arendaja tööriistade vahekaardil Toimivus.

Tugi:Töötab suurepäraselt kõigis kaasaegsetes brauserites.

Praktiline nõuanne: kasutage arenduse ajal Performance API-t, et koguda andmeid oma koodi toimivuse kohta. See teave võib suunata teie optimeerimispüüdlusi ja parandada kasutajakogemust.

3. Lehekülje nähtavuse API

Kas olete kunagi mõelnud, mis juhtub, kui kasutaja vahekaarte vahetab? Lehe nähtavuse API abil saate tuvastada, kas teie vahekaart on aktiivne või mitte.

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    video.pause();
  }
});

See API on uskumatult kasulik:

Peamised brauseri API-d, mida teada

📦

Struktureeritud klooni API
Kopeerige keerulisi objekte vaevata.

📈

Performance API
Mõõtke ja parandage veebi jõudlust.

👀

Lehe nähtavuse API
Tuvastage, millal leht on nähtav.

📏

ResizeObserver
Reageerige elemendi suuruse muutustele.

🔍

Ristmikuvaatleja
Jälgige elementide nähtavust.

Videote peatamine, kui kasutaja ei ole seotud.
Tarbetute küsitluspäringute peatamine jõudluse parandamiseks.
CPU kasutuse vähendamine, et säästa mobiilseadmete aku kasutusaega.

Näiteks kui töötate välja video voogedastusrakendust, saate lehe nähtavuse API abil video peatamiseks peatada, kui kasutaja vahekaardilt lahkub. See mitte ainult ei paranda kasutajakogemust, vaid säästab ka ribalaiust ja serveriressursse.

Lisaks saate rakendada analüütilisi funktsioone, mis jälgivad kasutaja seotust nähtavuse muutuste põhjal. Need andmed aitavad teil mõista, kuidas kasutajad teie rakendusega suhtlevad ja millised funktsioonid on kõige köitvamad.

Tugi:Ühildub kõigi kaasaegsete brauseritega.

Praktiline nõuanne. Katsetage alati nähtavuse funktsiooni erinevatel stsenaariumidel, näiteks vahekaartide vahetamisel, brauseri minimeerimisel või teisele rakendusele lülitumisel, et tagada selle ootuspärane käitumine.

4. ResizeObserver

Tundliku disaini puhul võib elementide suuruste jälgimine olla tülikas. ResizeObserver API võimaldab teil jälgida elemendi suuruse muutusi.

const ro = new ResizeObserver(entries => {
  jaoks (kannete pidev sisestamine) {
    console.log(entry.contentRect.width);
  }
});
ro.observe(element);

See API on kergendus arendajatele, kes on varem tülika suuruse muutmise loogikaga tegelenud. Nüüd saab brauser sellega teie eest hakkama!

Kujutage ette armatuurlaua ehitamist erinevate vidinatega, mis peavad kohandama oma paigutust vastavalt vaateava suurusele. ResizeObserver aitab teil tuvastada, millal kasutaja muudab akna suurust või muudab konkreetse elemendi suurust, võimaldades teil kasutajaliidest dünaamiliselt ümber korraldada.

Tugi:Laialdaselt saadaval tänapäevastes brauserites.

Praktiline nõuanne. Kasutage ResizeObserverit kasutajakogemuse parandamiseks, tagades, et teie rakenduse paigutus reageerib sujuvalt suuruse muutustele. See on eriti kasulik tundlike kujunduste puhul, kus elemendid peavad sujuvalt kohanduma.

5. Intersection Observer API

Teine võimas tööriist on Intersection Observer API. See võimaldab teil jälgida, millal element vaateavasse siseneb või sealt väljub:

const vaatleja = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Laadige sisu või käivitage animatsioonid
    }
  });
});
vaatleja.observe(targetElement);

Kasutusjuhtumite hulka kuuluvad:

Piltide aeglane laadimine parema jõudluse ja kiirema lehe laadimisaja tagamiseks.
Animatsioonide käivitamine, kui elemendid tulevad nähtavale, et pakkuda kaasahaaravamat kasutuskogemust.
Kasutajakogemuse parandamine, laadides sisu vastavalt vajadusele, vähendades esialgset laadimisaega.

Näiteks kui teil on pikk piltidega artikkel, saate pilte laadida ainult siis, kui need on vaateavasse sisenemas. See vähendab esialgset laadimisaega ja säästab ribalaiust, eriti mobiilseadmete kasutajate jaoks.

Lisaks võib Intersection Observer API aidata analüüsida, jälgides, kui palju kasutajaid teie veebilehe teatud jaotisteni kerivad, andes teile väärtuslikku teavet kasutajate seotuse kohta.

Tugi:Saadaval kaasaegsetes brauserites.

Praktiline näpunäide. Rakendage jõudluse optimeerimiseks Intersection Observer API-t, eriti suure sisuga rakendustes. See aitab teil luua kasutajatele sujuvama kasutuskogemuse, säästes samal ajal ressursse.

6. Tõmba API

XMLHttpRequesti ajad on möödas. Fetch API lihtsustab võrgupäringute tegemise protsessi:

too(url)
  .then(response => response.json())
  .then(andmed => konsool.log(andmed));

Selle API abil saate hõlpsalt:

Käsitsege erinevaid vastusetüüpe, nagu JSON, tekst ja plekid.
Kasutage puhtama ja loetavama koodi jaoks asünkrooni/ootmist.
Määrake oma taotlustele kohandatud päised, muutes selle erinevate API-de jaoks paindlikuks.

Näiteks peate võib-olla tooma kasutajaandmed REST API-st. Fetch API abil saate kirjutada kokkuvõtliku ja loetava koodi, mis käsitleb võrgupäringute asünkroonsust ilma tagasihelistamisteta.

Lisaks toetab Fetch API lubadusi, hõlbustades aheldatud taotlustega töötamist või vigade graatsilist käsitlemist. Samuti saate hõlpsalt hallata erinevaid vastuse olekuid, pakkudes tõhusat viisi võrgu interaktsioonide haldamiseks.

Tugi:Toetavad kõik kaasaegsed brauserid.

Praktiline nõuanne: kasutage loetavuse ja hooldatavuse parandamiseks kõigi võrgupäringute jaoks Fetch API-t. Sujuva kasutuskogemuse tagamiseks ärge unustage vigu õigesti käsitleda.

7. Web Storage API

Kasutajaeelistuste või seansiandmete salvestamine pole Web Storage API abil kunagi olnud lihtsam. See pakub kahte peamist salvestusvõimalust:

kohalik salvestusruumpüsivate andmete jaoks, mis säilivad lehe värskendamise järel.
sessionSalvestusajutiste andmete jaoks, mis kestavad ainult lehe seansi ajaks.

Näide:

Structured Clone API kasutamine

Loo originaalobjekt

Määrake kopeeritav objekt.

StruktureeritudClone() kutsumine

Kasutage objekti kloonimiseks API-t.

Käepide keerulised tüübid

Toetab Map, Set ja Blob.

Vältige funktsioonide kloonimist

Pidage meeles, et see ei klooni funktsioone.

localStorage.setItem('võti', 'väärtus');
const väärtus = localStorage.getItem('võti');

See API on eriti kasulik:

Kasutaja eelistuste (nt teema seaded või keelevalikud) salvestamine.
Seansiandmete, näiteks kasutaja autentimislubade haldamine.
Ostukorvis olevate kaupade jälgimine ilma serveripoolset lahendust vajamata.

Näiteks kui loote e-kaubanduse saiti, saate kasutada veebisalvestuse API-d, et jätta meelde üksused, mida kasutaja oma ostukorvi lisab, isegi kui nad lahkuvad või lehte värskendavad.

Tugi:Toetavad kõik kaasaegsed brauserid.

Praktiline näpunäide. Kasutage kohalikku salvestusruumi andmete jaoks, mida soovite seansside jooksul säilitada, ja sessionStorage'i andmete jaoks, mis on asjakohased ainult ühe külastuse ajal. Tundliku teabe salvestamisel pidage alati meeles turvalisust.

8. Web Notifications API

Veebimärguannete API võimaldab veebirakendustel kasutajatele teatisi kuvada. See funktsioon võib suurendada kasutajate seotust, hoides neid kursis isegi siis, kui nad teie rakendust aktiivselt ei kasuta.

if (Notification.permission !== "antud") {
  Notification.requestPermission();
}

const notification = new Notification("Tere!", {
  body: "See on teavitussõnum!",
});

Kasutusjuhtumite hulka kuuluvad:

Kasutajate hoiatamine uute sõnumite või värskenduste kohta vestlusrakenduses.
Kasutajate teavitamine olulistest sündmustest, näiteks meeldetuletustest või tähtaegadest.
Tagasiside andmine pärast kasutaja toimingut, näiteks vormi esitamist.

Näiteks kui arendate sõnumsiderakendust, saate kasutada veebimärguannete API-d, et teavitada kasutajaid uutest sõnumitest, kui nad sirvivad muid vahekaarte või rakendusi.

Teavituste rakendamine võib kasutajakogemust märkimisväärselt parandada, tagades kasutajatele oluliste uuendustega kursis olemise, ilma et nad peaksid rakendust pidevalt kontrollima.

Tugi:Saadaval enamikes kaasaegsetes brauserites.

Praktiline näpunäide. Positiivse kasutuskogemuse tagamiseks küsige alati enne teadete saatmist kasutajalt luba. Pakkuge märguannetes sisulist sisu, et julgustada kasutajate seotust.

9. Teenindustöötajad

Service Workers on võimas funktsioon, mis võimaldab käivitada skripte taustal, veebilehest eraldi. See võimaldab kasutada selliseid funktsioone nagu võrguühenduseta tugi ja taustal sünkroonimine.

self.addEventListener('install', event => {
  // Tehke installitoimingud
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        tagastab vastuse || tõmba(sündmus.taotlus);
      })
  );
});

Service Workersiga saate:

Vahemällu ressursse, et muuta rakendus võrguühenduseta kättesaadavaks.
Peatage võrgupäringud vahemällu salvestatud sisu või varuvastuste teenindamiseks.
Lubage tõukemärguanded, et hoida kasutajaid kaasatuna.

Näiteks kui loote progressiivse veebirakenduse (PWA), on teenusetöötajad sujuva võrguühenduseta kasutuskogemuse pakkumiseks hädavajalikud. Kasutajad saavad jätkata teie rakendusega suhtlemist isegi ilma Interneti-ühenduseta ja kõik muudatused sünkroonitakse, kui nad on uuesti võrgus.

Tugi:Toetatud kaasaegsetes brauserites, kuid enne rakendamist kontrollige alati ühilduvust.

Praktiline nõuanne: kasutage oma Service Workersi vahemälu API-t oluliste ressursside salvestamiseks ja naasvate kasutajate laadimisaegade parandamiseks. Optimaalse toimimise tagamiseks veenduge, et teie teenindustöötajad on õigesti registreeritud ja aktiveeritud.

10. Web Share API

Web Share API võimaldab kasutajatel jagada sisu teie veebirakendusest oma seadme teiste rakendustega, näiteks sotsiaalmeediaga.

navigator.share({
  pealkiri: 'Web Share API',
  tekst: "Vaadake seda sisu!",
  url: 'https://example.com',
}).then(() => {
  console.log('Sisu jagatud edukalt!');
}).catch((viga) => {
  console.error('Vea jagamine:', viga);
});

Web Share API põhifunktsioonid hõlmavad järgmist:

Teksti, URL-ide ja muude andmevormingute lihtne jagamine.
Omajagamise dialoog, mis integreerub kasutaja seadmega.
Parem kasutajate seotus, julgustades jagamist.

Näiteks kui teil on ajaveebipostitus, saate lubada kasutajatel seda sotsiaalmeedias otse teie veebisaidilt jagada. See funktsioon võib oluliselt suurendada teie sisu ulatust ja kaasatust.

Tugi:Saadaval enamikus kaasaegsetes mobiilitoega brauserites.

Praktiline nõuanne. Enne Web Share API kasutamist kontrollige, kas kasutaja seade seda toetab. Sujuva kasutuskogemuse tagamiseks pakkuge jagamiseks varuvalikut, kui API pole saadaval.

Järeldus

Brauseri API-de kasutamine võib teie veebirakendusi märkimisväärselt täiustada, ilma et oleks vaja täiendavaid teeke. Selles artiklis käsitlesime 10 võimsat API-d, sealhulgas Structured Clone API, Performance API ja palju muud. Kõik need tööriistad võivad aidata teie koodi lihtsustada ja jõudlust parandada.

Kas olete valmis viima oma veebiarendusoskused järgmisele tasemele? Uurige neid API-sid oma järgmises projektis ja vaadake, kuidas need teie heaks töötada saavad. Lisateabe saamiseks tööriistade kohta, mis võivad teie tootlikkust suurendada, vaadake meiepilt GIF-i muunduriksjatasuta video MP3 konverter.

Lisateavet veebitehnoloogia viimaste edusammude kohta leiate aadressiltOpenAIjaKallistav nägu.