A böngésző képességei és határai

Célok

A lecke végére fel tudod sorolni a böngésző legfontosabb programozható képességeit (fájlok, helyi tárolás, rajzolás, média), meg tudod magyarázni, miért „közvetített” a hozzáférés, és három külön kérdést tudsz feltenni minden képességnél: elérhető-e, engedélyezett-e, sikerült-e.

Miért fontos a böngésző korlátait is ismerni?

A böngésző nemcsak HTML-t jelenít meg: egy webalkalmazás rajzolhat, fájlt dolgozhat fel, helyben tárolhat adatot, médiát játszhat le, és bizonyos eszközfunkciókat is kérhet. Ugyanakkor a weboldal egy idegen, nem megbízott program: nem kaphat korlátlan hozzáférést a felhasználó gépéhez. Ezért a böngésző közvetíti a hozzáférést: csak meghatározott felületeken (API-kon), meghatározott feltételekkel enged valamit. Aki ezt ismeri, tudja, mire építhet, és mire nem.

A böngésző API nem azonos a szerver által kínált webes API-val (5. fejezet). Itt a böngészőnek a weboldal számára biztosított programozható felületeiről van szó: például egy fájlobjektum olvasásáról vagy a rajzfelületről.

Egy böngészős szerkesztő többféle képességet használ

Egy hallgató böngészős ábraszerkesztőben kiválaszt egy képfájlt a gépéről, módosítja, és később folytatni szeretné a munkát. Ehhez fájlbeolvasás, rajzolás és helyi tárolás kell, és a három különböző API különböző feltételekkel.

flowchart LR
    U[Felhasználó] -->|fájlt választ| F[File API]
    F --> A[Webalkalmazás]
    A --> C[Canvas 2D vagy WebGL]
    A --> I[IndexedDB: helyi adat]
    A --> E[Export vagy feltöltés]

Az ábra lehetséges felépítést mutat. A kijelölt fájl beolvasása, a böngésző saját tárhelyén tárolt projekt és a szerverre való feltöltés három külön művelet: egyikből sem következik automatikusan a másik.

Helyi fájlok: kiválasztás és olvasás

A File API lehetővé teszi, hogy az oldal a felhasználó által kiválasztott helyi fájlt beolvassa. A kiválasztás történhet <input type="file"> elemmel vagy húzással (drag and drop), ezt az MDN is így írja le. A kiválasztott fájl File objektumként érhető el. A kiválasztás nem jelent automatikus feltöltést: az oldal dönthet úgy, hogy csak helyben dolgozik vele. A weboldal nem olvashatja ki tetszés szerint a felhasználó fájljait.

<label for="forras">Válassz képet</label>
<input id="forras" type="file" accept="image/*">

Ez a HTML csak a választó felületet adja; a fájl feldolgozásához programkód kell. Egyes böngészők további fájlrendszer-felületeket is kínálnak, ezek támogatottsága eltérő, ezért egy egyszerű feltöltést nem érdemes ezektől függővé tenni.

Helyi adattárolás

A böngésző saját tárhelyén az oldal adatot tarthat meg a következő látogatásra. Három fontos eszköz van:

Eszköz	Mire jó?	Jellemző
localStorage	Kis, egyszerű kulcs–érték adatok	Az MDN szerint eredetenként kb. 5 MiB; túllépésnél hibát dob
sessionStorage	Az adott böngészőlap munkamenetéhez kötött adatok	Rövid életű
IndexedDB	Nagyobb, strukturált adathalmaz, tranzakciókkal	A mennyiséget a böngésző kezeli

Az IndexedDB-be az ábraszerkesztő például elteheti a félbehagyott munka elemeit. A tárhely eredethez kötött. Az eredet (origin) a séma, a hosztnév és a port együttese (a 8. fejezetben részletesen tárgyaljuk), így egy másik, idegen eredetű oldal nem olvashatja ki a projektet. (A cookie nem kliensoldali tárolónak való: minden kéréssel együtt elmegy a szervernek. Részletesen a 7. fejezetben.)

A helyi tárolás nem megbízható biztonsági mentés:

• A hely korlátozott. A kvótát a böngésző a lemezméret alapján számítja; Chrome-ban és Edge-ben ez akár a lemez 60%-a, Firefoxban a lemez 10%-a (legfeljebb 10 GiB), de ezek az értékek böngészőnként és verziónként változnak.
• Ha a tárhely megtelik, az írás QuotaExceededError hibával meghiúsul.
• A böngésző kiürítheti a tárhelyet: tárhelynyomás esetén a legrégebben használt eredet adatait törli, ráadásul az eredet minden adatát egyszerre. A Safari a követés elleni védelem bekapcsolt állapotában azt az eredetet is megtisztítja, amellyel a felhasználó 7 napnyi böngészőhasználat alatt nem lépett kapcsolatba: a szkriptek által létrehozott adatait törli.
• Más eszközön nem jelenik meg automatikusan.

Ezért a fontos munka exportját vagy szerveres szinkronját külön kell megtervezni.

flowchart TD
    A[Webalkalmazás] --> F[Felhasználó által választott fájl]
    A --> D[IndexedDB: alkalmazás helyi adatai]
    A --> S[Szerver: külön adatcsere]
    F -. nem ugyanaz a tárhely .- D
    D -. nincs automatikus szinkron .- S

