Įvadas įNaršyklės API

Interneto kūrimo aplinka sparčiai vystosi. Kiekvienais metais naršyklės įgyja naujų galimybių, kurios gali supaprastinti kodavimo procesą. Atsiradus šiuolaikinėms žiniatinklio programoms, kūrėjai turi prieigą prie galingų įrankių rinkinio tiesiai naršyklėje, todėl nebereikia perteklinių bibliotekų ir sistemų.

Šiame straipsnyje mes išnagrinėsime10 nenaudojamų naršyklės APIkurie gali padėti efektyviau išspręsti įprastas problemas. Kam užgriozdinti projektą bibliotekomis, kai naršyklė gali atlikti sunkų darbą?

Nesvarbu, ar esate patyręs kūrėjas, ar tik pradedate, šios API gali jus nustebinti savo paprastumu ir galia. Pasinerkime tiesiai ir pažiūrėkime, kaip šie įrankiai gali pagerinti jūsų žiniatinklio programas.

1. Struktūrinio klono API

„Structured Clone“ API yra žaidimų keitiklis, skirtas objektams kopijuoti. Daugeliui kūrėjų objektų kopijavimas visada buvo sudėtinga užduotis, kuriai dažnai reikia bibliotekų arba sudėtingų funkcijų. Naudodami šią API galite be vargo sukurti gilią objekto kopiją:

const kopija = strukturuotasKlonas(originalas);

Šis vienas įdėklas išsprendžia daugybę problemų:

Tvarko sudėtingus duomenų tipus, pvzŽemėlapis, Nustatyti, irBlob.
Tvarko žiedines nuorodas nesugadindamas kodo.
Pastaba: jis neklonuoja funkcijų, o tai labai svarbu atsiminti.

Pavyzdžiui, apsvarstykite, kada reikia nukopijuoti sudėtingą objektą, kuriame yra įdėtųjų masyvų arba objektų. Naudojant tradicinius metodus, pvz., JSON serializavimą, gali būti prarasti duomenys arba gali atsirasti klaidų, ypač naudojant žiedines nuorodas. „Structured Clone“ API pašalina šias problemas ir suteikia galimybę sklandžiai kopijuoti duomenis.

Palaikymas:Galima naudoti šiuolaikinėse naršyklėse, pvz., „Chrome“, „Firefox“ ir „Safari“, todėl ją saugu naudoti gamyboje.

Praktinis patarimas: kai naudojate šią API, visada patikrinkite naršyklės suderinamumą, kad įsitikintumėte, jog jūsų programa nuosekliai veikia įvairiose aplinkose.

2. Našumo API

Kalbant apie našumo matavimą, Performance API dažnai nepaisoma. Užuot pasikliavę trečiųjų šalių įrankiais, galite naudoti šią API kodo našumui stebėti ir palyginti:

performance.mark("pradžia");
// kodas matuoti
performance.mark("pabaiga");
performance.measure("calc", "start", "end");
console.log(performance.getEntriesByName("calc"));

Tai gali padėti nustatyti:

Kurios funkcijos yra greitesnės.
Jei optimizavimas iš tikrųjų yra naudingas.
Nesvarbu, ar verta įdiegti darbuotoją, ar WASM.

Pavyzdžiui, jei kuriate sudėtingą žiniatinklio programą, kuri apdoroja vartotojo duomenis, galite naudoti Performance API, kad palygintumėte konkrečias funkcijas ar funkcijas. Išmatuodami vykdymo laiką, galite nustatyti kliūtis ir atitinkamai optimizuoti.

Be to, „Performance“ API leidžia registruoti išsamią našumo metriką, kuri gali būti neįkainojama derinant arba optimizuojant programą. Šią metriką galite peržiūrėti naršyklės kūrėjo įrankių našumo skirtuke.

Palaikymas:Puikiai veikia visose šiuolaikinėse naršyklėse.

Praktinis patarimas: kurdami naudokite Performance API, kad rinktumėte duomenis apie kodo našumą. Ši informacija gali padėti optimizuoti ir pagerinti naudotojo patirtį.

3. Puslapio matomumo API

Ar kada susimąstėte, kas nutinka, kai vartotojas perjungia skirtukus? Naudodami puslapio matomumo API galite nustatyti, kada jūsų skirtukas aktyvus, ar ne:

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

Ši API yra neįtikėtinai naudinga:

Pagrindinės naršyklės API, kurias reikia žinoti

📦

Struktūrinio klono API
Lengvai kopijuokite sudėtingus objektus.

