HTML5 oýunlarynyň krossbrauzer laýyklygy: synag matrisi

1) Näme üçin HTML5-oýunlaryň krossbrauzerligi "agyrýar"?

Oýunlar platformanyň ähli gatlaklaryna diýen ýaly täsir edýär: grafika (Canvas/WebGL/WebGPU), taýmerler we akymlar (RAF/Workers), ses (WebAudio/Media policies), giriş (keyboard/pointer/touch/gamepad), tor we keşler (SW/Cache/IndexedDB), integrasiýa (fullscreen/orientation/PWA). Hereketlendirijileriň tapawudy - Chromium (Chrome/Edge/Opera/Android), WebKit (Safari/macOS, iOS/iPadOS ähli brauzerlerde), Gecko (Firefox). Mundan başga-da, energiýa tygşytlamak, fon belliklerini üýtgetmek, ýat çäkleri we awtopleý syýasaty.

---

2) Goldanýan gurşaw: maksatly matrisa

Brauzerler/OS (iň az wersiýalar - mysal, SLA-laryňyzy goýuň):

• Desktop: Chrome/Edge 116+, Firefox 115+, Safari 16+ (macOS 12+).
• Mobile: Chrome Android 116+ (Android 9+), Samsung Internet 21+, Safari iOS/iPadOS 16+.
• WebView: Android WebView 116 +, iOS - diňe WebKit (iOS-daky ähli brauzerler WebKit ulanýarlar).
• PWA (gurnama): Chromium desktop/mobile, Safari iOS 16. 4 + (Add to Home Screen).

Enjam synplary:

• Pes (ykjam býudjet, 2 GB RAM)
• Orta (ykjam/ultrabuklar, 4-8 GB RAM)
• Ýokary (desktop/konsumer GPU, 8-16 GB)

---

3) Uly synag matrisa (şablon)

Trackeriňizde hakyky tablisany düzüň. Aşakda ölçemeli esasy bloklar we statuslar (OK/Partial/N/A) bar.

3. 1 Grafika

3. 2 Ses we media syýasaty

3. 3 Giriş we interfeýs

3. 4 Öndürijilik we energiýa tygşytlamak

3. 5 Tygşytlamak/awtonom/tor

---

4) El ssenarileriniň iň az toplumy (Smoke)

1. Birinji başlangyç: assets ýüklemek, splash, orta synpda <3 s derejesinden başlamak.

2. Giriş: taç/syçan/klawa/oýun pady, köp barmaklar, saklamak, swipler.

3. Ekran: doly ekran, ugruň petiklenmegi, safe-area (iPhone).

4. Ses: ulanyjy hereketinden soň ilkinji bellik, mute/unmute, aýdym-saz garyndysy/FX.

5. WebGL: kontekstiň ýitmegi/dikeldilmegi (simulýasiýa), kölegeler/şaderler/masştab.

6. Durmuş aýlawy: aýlanmak/açmak, jaň etmek/habar bermek, fonda goýma.

7. Saklaýjylar: IndexedDB/LocalStorage-da ösüş/sazlamalar, gaýtadan başlanandan soň dikeldiş/awtonom.

8. Tor: 3G throttle/high RTT, tor ýitgileri, retralar, SW arkaly kesmek.

9. PWA: gurnama (Chromium/iOS), nyşanlar, awtonom sahypa, wersiýany täzelemek.

10. Uzyn sessiýa: syzmazdan 20-30 minut (FPS/heap durnukly).

---

5) Awtomatlaşdyryş: nädip we nädip

Playwright (maslahat berilýär): çapraz hereketlendiriji, ykjam emulýasiýa, WebKit sürüjisi, wideo/söwda.

Cypress: çalt dev sikli, ýöne WebKit/Mobile çäklidir.

WebDriver/Selenium: bulutlar bilen integrasiýa.

Bulutlar: BrowserStack, Sauce Labs - hakyky enjamlar we iOS Safari.

Profillemek: Chrome DevTools Protocol, Safari Web Inspector (Remote), Firefox Profiler.

Perf skriptleri: RUM meňzeş asset ýüklemek üçin k6/browser.

Maslahat: Her PR üçin awtotestleriň "bukjasyny" 3-5 minutlap (smoke) saklaň: ýüklemek, bir oýun aýlawy, arakesme, ugrukdyryş, saklanyş barlagy.

---

6) Öndürijilik: maksatly metrikler we telemetriýa

FPS: durnukly 60 fps (ýa-da ProMotion-da 120) - diňe orta däl, frame pacing.

Frame budget: 16. 7 ms (ýa-da 8. 3 ms) update + render, GC <2-3 ms çarçuwada.

Input latency: <80 ms mobail, 50 ms desktop.

