Uvod uAPI-ji preglednika

Krajolik web razvoja se brzo razvija. Svake godine preglednici dobivaju nove mogućnosti koje mogu pojednostaviti vaš proces kodiranja. S porastom modernih web aplikacija, programeri imaju pristup paketu moćnih alata izravno unutar preglednika, eliminirajući potrebu za prekomjernim bibliotekama i okvirima.

U ovom ćemo članku istražiti10 nedovoljno korištenih API-ja preglednikakoji vam mogu pomoći da učinkovitije riješite uobičajene probleme. Zašto zatrpavati svoj projekt bibliotekama kada preglednik može obaviti težak posao?

Bilo da ste iskusni programer ili tek počinjete, ovi API-ji bi vas mogli iznenaditi svojom jednostavnošću i snagom. Zaronimo odmah i vidimo kako ovi alati mogu poboljšati vaše web aplikacije.

1. Structured Clone API

Structured Clone API mijenja igru za kopiranje objekata. Za mnoge programere, kopiranje objekata uvijek je bio težak zadatak, često zahtijevajući biblioteke ili složene funkcije. Pomoću ovog API-ja možete bez napora stvoriti duboku kopiju objekta:

const kopija = structuredClone(original);

Ovaj jednolinijski rješava mnoge probleme:

Rukuje složenim tipovima podataka kao što suKarta, set, iMrlja.
Upravlja kružnim referencama bez rušenja vašeg koda.
Napomena: ne klonira funkcije, što je ključni aspekt koji treba zapamtiti.

Na primjer, razmislite kada trebate kopirati složeni objekt koji uključuje ugniježđene nizove ili objekte. Korištenje tradicionalnih metoda poput JSON serijalizacije može dovesti do gubitka podataka ili pogrešaka, osobito s kružnim referencama. Structured Clone API otklanja ove nedoumice, pružajući besprijekoran način dupliciranja vaših podataka.

podrška:Dostupan u modernim preglednicima kao što su Chrome, Firefox i Safari, što ga čini sigurnim za proizvodnu upotrebu.

Praktični savjet: kada koristite ovaj API, uvijek provjerite kompatibilnost preglednika kako biste bili sigurni da vaša aplikacija radi dosljedno u različitim okruženjima.

2. API za performanse

Kada se radi o mjerenju performansi, Performance API se često zanemaruje. Umjesto da se oslanjate na alate trećih strana, možete koristiti ovaj API za praćenje i usporedbu izvedbe vašeg koda:

performance.mark("start");
// kod za mjerenje
izvedba.oznaka("kraj");
performance.measure("calc", "start", "end");
console.log(performance.getEntriesByName("calc"));

Ovo vam može pomoći da utvrdite:

Koje su funkcije brže.
Ako su optimizacije zapravo korisne.
Bilo da vrijedi implementirati Worker ili WASM.

Na primjer, ako razvijate složenu web aplikaciju koja obrađuje korisničke podatke, možete koristiti Performance API za usporedbu određenih funkcija ili značajki. Mjerenjem vremena izvršenja možete identificirati uska grla i optimizirati ih u skladu s tim.

Osim toga, Performance API omogućuje vam bilježenje detaljnih metrika performansi, što može biti neprocjenjivo za otklanjanje pogrešaka ili optimiziranje vaše aplikacije. Ove mjerne podatke možete vidjeti u alatima za razvojne programere preglednika na kartici izvedbe.

podrška:Radi izvrsno u svim modernim preglednicima.

Praktični savjet: Koristite Performance API tijekom razvoja za prikupljanje podataka o izvedbi vašeg koda. Ove informacije mogu voditi vaše napore u optimizaciji i poboljšati korisničko iskustvo.

3. API za vidljivost stranice

Jeste li se ikada zapitali što se događa kada korisnik mijenja kartice? Pomoću API-ja za vidljivost stranice možete otkriti je li vaša kartica aktivna ili ne:

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

Ovaj API je nevjerojatno koristan za:

Ključni API-ji preglednika koje treba znati

📦