📈

Performance API
Išmatuokite ir pagerinkite žiniatinklio našumą.

👀

Puslapio matomumo API
Nustatykite, kada puslapis matomas.

📏

ResizeObserver
Reaguokite į elemento dydžio pokyčius.

🔍

Sankryžų stebėtojas
Stebėkite elementų matomumą.

Vaizdo įrašų pristabdymas, kai vartotojas nėra įtrauktas.
Nereikalingų apklausų užklausų stabdymas, siekiant pagerinti našumą.
Sumažinti procesoriaus naudojimą, kad sutaupytumėte mobiliųjų įrenginių akumuliatoriaus veikimo laiką.

Pavyzdžiui, jei kuriate vaizdo įrašų srautinio perdavimo programą, galite naudoti Puslapio matomumo API, kad pristabdytumėte vaizdo įrašą, kai vartotojas išeina iš skirtuko. Tai ne tik pagerina vartotojo patirtį, bet ir taupo pralaidumą bei serverio išteklius.

Be to, galite įdiegti analizės funkcijas, kurios stebi naudotojų įtraukimą pagal matomumo pokyčius. Šie duomenys gali padėti suprasti, kaip naudotojai sąveikauja su programa ir kurios funkcijos yra patraukliausios.

Palaikymas:Suderinamas su visomis šiuolaikinėmis naršyklėmis.

Praktinis patarimas: visada išbandykite matomumo funkciją įvairiais scenarijais, pvz., perjungdami skirtukus, sumažindami naršyklę arba perjungdami į kitą programą, kad įsitikintumėte, jog ji veikia taip, kaip tikėtasi.

4. ResizeObserver

Norint sukurti jautrų dizainą, sekti elementų dydžius gali būti sudėtinga. ResizeObserver API leidžia stebėti elemento dydžio pokyčius:

const ro = naujas ResizeObserver(įrašai => {
  for (nuolatinis įrašų įvedimas) {
    console.log(entry.contentRect.width);
  }
});
ro.stebėti(elementas);

Ši API yra palengvinimas kūrėjams, kurie praeityje susidūrė su sudėtinga dydžio keitimo logika. Dabar naršyklė gali tai padaryti už jus!

Įsivaizduokite, kad sukuriate prietaisų skydelį su įvairiais valdikliais, kurių išdėstymą reikia koreguoti pagal peržiūros srities dydį. ResizeObserver gali padėti aptikti, kada vartotojas keičia lango dydį arba konkretaus elemento dydį, todėl galėsite dinamiškai pertvarkyti vartotojo sąsają.

Palaikymas:Plačiai prieinama šiuolaikinėse naršyklėse.

Praktinis patarimas: naudokite ResizeObserver, kad pagerintumėte vartotojo patirtį, užtikrindami, kad jūsų programos išdėstymas sklandžiai reaguotų į dydžio pokyčius. Tai ypač naudinga reaguojant į dizainą, kur elementai turi sklandžiai prisitaikyti.

5. Intersection Observer API

Kitas galingas įrankis yra Intersection Observer API. Tai leidžia stebėti, kada elementas įeina arba išeina iš peržiūros srities:

const stebėtojas = new IntersectionObserver(įrašai => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Įkelti turinį arba suaktyvinti animaciją
    }
  });
});
stebėtojas.stebėti(targetElement);

Naudojimo atvejai apima:

Tingai įkeliami vaizdai, kad būtų geresnis našumas ir greitesnis puslapio įkėlimo laikas.
Animacijos suaktyvinimas, kai atsiranda elementų, kad naudotojų patirtis būtų patrauklesnė.
Vartotojo patirties gerinimas įkeliant turinį pagal poreikį, sumažinant pradinį įkėlimo laiką.

Pavyzdžiui, jei turite ilgą straipsnį su vaizdais, galite įkelti vaizdus tik tada, kai jie ruošiasi patekti į peržiūros sritį. Tai sumažina pradinį įkėlimo laiką ir taupo pralaidumą, ypač mobiliųjų įrenginių naudotojams.

Be to, „Insection Observer“ API gali padėti atlikti analizę, nes stebi, kiek naudotojų slenka į konkrečias jūsų tinklalapio skiltis, taip suteikdama vertingų įžvalgų apie naudotojų įtraukimą.

Palaikymas:Galima naudoti šiuolaikinėse naršyklėse.

Praktinis patarimas: įdiekite Intersection Observer API, kad optimizuotumėte našumą, ypač programose, kuriose yra daug turinio. Tai padės sukurti sklandesnę naudotojų patirtį ir taupyti išteklius.

