Bevezetés aBöngésző API-k

A webfejlesztési környezet rohamosan fejlődik. A böngészők minden évben új képességekkel gazdagodnak, amelyek leegyszerűsíthetik a kódolási folyamatot. A modern webalkalmazások térnyerésével a fejlesztők hatékony eszközökhöz férhetnek hozzá közvetlenül a böngészőn belül, így nincs szükség túlzott mértékű könyvtárakra és keretekre.

Ebben a cikkben megvizsgáljuk10 alulhasznált böngésző APIamelyek segíthetnek a gyakori problémák hatékonyabb megoldásában. Miért zsúfolja össze projektjét könyvtárakkal, ha a böngésző képes megbirkózni a nehézségekkel?

Akár tapasztalt fejlesztő, akár csak most kezd, ezek az API-k meglephetik egyszerűségükkel és erejükkel. Merüljön el közvetlenül, és nézze meg, hogyan javíthatják ezek az eszközök webalkalmazásait.

1. Strukturált klón API

A Structured Clone API egy játékmódosító az objektumok másolására. Sok fejlesztő számára az objektummásolás mindig is bonyolult feladat volt, gyakran könyvtárakat vagy összetett funkciókat igényel. Ezzel az API-val könnyedén létrehozhat egy mély másolatot egy objektumról:

const copy = strukturáltKlón(eredeti);

Ez az egysoros sok problémát megold:

Kezeli az összetett adattípusokat, mint plTérkép, Készlet, ésFolt.
A körkörös hivatkozásokat a kód összeomlása nélkül kezeli.
Megjegyzés: Nem klónoz funkciókat, ami kulcsfontosságú szempont, hogy emlékezzen.

Vegyük például fontolóra, hogy egy olyan összetett objektumot kell másolnia, amely beágyazott tömböket vagy objektumokat tartalmaz. A hagyományos módszerek, például a JSON szerializálás használata adatvesztéshez vagy hibákhoz vezethet, különösen körkörös hivatkozások esetén. A Structured Clone API kiküszöböli ezeket az aggályokat, zökkenőmentes módot biztosítva az adatok megkettőzésére.

Támogatás:Elérhető a modern böngészőkben, például a Chrome-ban, a Firefoxban és a Safariban, így biztonságos az éles használatra.

Gyakorlati tipp: Amikor ezt az API-t használja, mindig ellenőrizze a böngésző kompatibilitását, hogy megbizonyosodjon arról, hogy az alkalmazás konzisztensen működik a különböző környezetekben.

2. Performance API

Amikor a teljesítménymérésről van szó, a Performance API-t gyakran figyelmen kívül hagyják. Ahelyett, hogy harmadik féltől származó eszközökre hagyatkozna, ezt az API-t használhatja kódja teljesítményének nyomon követésére és összehasonlítására:

performance.mark("start");
// mérendő kód
performance.mark("end");
performance.measure("calc", "start", "end");
console.log(performance.getEntriesByName("calc"));

Ez segíthet meghatározni:

Mely funkciók gyorsabbak.
Ha az optimalizálás valóban előnyös.
Akár Worker-t, akár WASM-et érdemes megvalósítani.

Például, ha olyan összetett webalkalmazást fejleszt, amely feldolgozza a felhasználói adatokat, akkor a Performance API-t használhatja bizonyos funkciók vagy szolgáltatások összehasonlítására. A végrehajtási idő mérésével azonosíthatja a szűk keresztmetszeteket, és ennek megfelelően optimalizálhat.

Ezenkívül a Performance API lehetővé teszi a részletes teljesítménymutatók naplózását, amelyek felbecsülhetetlen értékűek lehetnek az alkalmazás hibakereséséhez vagy optimalizálásához. Ezeket a mutatókat a böngésző fejlesztői eszközeiben, a Teljesítmény lapon tekintheti meg.

Támogatás:Kiválóan működik minden modern böngészőben.

Gyakorlati tipp: Használja a Performance API-t a fejlesztés során, hogy adatokat gyűjtsön a kód teljesítményéről. Ezek az információk irányíthatják optimalizálási erőfeszítéseit, és javíthatják a felhasználói élményt.

3. Oldal láthatósági API

Gondolkozott már azon, hogy mi történik, ha a felhasználó lapot vált? Az Oldalláthatóság API segítségével észlelheti, hogy a lap aktív-e vagy sem:

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

Ez az API hihetetlenül hasznos:

Tudnivalók a legfontosabb böngésző API-k

📦