Structured Clone API
Bez napora kopirajte složene objekte.

📈

API za izvedbu
Mjerite i poboljšajte web performanse.

👀

API za vidljivost stranice
Otkrijte kada je stranica vidljiva.

📏

ResizeObserver
Reagirajte na promjene veličine elementa.

🔍

Promatrač raskrižja
Pratite vidljivost elemenata.

Pauziranje videozapisa kada korisnik nije angažiran.
Zaustavljanje nepotrebnih zahtjeva za glasanje radi poboljšanja performansi.
Smanjenje upotrebe CPU-a radi uštede baterije na mobilnim uređajima.

Na primjer, ako razvijate aplikaciju za strujanje videa, možete upotrijebiti API vidljivosti stranice za pauziranje videozapisa kada korisnik ode s kartice. Ovo ne samo da poboljšava korisničko iskustvo, već i štedi propusnost i resurse poslužitelja.

Moreover, you can implement analytics features that track user engagement based on visibility changes. This data can help you understand how users interact with your application and which features are most engaging.

podrška:Kompatibilan sa svim modernim preglednicima.

Praktični savjet: uvijek testirajte značajku vidljivosti u različitim scenarijima, kao što je prebacivanje kartica, minimiziranje preglednika ili prebacivanje na drugu aplikaciju kako biste bili sigurni da se ponaša prema očekivanjima.

4. ResizeObserver

Za responzivni dizajn, praćenje veličina elemenata može biti gnjavaža. ResizeObserver API omogućuje praćenje promjena u veličini elementa:

const ro = novi ResizeObserver(entries => {
  za (konstantni unos unosa) {
    console.log(entry.contentRect.width);
  }
});
ro.promatrati(element);

Ovaj API je olakšanje za programere koji su se u prošlosti nosili s glomaznom logikom promjene veličine. Sada, preglednik to može riješiti umjesto vas!

Zamislite da napravite nadzornu ploču s raznim widgetima koji trebaju prilagoditi svoj izgled na temelju veličine okvira za prikaz. ResizeObserver vam može pomoći otkriti kada korisnik mijenja veličinu prozora ili veličinu određenog elementa, omogućujući vam da dinamički preuredite svoje korisničko sučelje.

podrška:Široko dostupan u modernim preglednicima.

Praktični savjet: Koristite ResizeObserver za poboljšanje korisničkog iskustva osiguravajući da izgled vaše aplikacije glatko reagira na promjene u veličini. Ovo je osobito korisno za responzivne dizajne gdje se elementi moraju neprimjetno prilagođavati.

5. Intersection Observer API

Još jedan moćan alat je Intersection Observer API. To vam omogućuje praćenje kada element ulazi ili izlazi iz okvira za prikaz:

const promatrač = novi IntersectionObserver(unosi => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Učitaj sadržaj ili pokreni animacije
    }
  });
});
promatrač.promatrati(targetElement);

Slučajevi upotrebe uključuju:

Lijeno učitavanje slika za bolje performanse i brže učitavanje stranice.
Pokretanje animacija kada elementi dođu u vidokrug za zanimljivije korisničko iskustvo.
Poboljšanje korisničkog iskustva učitavanjem sadržaja prema potrebi, smanjenje početnog vremena učitavanja.

Na primjer, ako imate dugačak članak sa slikama, možete učitati slike samo kada će ući u okvir za prikaz. To smanjuje početno vrijeme učitavanja i štedi propusnost, posebno za korisnike na mobilnim uređajima.

Dodatno, Intersection Observer API može pomoći u analitici praćenjem koliko se korisnika pomiče do određenih odjeljaka vaše web stranice, dajući vam dragocjene uvide u angažman korisnika.

podrška:Dostupno u modernim preglednicima.

Praktični savjet: Implementirajte Intersection Observer API za optimizaciju performansi, posebno u aplikacijama s velikim sadržajem. To će vam pomoći da stvorite ugodnije iskustvo za korisnike, a istovremeno štedite resurse.

6. API za dohvaćanje