6. Gauti API

XMLHttpRequest laikai praėjo. „Fettch“ API supaprastina tinklo užklausų teikimo procesą:

gauti (url)
  .then(response => response.json())
  .then(data => console.log(data));

Naudodami šią API galite lengvai:

Tvarkykite skirtingus atsakymų tipus, pvz., JSON, tekstą ir BLOB.
Naudokite asinchronizaciją / laukti, kad kodas būtų švaresnis ir lengviau skaitomas.
Nustatykite pasirinktines savo užklausų antraštes, kad būtų lankstus įvairioms API.

Pavyzdžiui, gali reikėti gauti vartotojo duomenis iš REST API. Naudodami Fetch API galite rašyti glaustą ir skaitomą kodą, kuris tvarko asinchroninį tinklo užklausų pobūdį be sudėtingų atgalinių skambučių.

Be to, „Fetch“ API palaiko pažadus, todėl lengviau dirbti su grandininėmis užklausomis arba grakščiai tvarkyti klaidas. Taip pat galite lengvai tvarkyti skirtingas atsakymo būsenas, suteikdami patikimą būdą valdyti tinklo sąveiką.

Palaikymas:Palaikomos visos šiuolaikinės naršyklės.

Praktinis patarimas: naudokite „Fetch“ API visoms tinklo užklausoms, kad pagerintumėte skaitomumą ir priežiūrą. Nepamirškite tinkamai elgtis su klaidomis, kad naudotojas veiktų sklandžiai.

7. Web Storage API

Išsaugoti vartotojo nuostatas ar seanso duomenis dar niekada nebuvo taip paprasta naudojant žiniatinklio saugyklos API. Jame yra dvi pagrindinės saugojimo galimybės:

vietinė saugyklanuolatiniams duomenims, kurie išlieka atnaujinami puslapis.
sessionStoragelaikiniems duomenims, kurie išlieka tik puslapio seanso metu.

Pavyzdys:

Struktūrinio klono API naudojimas

Sukurkite originalų objektą

Apibrėžkite objektą, kurį norite kopijuoti.

Iškvieskite struktūrinį kloną()

Norėdami klonuoti objektą, naudokite API.

Rankenos sudėtingi tipai

Palaiko žemėlapį, rinkinį ir BLOB.

Venkite funkcinio klonavimo

Atminkite, kad jis neklonuoja funkcijų.

localStorage.setItem('key', 'value');
const reikšmė = localStorage.getItem('raktas');

Ši API ypač naudinga:

Išsaugomos vartotojo nuostatos, pvz., temos nustatymai arba kalbos pasirinkimai.
Seanso duomenų, pvz., naudotojo autentifikavimo prieigos raktų, valdymas.
Stebėkite prekes krepšelyje, nereikalaujant serverio sprendimo.

Pavyzdžiui, jei kuriate el. prekybos svetainę, galite naudoti žiniatinklio saugyklos API, kad prisimintumėte elementus, kuriuos naudotojas įdeda į krepšelį, net jei jis nukeliauja arba atnaujina puslapį.

Palaikymas:Palaikomos visos šiuolaikinės naršyklės.

Praktinis patarimas: naudokite „localStorage“ duomenims, kuriuos norite išsaugoti per seansus, ir „sessionStorage“ duomenims, kurie svarbūs tik vieno apsilankymo metu. Saugodami neskelbtiną informaciją visada atminkite saugumo pasekmes.

8. Žiniatinklio pranešimų API

Žiniatinklio pranešimų API leidžia žiniatinklio programoms rodyti pranešimus vartotojams. Ši funkcija gali padidinti naudotojų įtraukimą, nes juos informuoja net tada, kai jie aktyviai nenaudoja jūsų programos:

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

const notification = new Notification("Sveiki!", {
  body: "Tai yra pranešimas!",
});

Naudojimo atvejai apima:

Vartotojų perspėjimas apie naujus pranešimus ar atnaujinimus pokalbių programoje.
Vartotojų informavimas apie svarbius įvykius, pvz., priminimus ar terminus.
Atsiliepimų teikimas po naudotojo veiksmo, pvz., formos pateikimo.

Pavyzdžiui, jei kuriate pranešimų siuntimo programą, galite naudoti žiniatinklio pranešimų API, kad praneštumėte vartotojams apie naujus pranešimus, kai jie naršo kituose skirtukuose ar programas.