Strukturált klón API
Könnyedén másolhat összetett objektumokat.

📈

Performance API
Mérje meg és javítsa a webes teljesítményt.

👀

Oldal láthatósági API
Érzékeli, hogy az oldal mikor látható.

📏

ResizeObserver
Válaszoljon az elemek méretének változásaira.

🔍

Kereszteződésfigyelő
Figyelje az elemek láthatóságát.

Videók szüneteltetése, ha a felhasználó nem aktív.
A szükségtelen lekérdezési kérések leállítása a teljesítmény javítása érdekében.
CPU-használat csökkentése az akkumulátor élettartamának megtakarítása érdekében a mobileszközökön.

Ha például egy videostreamelő alkalmazást fejleszt, akkor az Oldal láthatósága API segítségével szüneteltetheti a videót, amikor a felhasználó elnavigál a lapról. Ez nemcsak a felhasználói élményt javítja, hanem a sávszélességet és a szervererőforrásokat is megtakarítja.

Ezenkívül olyan analitikai funkciókat is megvalósíthat, amelyek a láthatóság változásai alapján nyomon követik a felhasználói elköteleződést. Ezek az adatok segíthetnek megérteni, hogy a felhasználók hogyan lépnek kapcsolatba az alkalmazással, és mely funkciók a legvonzóbbak.

Támogatás:Minden modern böngészővel kompatibilis.

Gyakorlati tipp: Mindig tesztelje a láthatósági funkciót különböző forgatókönyvek esetén, például lapok váltása, a böngésző minimalizálása vagy másik alkalmazásra váltás esetén, hogy megbizonyosodjon arról, hogy az elvárt módon működik.

4. ResizeObserver

A reszponzív tervezésnél az elemek méretének nyomon követése gondot okozhat. A ResizeObserver API lehetővé teszi az elemek méretében bekövetkezett változások figyelését:

const ro = new ResizeObserver(entries => {
  for (bejegyzések állandó bevitele) {
    console.log(entry.contentRect.width);
  }
});
ro.observe(elem);

Ez az API megkönnyebbülés azoknak a fejlesztőknek, akik a múltban nehézkes átméretezési logikával foglalkoztak. Most már a böngésző tudja kezelni ezt Ön helyett!

Képzeljen el egy irányítópultot különféle widgetekkel, amelyeknek a nézetablak mérete alapján kell módosítaniuk elrendezésüket. A ResizeObserver segítségével észlelheti, ha a felhasználó átméretezi az ablakot vagy megváltoztatja egy adott elem méretét, lehetővé téve a felhasználói felület dinamikus átrendezését.

Támogatás:Széles körben elérhető a modern böngészőkben.

Gyakorlati tipp: A ResizeObserver használatával javíthatja a felhasználói élményt azáltal, hogy az alkalmazás elrendezése gördülékenyen reagál a méretváltozásokra. Ez különösen előnyös az érzékeny kialakításoknál, ahol az elemeknek zökkenőmentesen kell alkalmazkodniuk.

5. Intersection Observer API

Egy másik hatékony eszköz az Intersection Observer API. Ez lehetővé teszi annak megfigyelését, hogy egy elem mikor lép be vagy lép ki a nézetablakból:

const megfigyelő = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Tartalom betöltése vagy animációk aktiválása
    }
  });
});
megfigyelő.megfigyel(célElem);

A felhasználási esetek a következők:

A képek késleltetett betöltése a jobb teljesítmény és a gyorsabb oldalbetöltés érdekében.
Animációk aktiválása, amikor elemek jelennek meg a vonzóbb felhasználói élmény érdekében.
A felhasználói élmény javítása a tartalom szükség szerinti betöltésével, a kezdeti betöltési idő csökkentése.

Például, ha van egy hosszú cikk képekkel, akkor csak akkor tölthet be képeket, amikor azok hamarosan belépnek a nézetablakra. Ez csökkenti a kezdeti betöltési időt és sávszélességet takarít meg, különösen a mobileszközöket használó felhasználók számára.

Ezenkívül az Intersection Observer API segíthet az elemzésben azáltal, hogy nyomon követi, hogy hány felhasználó görgessen a weboldal adott szakaszaira, így értékes betekintést nyerhet a felhasználói elköteleződésbe.

Támogatás:Elérhető a modern böngészőkben.

Gyakorlati tipp: Valósítsa meg az Intersection Observer API-t a teljesítmény optimalizálásához, különösen a nagy tartalommal rendelkező alkalmazásokban. Ez segít abban, hogy gördülékenyebb élményt nyújtson a felhasználók számára, miközben megőrzi az erőforrásokat.