Prošli su dani XMLHttpRequesta. Fetch API pojednostavljuje proces izrade mrežnih zahtjeva:

dohvaćanje (url)
  .then(odgovor => odgovor.json())
  .then(podaci => konzola.log(podaci));

S ovim API-jem možete jednostavno:

Rukovanje različitim vrstama odgovora, kao što su JSON, tekst i mrlje.
Koristite async/await za čistiji i čitljiviji kod.
Postavite prilagođena zaglavlja za svoje zahtjeve, čineći ih fleksibilnim za različite API-je.

Na primjer, možda ćete morati dohvatiti korisničke podatke iz REST API-ja. S Fetch API-jem možete napisati sažet i čitljiv kod koji obrađuje asinkronu prirodu mrežnih zahtjeva bez složenosti povratnih poziva.

Štoviše, Fetch API podržava obećanja, olakšavajući rad s ulančanim zahtjevima ili elegantno rukovanje pogreškama. Također možete jednostavno rukovati različitim statusima odgovora, pružajući robustan način upravljanja mrežnim interakcijama.

podrška:Podržavaju ga svi moderni preglednici.

Praktični savjet: upotrijebite Fetch API za sve svoje mrežne zahtjeve kako biste poboljšali čitljivost i lakoću održavanja. Ne zaboravite postupati s pogreškama na odgovarajući način kako biste osigurali glatko korisničko iskustvo.

7. API za web pohranu

Spremanje korisničkih postavki ili podataka o sesiji nikada nije bilo jednostavnije s API-jem za web pohranu. Omogućuje dvije glavne mogućnosti pohrane:

lokalna pohranaza trajne podatke koji preživljavaju osvježavanja stranice.
sessionStorageza privremene podatke koji traju samo za vrijeme trajanja sesije stranice.

Primjer:

Korištenje Structured Clone API-ja

Stvorite izvorni objekt

Definirajte objekt koji želite kopirati.

Poziv structuredClone()

Koristite API za kloniranje objekta.

Složene vrste rukovanja

Podržava Map, Set i Blob.

Izbjegavajte kloniranje funkcija

Zapamtite da ne klonira funkcije.

localStorage.setItem('ključ', 'vrijednost');
const value = localStorage.getItem('key');

Ovaj API je posebno koristan za:

Pohranjivanje korisničkih postavki, poput postavki teme ili izbora jezika.
Upravljanje podacima o sesiji, poput tokena za autentifikaciju korisnika.
Praćenje stavki u košarici za kupnju bez potrebe za rješenjem na strani poslužitelja.

Na primjer, ako gradite web mjesto za e-trgovinu, možete koristiti API za web pohranu da biste zapamtili stavke koje korisnik dodaje u svoju košaricu, čak i ako odu ili osvježe stranicu.

podrška:Podržavaju ga svi moderni preglednici.

Praktični savjet: Koristite localStorage za podatke koje želite zadržati tijekom sesija, a sessionStorage za podatke koji su relevantni samo tijekom jednog posjeta. Uvijek imajte na umu sigurnosne implikacije kada pohranjujete osjetljive informacije.

8. API za web obavijesti

Web Notifications API omogućuje web aplikacijama prikazivanje obavijesti korisnicima. Ova značajka može povećati angažman korisnika tako što će ih informirati čak i kada ne koriste aktivno vašu aplikaciju:

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

const obavijest = nova obavijest("Zdravo!", {
  body: "Ovo je poruka obavijesti!",
});

Slučajevi upotrebe uključuju:

Upozoravanje korisnika o novim porukama ili ažuriranjima u aplikaciji za chat.
Obavještavanje korisnika o važnim događajima, poput podsjetnika ili rokova.
Pružanje povratnih informacija nakon radnje korisnika, kao što je slanje obrazaca.

Na primjer, ako razvijate aplikaciju za razmjenu poruka, možete koristiti API web-obavijesti za obavještavanje korisnika o novim porukama dok pregledavaju druge kartice ili aplikacije.