Time-to-First-Frame (TTFF): < 1. 5 s (assets ýüklenenden soň).

Heap beýikligi: sessiýanyň 20 minutynda + 10% -den köp bolmaly däldir; runaway allocations ýok.

Ses latency: <100 ms roundtrip.

RUM guruň: FPS, TTFF, heap, WebGL context lost telemetriýasyny, 'browser/os/device' boýunça render ýalňyşlyklaryny iberiň.

---

7) Ýygy-ýygydan gabat gelmezlik we nädip bejermeli

7. 1 Grafika/render

HiDPI Canvas: logiki ululygy = CSS px, fiziki = 'css devicePixelRatio'.

WebGL kontekst lost: 'webglcontextlost/webglcontextrestored' -i diňläň, gaýtadan açmak üçin serişdeleri saklaň.

Tekstura/şeýderler: uniwersal däl giňeltmelerden gaça duruň; 'OES _ texture _ float', 'EXT _ color _ buffer _ float' we fallback.

WebGPU: feature-flag aýlanyň; WebGL2 ýoly fallback hökmünde saklaň.

7. 2 Ses/awtopli

"AudioContext" -i ulanyjy hereketi ('tap/click') boýunça başla we "rugsat" baýdagyny sakla.

iOS-da aýlanylanda/geçilende suspend-e taýyn boluň.

7. 3 Giriş/yşaratlar

Çäräni diňleýänler üçin passive ediň; nirede 'preventDefault ()' - passive-iň aç-açan öçürilmegi.

Pointer Events + Touch Events - goşa işlemekden gaça duruň; giriş gatlagyny abstrakt.

Gamepad: 'navigatory barlaň. getGamepads () 'RAF boýunça, düwmeleriňizi düzüň.

7. 4 Fullscreen/Orientation/Safe-Area

iOS üçin 'env (safe-area-inset-)' -ni göz öňünde tutuň, kanwasa/Overlay UI padding goşuň.

Orientation lock diňe user gesture; "Ekrany öwrüň" düwmesi bar.

7. 5 Hekaýalar/awtonom

IndexedDB: amallary wagt nokatlaryna/retralara öwüriň; iOS kwotalary az - ýeňil tygşytlamalary saklaň.

Service Worker: assetalar üçin 'Stale-While-Revalidate' strategiýasy; wersiýalary (mazmun-hash) dogruçyl maýyp ediň.

"LocalStorage" hususy re modeimlerde elýeterli bolup bilmez - duýduryş bilen ýady bozuň.

7. 6 Wagt/fon

Taýmerler fonda 1 s ýa-da ondanam köp gysylýar. Kyn logikany duruzyň, oýny duruzyň.

Aralyklaryň ýerine visibility/' visibilitychange 'we event-driven täzelenmelerini goşuň.

---

8) Krossbrauzeriň aşagyndaky gurnama paýlaýynlary

Transpilýasiýa: TypeScript/Babel 'es2020' nyşanlary (ýa-da köne WebViews üçin aşakda).

Polifiller: UA däl-de, diňe fich detection (feature detection) detektory boýunça.

Assets: sprite-listler, fallback formatly teksturlar (WebP/PNG), ses (AAC/OGG/Opus).

Kod bölünişi: redaktor/oýun däl paneller üçin lazy-chunks.

Gysyş: Brotli/Zstd; HTTP/2/3; CDN immutable wersiýasy.

Feature flags: WebGPU/OffscreenCanvas/Threads - Ak sanawa giriň.

---

9) Çek-listleriň şablonlary

9. 1 Smartfon (Android/Chrome, iPhone/Safari)

• Touch + multi-touch; yşaratlar sahypany "çekmeýär"
• Fullscreen we ugrukdyryş; safe-area dogry
• Tapdan soň ilkinji ses; mute işleýär
• FPS ≥ 50 (pes derejeli), "ýyrtylan" çarçuwasyz
• Täzeden başlandan soň ösüşi saklamak/dikeltmek
• SW awtonom sahna/täzeden başlamak
• Ulgam tolkunlaryny çagyrmak (gelýän jaň) → dogry arakesme

9. 2 Iş stoly (Windows/macOS)

• Syçan + tigir + klawiatura, IME
• Gamepad (XInput/Generic)
• 60/120Hz monitorlary: durnukly frame pacing
• Alt-Tab/Birnäçe monitor/fullscreen/windowed
• Ýat <çäk, syzmazdan (20 + minut)

---

10) Kod mysallary (bölekler)

Canvas с HiDPI:

js function resizeCanvas(canvas) {
const dpr = Math. min(window. devicePixelRatio          1, 2);
const { clientWidth:w, clientHeight:h } = canvas;
canvas. width = Math. floor(w dpr);
canvas. height = Math. floor(h dpr);
const ctx = canvas. getContext('2d');
ctx. setTransform(dpr, 0, 0, dpr, 0, 0);
}