6. API lekérése

Az XMLHttpRequest napjai elmúltak. A Fetch API leegyszerűsíti a hálózati kérések elkészítésének folyamatát:

lekérni(url)
  .then(response => response.json())
  .then(data => console.log(data));

Ezzel az API-val egyszerűen:

Különféle választípusok, például JSON, szöveg és blobok kezelése.
Használja az async/await funkciót a tisztább és olvashatóbb kód érdekében.
Állítson be egyéni fejléceket kéréseihez, így rugalmassá válik a különböző API-k számára.

Például előfordulhat, hogy felhasználói adatokat kell lekérnie egy REST API-ból. A Fetch API segítségével tömör és olvasható kódot írhat, amely kezeli a hálózati kérések aszinkron jellegét a visszahívások bonyolultsága nélkül.

Ezenkívül a Fetch API támogatja az ígéreteket, megkönnyítve a láncolt kérések kezelését vagy a hibák kecses kezelését. Könnyen kezelheti a különböző válaszállapotokat is, ami robusztus módot biztosít a hálózati interakciók kezelésére.

Támogatás:Minden modern böngésző támogatja.

Gyakorlati tipp: Használja a Fetch API-t az összes hálózati kéréshez az olvashatóság és a karbantarthatóság javítása érdekében. Ne felejtse el megfelelően kezelni a hibákat a zökkenőmentes felhasználói élmény biztosítása érdekében.

7. Web Storage API

A felhasználói beállítások vagy munkamenet-adatok mentése még soha nem volt ilyen egyszerű a Web Storage API-val. Két fő tárolási lehetőséget kínál:

localStorageállandó adatokhoz, amelyek túlélik az oldalfrissítéseket.
sessionStorageideiglenes adatokhoz, amelyek csak az oldal munkamenetének idejére tartanak fenn.

Példa:

A Structured Clone API használata

Eredeti objektum létrehozása

Határozza meg a másolandó objektumot.

A strukturáltClone() hívása

Használja az API-t az objektum klónozásához.

Kezelje az összetett típusokat

Támogatja a Map-et, a Set-et és a Blob-ot.

Kerülje el a funkcióklónozást

Ne feledje, hogy nem klónoz funkciókat.

localStorage.setItem('kulcs', 'érték');
const value = localStorage.getItem('kulcs');

Ez az API különösen hasznos:

Felhasználói beállítások, például témabeállítások vagy nyelvi beállítások tárolása.
Munkamenetadatok, például felhasználói hitelesítési tokenek kezelése.
Nyomon követheti a bevásárlókosárban lévő tételeket anélkül, hogy szerveroldali megoldásra lenne szüksége.

Ha például e-kereskedelmi webhelyet hoz létre, akkor a Web Storage API segítségével megjegyezheti a felhasználók által a kosarába helyezett tételeket, még akkor is, ha elnavigál vagy frissíti az oldalt.

Támogatás:Minden modern böngésző támogatja.

Gyakorlati tipp: Használja a localStorage alkalmazást azokhoz az adatokhoz, amelyeket meg szeretne őrizni a munkameneteken keresztül, és a sessionStorage alkalmazást az egyetlen látogatás során releváns adatokhoz. Mindig tartsa szem előtt a biztonsági következményeket, amikor bizalmas információkat tárol.

8. Webes értesítések API

A Web Notifications API lehetővé teszi, hogy a webalkalmazások értesítéseket jelenítsenek meg a felhasználók számára. Ez a funkció fokozhatja a felhasználók elköteleződését azáltal, hogy akkor is tájékoztatja őket, amikor nem használják aktívan az alkalmazást:

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

const értesítés = new Notification("Helló!", {
  body: "Ez egy értesítő üzenet!",
});

A felhasználási esetek a következők:

A felhasználók figyelmeztetése az új üzenetekről vagy frissítésekről egy csevegőalkalmazásban.
A felhasználók értesítése fontos eseményekről, például emlékeztetőkről vagy határidőkről.
Visszajelzés küldése felhasználói műveletek, például űrlapok beküldése után.

Ha például üzenetküldő alkalmazást fejleszt, akkor a Web Notifications API segítségével értesítheti a felhasználókat az új üzenetekről, miközben más lapokon vagy alkalmazásokban böngésznek.