Implementacija obavijesti može značajno poboljšati korisničko iskustvo osiguravajući da korisnici ostanu informirani o važnim ažuriranjima bez potrebe za stalnim provjeravanjem aplikacije.

podrška:Dostupan u većini modernih preglednika.

Praktični savjet: uvijek tražite dopuštenje korisnika prije slanja obavijesti kako biste osigurali pozitivno korisničko iskustvo. Pružite smislen sadržaj u obavijestima kako biste potaknuli angažman korisnika.

9. Uslužni radnici

Service Workers su moćna značajka koja vam omogućuje pokretanje skripti u pozadini, odvojeno od web stranice. To omogućuje značajke poput izvanmrežne podrške i sinkronizacije u pozadini:

self.addEventListener('install', event => {
  // Izvođenje koraka instalacije
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(odgovor => {
        vratiti odgovor || dohvati(događaj.zahtjev);
      })
  );
});

Uz Service Workers možete:

Predmemorirajte resurse kako bi vaša aplikacija bila dostupna izvan mreže.
Presretanje mrežnih zahtjeva za posluživanje sadržaja u predmemoriji ili rezervnih odgovora.
Omogućite push obavijesti kako biste zadržali angažman korisnika.

Na primjer, ako gradite progresivnu web-aplikaciju (PWA), servisni radnici su ključni za pružanje besprijekornog izvanmrežnog iskustva. Korisnici mogu nastaviti komunicirati s vašom aplikacijom čak i bez internetske veze, a sve promjene će se sinkronizirati kada ponovno budu na mreži.

podrška:Podržano u modernim preglednicima, ali uvijek provjerite kompatibilnost prije implementacije.

Praktični savjet: Upotrijebite `cache` API unutar svojih servisnih radnika za pohranjivanje osnovnih resursa i poboljšanje vremena učitavanja za korisnike koji se vraćaju. Osigurajte da su vaši servisni radnici ispravno registrirani i aktivirani za optimalnu izvedbu.

10. Web Share API

Web Share API omogućuje korisnicima dijeljenje sadržaja iz vaše web aplikacije s drugim aplikacijama na njihovom uređaju, kao što su društveni mediji:

navigator.share({
  naslov: 'Web Share API',
  tekst: 'Pogledajte ovaj sadržaj!',
  url: 'https://example.com',
}).then(() => {
  console.log('Sadržaj je uspješno podijeljen!');
}).catch((greška) => {
  console.error('Dijeljenje pogreške:', pogreška);
});

Ključne značajke Web Share API-ja uključuju:

Jednostavno dijeljenje teksta, URL-ova i drugih formata podataka.
Nativni dijaloški okvir za dijeljenje koji se integrira s korisničkim uređajem.
Poboljšan angažman korisnika poticanjem dijeljenja.

Na primjer, ako imate post na blogu, možete dopustiti korisnicima da ga podijele na svojim društvenim medijima izravno s vaše web stranice. Ova značajka može značajno povećati doseg i angažman vašeg sadržaja.

podrška:Dostupan u većini modernih preglednika s mobilnom podrškom.

Praktični savjet: Prije korištenja Web Share API-ja, provjerite podržava li ga uređaj korisnika. Omogućite zamjensku opciju za dijeljenje ako API nije dostupan kako biste osigurali besprijekorno iskustvo.

Zaključak

Korištenje API-ja preglednika može značajno poboljšati vaše web aplikacije bez potrebe za dodatnim bibliotekama. U ovom smo članku pokrili 10 moćnih API-ja, uključujući Structured Clone API, Performance API i još mnogo toga. Svaki od ovih alata može pomoći u pojednostavljenju vašeg koda i poboljšanju izvedbe.

Jeste li spremni podići svoje vještine web razvoja na višu razinu? Istražite ove API-je u svom sljedećem projektu i pogledajte kako vam mogu pomoći. Za daljnje čitanje o alatima koji mogu poboljšati vašu produktivnost, pogledajte našpretvarač slike u GIFibesplatni pretvarač videa u MP3.

Za više informacija o najnovijim dostignućima u web tehnologijama, posjetiteOpenAIiLice koje grli.