Įdiegę pranešimus gali žymiai pagerinti naudotojo patirtį, nes vartotojai nuolatos tikrins programos naujienas.

Palaikymas:Galima daugelyje šiuolaikinių naršyklių.

Praktinis patarimas: visada paprašykite vartotojo leidimo prieš siųsdami pranešimus, kad užtikrintumėte teigiamą vartotojo patirtį. Pranešimuose pateikite prasmingą turinį, kad paskatintumėte naudotojų įsitraukimą.

9. Aptarnaujantys darbuotojai

Service Workers yra galinga funkcija, leidžianti paleisti scenarijus fone, atskirai nuo tinklalapio. Tai įgalina tokias funkcijas kaip palaikymas neprisijungus ir sinchronizavimas fone:

self.addEventListener('install', event => {
  // Atlikite diegimo veiksmus
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        grąžinti atsakymą || atnešti(įvykis.užklausa);
      })
  );
});

Su paslaugų darbuotojais galite:

Talpykloje saugokite išteklius, kad programa būtų pasiekiama neprisijungus.
Perimkite tinklo užklausas teikti talpykloje saugomą turinį arba atsarginius atsakymus.
Įgalinkite tiesioginius pranešimus, kad naudotojai būtų įtraukti.

Pavyzdžiui, jei kuriate progresyvią žiniatinklio programą (PWA), paslaugų darbuotojai yra būtini norint užtikrinti sklandžią patirtį neprisijungus. Naudotojai gali ir toliau bendrauti su programa net neturėdami interneto ryšio, o visi pakeitimai bus sinchronizuojami, kai jie vėl prisijungs.

Palaikymas:Palaikoma šiuolaikinėse naršyklėse, tačiau prieš įdiegiant visada patikrinkite suderinamumą.

Praktinis patarimas: naudokite „cache“ API savo „Service Workers“, kad saugotumėte esminius išteklius ir pagerintumėte sugrįžtančių vartotojų įkėlimo laiką. Įsitikinkite, kad jūsų paslaugų darbuotojai yra tinkamai užregistruoti ir aktyvuoti, kad jie veiktų optimaliai.

10. Web Share API

„Web Share“ API leidžia vartotojams bendrinti turinį iš jūsų žiniatinklio programos su kitomis savo įrenginio programomis, pvz., socialine žiniasklaida:

navigator.share({
  pavadinimas: „Web Share API“,
  tekstas: „Pažiūrėkite šį turinį!“,
  url: 'https://example.com',
}). then(() => {
  console.log('Turinys sėkmingai bendrinamas!');
}).catch((klaida) => {
  console.error('Klaidų bendrinimas:', klaida);
});

Pagrindinės Web Share API funkcijos:

Lengvas teksto, URL ir kitų duomenų formatų bendrinimas.
Savasis bendrinimo dialogo langas, kuris integruojamas su naudotojo įrenginiu.
Padidėjęs naudotojų įsitraukimas skatinant bendrinti.

Pavyzdžiui, jei turite tinklaraščio įrašą, galite leisti vartotojams bendrinti jį savo socialinėje žiniasklaidoje tiesiai iš savo svetainės. Ši funkcija gali žymiai padidinti jūsų turinio pasiekiamumą ir įtraukimą.

Palaikymas:Galima naudoti daugelyje šiuolaikinių naršyklių su mobiliųjų įrenginių palaikymu.

Praktinis patarimas: prieš naudodami Web Share API patikrinkite, ar vartotojo įrenginys ją palaiko. Pateikite atsarginę bendrinimo parinktį, jei API nepasiekiama, kad užtikrintumėte sklandų naudojimą.

Išvada

Naršyklės API naudojimas gali žymiai pagerinti žiniatinklio programas, nereikalaujant papildomų bibliotekų. Šiame straipsnyje aptarėme 10 galingų API, įskaitant Structured Clone API, Performance API ir kt. Kiekvienas iš šių įrankių gali padėti supaprastinti kodą ir pagerinti našumą.

Ar esate pasirengęs perkelti savo žiniatinklio kūrimo įgūdžius į kitą lygį? Išnagrinėkite šias API kitame projekte ir sužinokite, kaip jos gali jums padėti. Norėdami daugiau sužinoti apie įrankius, galinčius padidinti jūsų produktyvumą, peržiūrėkite mūsųvaizdo konverteris į GIFirNemokamas video konverteris į mp3.

Norėdami gauti daugiau informacijos apie naujausius žiniatinklio technologijų pasiekimus, apsilankykiteOpenAIirApkabinantis Veidas.