Az értesítések alkalmazása jelentősen javíthatja a felhasználói élményt azáltal, hogy biztosítja a felhasználók számára, hogy folyamatosan tájékozódjanak a fontos frissítésekről anélkül, hogy folyamatosan ellenőrizniük kellene az alkalmazást.

Támogatás:A legtöbb modern böngészőben elérhető.

Gyakorlati tipp: A pozitív felhasználói élmény érdekében mindig kérjen engedélyt a felhasználótól, mielőtt értesítést küldene. Jelentős tartalmat biztosítson az értesítésekben, hogy ösztönözze a felhasználók elkötelezettségét.

9. Szolgáltatási dolgozók

A Service Workers egy hatékony szolgáltatás, amely lehetővé teszi szkriptek futtatását a háttérben, a weboldaltól elkülönítve. Ez lehetővé teszi az olyan funkciókat, mint az offline támogatás és a háttérben történő szinkronizálás:

self.addEventListener('install', event => {
  // Hajtsa végre a telepítési lépéseket
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        válasz visszaküldése || fetch(esemény.kérés);
      })
  );
});

A Service Workers segítségével a következőket teheti:

Gyorsítótárazza az erőforrásokat az alkalmazás offline elérhetővé tételéhez.
Elfogja a hálózati kéréseket a gyorsítótárazott tartalom vagy a tartalék válaszok kiszolgálásához.
Engedélyezze a leküldéses értesítéseket, hogy fenntartsa a felhasználók érdeklődését.

Ha például egy progresszív webalkalmazást (PWA) épít, a Service Workers elengedhetetlen a zökkenőmentes offline élmény biztosításához. A felhasználók továbbra is használhatják az alkalmazást internetkapcsolat nélkül is, és a változtatások szinkronizálódnak, amint újra online állapotban vannak.

Támogatás:A modern böngészők támogatják, de végrehajtás előtt mindig ellenőrizze a kompatibilitást.

Gyakorlati tipp: Használja a "cache" API-t a Service Workers-en belül az alapvető erőforrások tárolására és a visszatérő felhasználók betöltési idejének javítására. Az optimális teljesítmény érdekében győződjön meg arról, hogy a Service Workers regisztrálva van és megfelelően aktiválva van.

10. Web Share API

A Web Share API lehetővé teszi a felhasználók számára, hogy megosszák az Ön webalkalmazásából származó tartalmat eszközük más alkalmazásaival, például a közösségi médiával:

navigator.share({
  title: "Web Share API",
  szöveg: "Nézze meg ezt a tartalmat!",
  url: 'https://example.com',
}).then(() => {
  console.log('A tartalom sikeresen megosztva!');
}).catch((hiba) => {
  console.error('Hibamegosztás:', hiba);
});

A Web Share API főbb jellemzői a következők:

Szöveg, URL-ek és egyéb adatformátumok egyszerű megosztása.
Natív megosztási párbeszédpanel, amely integrálható a felhasználó eszközével.
Fokozott felhasználói elkötelezettség a megosztás ösztönzésével.

Például, ha van egy blogbejegyzése, lehetővé teheti a felhasználók számára, hogy közvetlenül az Ön webhelyéről osszák meg azt közösségi oldalaikon. Ez a funkció jelentősen növelheti a tartalom elérését és elköteleződését.

Támogatás:Elérhető a legtöbb modern böngészőben mobil támogatással.

Gyakorlati tipp: A Web Share API használata előtt ellenőrizze, hogy a felhasználó eszköze támogatja-e azt. Biztosítson tartalék lehetőséget a megosztáshoz, ha az API nem érhető el a zökkenőmentes élmény biztosítása érdekében.

Következtetés

A böngésző API-k használatával jelentősen javíthatja webalkalmazásait anélkül, hogy további könyvtárakra lenne szüksége. Ebben a cikkben 10 hatékony API-t ismertettünk, köztük a Structured Clone API-t, a Performance API-t és még sok mást. Ezen eszközök mindegyike segíthet a kód egyszerűsítésében és a teljesítmény javításában.

Készen állsz arra, hogy webfejlesztési készségeidet magasabb szintre emeld? Fedezze fel ezeket az API-kat a következő projektjében, és nézze meg, hogyan működhetnek az Ön számára. Ha további információra van szüksége azokról az eszközökről, amelyek növelhetik termelékenységét, tekintse meg oldalunkatkép GIF konverterésingyenes videó MP3 konverter.

A webes technológiák legújabb vívmányaival kapcsolatos további információkért látogasson el ideOpenAIésÁtölelő Arc.