WebGL: Kontekst ýitgisini bejermek:

js const gl = canvas. getContext('webgl', { preserveDrawingBuffer:false });
canvas. addEventListener('webglcontextlost', e => { e. preventDefault(); paused = true; });
canvas. addEventListener('webglcontextrestored', () => { reloadResources(); paused = false; });

"Blokdan çykarmak":

js let audioUnlocked = false;
window. addEventListener('pointerdown', () => {
if (!audioUnlocked) {
const ctx = new AudioContext();
const b = ctx. createBuffer(1, 1, 22050);
const s = ctx. createBufferSource();
s. buffer = b; s. connect(ctx. destination); s. start(0);
audioUnlocked = true;
}
}, { once:true, passive:true });

Page Visibility:

js document. addEventListener('visibilitychange', () => {
if (document. hidden) pauseGame();
else resumeGame();
});

---

11) Töwekgelçilikleri dolandyrmak we ileri tutmak

iOS üçin Murphy kanuny: iOS-yň her minor wersiýasyny öz matrisiňizden synagdan geçiriň - regressiýa ýygy-ýygydan bolýar.

WebView OEM: Köne WebView bilen Android enjamlary - töwekgelçilikleriň aýratyn gatlagy (enjamlaryň "greylistini" giriziň).

Funksional baýdaklar: markalar/pilot bazarlar boýunça problemaly nokatlary açyň.

Rollout: 1% → 10% → 50% → 100% RUM bellikleri bilen (FPS, crash, TTFF).

---

12) Syn ediliş we ýalňyşlyk-habarlar

Her hatanyň hasabatyna 'ua', 'browser version', 'os', 'device', 'gpu/renderer', 'memory', 'fps', 'logs (WebGL/WebAudio ýalňyşlyklary)', 'steps', 'repro video' goşuň.

crash dumps (JS/resurs ýalňyşlyklary), 'context lost', 'audio unlock failed' wakalaryny awtomatiki ibermek.

Daşbordlar: brauzerler/enjamlar boýunça FPS, ortaça TTFF, context lost paýy, IndexedDB ýalňyşlyklary, SW awtonom hitleri.

---

13) Matrisanyň jemleýji şablony (CSV-balyk)

Platform,Browser,Version,Feature,Scenario,Expected,Status,Notes
Android,Chrome,116+,WebGL2,Context lost/restore,State restored,OK, iOS,Safari,16. 6,Audio,First sound on tap,Plays,PARTIAL,Silent switch affects
Desktop,Firefox,115+,Fullscreen,Enter/Exit,No layout jump,OK, Android,WebView,116+,Storage,IndexedDB quota,Save 5MB,PARTIAL,Quota lower on device X iOS,Safari,16. 4+,PWA,Install & relaunch,State persisted,OK, ```

---

14) Önümçilik taýýarlygynyň çek-sanawy

[] Brauzer/wersiýa/enjam matrisi we SLA täzelenmeleri hasaba alyndy.
[] Awtotestleriň smoke-toplumy (Playwright) PR we nightly; Wideo/söwda hasabatlary.
[] RUM-telemetriýa FPS/TTFF/heap/WebGL-brauzer/enjamlar boýunça kesilen ýalňyşlyklar.
[] Sözbaşylar: WebGL1 ← WebGL2 ← WebGPU; Audio unlock; Pointer/Touch abstraksiýa.
[] Işlenildi lifecycle/visibility, pause/resume, offline, context lost.
[] Durnukly saklamak (IndexedDB + zaýalanma), assets wersiýasy SW/CDN arkaly immutable.
[] Hakyky enjamlarda (iOS/Android) we iş stollarynda profiller 60/120 Hz.
[] Belli çäklendirmeleriň resminamalary (iOS awtopleýleri, IDB kwotalary, orientation).
[] Problema üçin yzyna/feature-flags meýilnamalary (WebGPU/Threads).
[] Oýunda seslenme kanaly (feedback + log-damp).

---

Jemleme

HTML5-oýunlaryň krossbrauzer laýyklygy diňe bir "Safari-de işleýär" çek gutusy däl-de, düzgün-nyzam: platformalaryň berk matrisi, ölçegli metrikler (FPS/TTFF/heap), hakyky enjamlarda awtotestler, grafika/ses/giriş folbekleri we aýawly awtonom we tygşytlamak bilen işlemek. Durnukly synag paýyny giriziň, RUM ýygnaň we baýdaklaryň aňyrsynda çeňňekleri saklaň - şonuň üçin oýun Chrome, Safari we Firefox-da, telefonda we iş stolunda deň derejede rahat we öňünden aýdyp bolar.