Rajzolás: Canvas 2D és WebGL

A Canvas 2D programból rajzolt képekhez, egyszerű animációkhoz, diagramokhoz használható. A WebGL szintén egy canvas elemen belül működik, de a grafikus hardverre támaszkodik, interaktív 2D és 3D megjelenítéshez (WebGL: Web Graphics Library). Egy statikus ábrához gyakran elég a szemantikus HTML vagy egy egyszerű diagram; egy térbeli modell forgatásához a WebGL indokoltabb.

A WebGL támogatása mellett az eszköz tényleges grafikus képessége is számít: a programnak ellenőriznie kell, sikerült-e grafikus környezetet kapnia, és egyszerűbb nézetet vagy szöveges leírást kell tartalékként nyújtania. A rajzolt képpontok önmagukban nem adják át a rajzolt objektumok jelentését a segítő technológiáknak; ha a grafika információt hordoz, annak hozzáférhető alternatívája is kell (9. fejezet).

Média, helyadat és értesítés

A HTML médiaelemei hang és videó lejátszására adnak felületet. Más API-k a helyadatot, a kamera- és mikrofonhasználatot vagy az értesítések megjelenítését kínálják. Ezeknél a böngésző általában kifejezett engedélyt kér a felhasználótól. Fontos, hogy a funkció célja világos legyen, és az elutasítás után is értelmes maradjon az alkalmazás. Egy kurzusoldalnak például nincs szüksége a pontos földrajzi helyre; ha térképes funkciót kínál, a cím szövegesen is álljon rendelkezésre.

Cél	Lehetséges képesség	Ha nem érhető el
Kép megnyitása	Fájlválasztó és File API	Érthető hibaüzenet vagy más beviteli mód
Munka folytatása később	IndexedDB	Export vagy szerveres mentés külön döntéssel
Térbeli ábra	WebGL	Egyszerűbb kép vagy szöveges leírás
Hang vagy videó	Médiaelem	A lényeges információ más formában is elérhető
Helyhez kötött találat	Helyadat-API	Kézi helymegadás

Három külön kérdés minden képességnél

1. Elérhető-e az API az adott böngészőben és környezetben? (képességvizsgálat, lásd 3.5)
2. Teljesülnek-e a használat feltételei? (felhasználói művelet, engedély)
3. Sikerült-e a művelet? (a grafikus környezet létrehozása meghiúsulhat, a helyadat mérése hibázhat, a tárhely megtelhet)

A képesség megléte önmagában nem indok a használatára. A felhasználói cél, az adatkezelés és az alternatív út együtt határozza meg, hogy egy böngészőfunkció jó választás-e.

Végigvezetett példa: a Kurzuspont „Saját jegyzet” funkciója

A Kurzuspont lehetővé teszi, hogy a hallgató jegyzetet írjon egy kurzushoz. A fejlesztők a jegyzetet először az IndexedDB-be mentik, hogy ne vesszen el, ha a hallgató véletlenül bezárja a lapot.

Kérdés	Válasz
Elérhető-e az IndexedDB?	Képességvizsgálattal ellenőrzik.
Teljesülnek-e a feltételek?	Privát böngészési módban a kvóta eltérhet; a program kezeli a hibát.
Sikerült-e a mentés?	Ha a tárhely megtelt, a program jelzi a hibát.
Elég-e a helyi mentés?	Nem: a jegyzetet a szerverre is el kell menteni, mert a böngésző kiürítheti a tárhelyet, és más eszközön nem látszik.

Gyakori tévhitek

Állítás	Pontosítás
„Egy oldal tetszőleges helyi fájlt elolvashat.”	Csak a felhasználó által kiválasztott fájlhoz fér hozzá.
„A fájl kiválasztása automatikus feltöltés.”	Az oldal helyben is feldolgozhatja; a feltöltés külön művelet.
„Az IndexedDB egy látható projektfájl.”	Az alkalmazás böngészőben tárolt, eredethez kötött adatbázisa.
„A helyi mentés biztos biztonsági másolat.”	A tárhely korlátozott és törölhető, más eszközön nem látszik.
„A WebGL minden eszközön garantáltan működik.”	A grafikus környezet elérhetőségét ellenőrizni kell.
„Az API létezése biztos sikert jelent.”	A feltételek és a művelet eredménye külön kérdés.

Röviden

• A böngésző közvetített, korlátozott hozzáférést ad az eszközhöz API-kon keresztül.
• A fájlt a felhasználó választja ki; a helyi tárolás (localStorage, IndexedDB) eredethez kötött és törölhető.
• A rajzolás (Canvas, WebGL) és a média igényelhet tartalék utat és alternatívát.
• Minden képességnél három kérdést kell feltenni: elérhető-e, engedélyezett-e, sikerült-e.
• A helyi tárolás nem helyettesíti a mentést a szerveren.

Ellenőrző kérdések

1. Mi a különbség egy kiválasztott fájl olvasása és annak feltöltése között?
2. Miért nem helyettesíti az IndexedDB a szerveres mentést?
3. Mi a különbség a böngésző API és a szerver által kínált webes API között?
4. Milyen három kérdést tegyél fel egy új böngészőképesség használata előtt?

Tanulási források

• Using files from web applications (MDN) — a File API használata angolul.
• Storage quotas and eviction criteria (MDN) — a böngészőtárhely kvótái és törlési szabályai.