Kriptovalyutalar
Torrent Gear
HTML5 oyunlarının krossbrouzer uyğunluğu: test matrisi
1) Niyə HTML5 oyunları «ağrılı» krossbrouzer
Oyunlar platformanın demək olar ki, bütün qatlarına təsir edir: qrafika (Canvas/WebGL/WebGPU), zamanlayıcılar və axınlar (RAF/Workers), səs (WebAudio/Media policies), giriş (keyboard/pointer/touch/gamepad), şəbəkə və keşlər (SW/Cache/IndexedDB), inteqrasiya (fullscreen/orientation/PWA). Mühərriklərin uyğunsuzluğu - Chromium (Chrome/Edge/Opera/Android), WebKit (Safari/macOS, iOS/iPadOS bütün brauzerlərdə), Gecko (Firefox). Plus enerji qənaət fərqləri, fon sekmələri throttling, yaddaş limitləri və avtoplay siyasəti.
2) Dəstəklənən mühit: hədəf matris
Brauzerlər/OS (minimal versiyalar - nümunə, SLA əvəz):- 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 - yalnız WebKit (iOS-da bütün brauzerlər WebKit istifadə edir).
- PWA (quraşdırma): Chromium desktop/mobile, Safari iOS 16. 4 + (Add to Home Screen ilə məhdudiyyətlər).
- Aşağı (mobil büdcə, 2 GB RAM)
- Orta (mobil/ultrabucks, 4-8 GB RAM)
- Yüksək (masaüstü/konsumer GPU, 8-16 + GB)
3) Böyük test matrisi (şablon)
Trackerinizdə real cədvəl formalaşdırın. Aşağıda ölçülməli olan əsas bloklar və statuslar (OK/Partial/N/A) göstərilir.
3. 1 Qrafika
3. 2 Audio və Media Siyasəti
3. 3 Giriş və interfeys
3. 4 Performans və enerji qənaət
3. 5 Saxlama/oflayn/şəbəkə
4) Əl ssenarilərinin minimal dəsti (Smoke)
1. İlk başlanğıc: assetlərin yüklənməsi, splash, orta sinifdə <3 səviyyəsinin başlanğıcı.
2. Giriş: taç/siçan/klava/geympad, çoxsaylı barmaqlar, saxlama, qıvrımlar.
3. Ekran: tam ekran, oriyentasiya kilidi, safe-area (iPhone).
4. Audio: xüsusi jest sonra ilk nota, mute/unmute, musiqi qarışığı/FX.
5. WebGL: kontekstin itirilməsi/bərpası (simulyasiya), kölgələr/shaders/miqyaslı.
6. Həyat dövrü: daralmaq/genişləndirmək, zəng/bildiriş, fonda sekmə.
7. Saxlama: IndexedDB/LocalStorage-də tərəqqi/parametrlər, yenidən başladıqdan sonra bərpa/oflayn.
8. Şəbəkə: 3G throttle/yüksək RTT, şəbəkə itkisi, retrajlar, SW vasitəsilə caching.
9. PWA: quraşdırma (Chromium/iOS), nişanlar, offline səhifə, yeniləmə versiyası.
10. Uzun sessiya: Sızma olmadan 20-30 dəqiqə (FPS/heap stabil).
5) Avtomatlaşdırma: necə və necə
Playwright (tövsiyə olunur): cross motor, mobil emulyasiya, WebKit sürücü, video/treys.
Cypress: sürətli dev-dövrü, lakin WebKit/Mobile - məhdud.
WebDriver/Selenium: buludlarla inteqrasiya.
Buludlar: BrowserStack, Sauce Labs - real cihazlar və iOS Safari.
Profil: Chrome DevTools Protocol, Safari Web Inspector (Remote), Firefox Profiler.
Perf skriptləri: k6/browser RUM bənzər asset yükləmə ssenariləri üçün.
Məsləhət: Hər bir PR üçün 3-5 dəqiqə (smoke) avtomatik testlərin «paketini» saxlayın: yükləmə, bir oyun dövrü, fasilə, oriyentasiya keçid, saxlama yoxlaması.
6) Performans: hədəf metrik və telemetriya
FPS: sabit 60 fps (və ya ProMotion-da 120) - frame pacing, yalnız orta deyil.
Frame budget: 16. 7 ms (və ya 8. 3 ms) update + render, GC <2-3 ms çərçivədə.
Input latency: <80 ms mobil, 50 ms masaüstü.
Time-to-First-Frame (TTFF): < 1. 5 s (assets yüklədikdən sonra).
Heap artım: ən çox + 10% 20 dəqiqə sessiya; runaway allocations yoxdur.
Audio latency: <100 ms roundtrip.
RUM qurun: FPS, TTFF, heap, WebGL context lost telemetriyasını, 'browser/os/device' vasitəsilə render səhvlərini göndərin.
7) Tez-tez uyğunsuzluq və necə müalicə
7. 1 Qrafik/render
HiDPI Canvas: məntiqi ölçü = CSS px, fiziki = 'css devicePixelRatio'.
WebGL kontekst lost: 'webglcontextlost/webglcontextrestored' dinləyin, yenidən yükləmək üçün resursları saxlayın.
Tekstura/shaders: qeyri-universal uzantılardan çəkinin; 'OES _ texture _ float', 'EXT _ color _ buffer _ float' və fallback.
WebGPU: feature-flag; fallback kimi WebGL2 yol saxlayın.
7. 2 Audio/Avtoplay
AudioContext-i istifadəçi jestində ('tap/click') çalışdırın və «icazə verilir» bayrağını saxlayın.
İOS-da bükülmə/keçid zamanı suspend-ə hazırlaşın.
7. 3 Giriş/jestlər
Hadisə dinləyiciləri default passive edin; harada lazımdır 'preventDefault ()' - açıq passive.
Pointer Events + Touch Events - ikiqat emaldan çəkinin; giriş qatını abstrakt edin.
Gamepad: 'navigator. getGamepads () 'RAF vasitəsilə düymələrin düzülüşünü nəzərə alın.
7. 4 Fullscreen/Orientation/Safe-Area
iOS üçün 'env (safe-area-inset-)' nəzərə alın, canvas/Overlay UI-yə padding əlavə edin.
Orientation lock yalnız user gesture sonra; «ekranı çevirmək» düyməsinə sahib olun.
7. 5 Hekayələr/oflayn
IndexedDB: əməliyyatları zaman-aut/retraya çevirin; iOS kvotaları kiçikdir - yüngül qənaət edin.
Service Worker: assets üçün 'Stale-While-Revalidate' strategiyası; vicdanla əlil versiyası (məzmun hash).
LocalStorage xüsusi rejimlərdə mövcud ola bilməz - xəbərdarlıq ilə yaddaşa deqradasiya.
7. 6 Zamanlayıcılar/fon
Zamanlayıcılar arxa planda 1 s və daha çox. Çətin məntiqi dayandırın, oyunu dayandırın.
page visibility/' visibilitychange 'və intervallar əvəzinə event-driven yeniləmələri daxil edin.
8) Crossbrauser altında Paypline montaj
Transpilation: TypeScript/Babel hədəfləri 'es2020' (və ya köhnə WebViews üçün aşağıda).
Polifillər: yalnız fich detection (feature detection), UA deyil.
Assetlər: sprayt vərəqləri, fallback formatlı teksturalar (WebP/PNG), audio (AAC/OGG/Opus).
Kod ayrılması: redaktor/qeyri-oyun panelləri üçün lazy-chunks.
Sıxılma: Brotli/Zstd; HTTP/2/3; CDN immutable versiyası ilə.
Feature flags: WebGPU/OffscreenCanvas/Threads - ağ siyahıya daxil edin.
9) Çek vərəqlərinin şablonları
9. 1 Smartfon (Android/Chrome, iPhone/Safari)
- Touch + multi-touch; jestlər səhifəni «çəkmir»
- Fullscreen və oriyentasiya; safe-area sadiq
- tapa sonra ilk səs; mute işləyir
- FPS ≥ 50 (aşağı sinif), «cırılmış» çərçivə olmadan
- Yenidən başladıqdan sonra tərəqqinin qorunması/bərpası
- Offline Screen/SW yenidən başlamaq
- Sistem overlay zəng (daxil zəng) → düzgün fasilə
9. 2 Masaüstü (Windows/macOS)
- Siçan + təkər + klaviatura, IME
- Gamepad (XInput/Generic)
- 60/120Hz monitorlar: sabit frame pacing
- Alt-Tab/bir neçə monitor/fullscreen/windowed
- Yaddaş
10) Kod nümunələri (fraqmentlər)
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);
}js const gl = canvas. getContext('webgl', { preserveDrawingBuffer:false });
canvas. addEventListener('webglcontextlost', e => { e. preventDefault(); paused = true; });
canvas. addEventListener('webglcontextrestored', () => { reloadResources(); paused = false; });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 });js document. addEventListener('visibilitychange', () => {
if (document. hidden) pauseGame();
else resumeGame();
});11) Risklərin idarə edilməsi və prioritetləşdirilməsi
iOS üçün Murphy qanunu: matrisinizdən iOS-un hər minor versiyasını sınaqdan keçirin - tez-tez reqressiya.
WebView OEM: Köhnəlmiş WebView ilə Android cihazları - ayrı bir risk təbəqəsi (cihazların «greylist» yazın).
Funksional bayraqlar: marka/pilot bazarlarında problemli fişləri daxil edin.
Rollout: 1% → 10% → 50% → 100% RUM geytləri ilə (FPS, crash, TTFF).
12) Müşahidə və səhv-reportaj
Hər bir səhv hesabatına daxil edin: 'ua', 'browser version', 'os', 'device', 'gpu/renderer', 'memory', 'fps', 'logs (WebGL/WebAudio səhvləri)', 'steps', 'repro video'.
Avtomatik göndərmə crash dumps (JS/resurs səhvləri), hadisələr 'context lost', 'audio unlock failed'.
Dashboard: browser/cihazlar üzrə FPS, orta TTFF, context lost payı, IndexedDB səhvləri, SW offline hitləri.
13) Matrisin yekun şablonu (CSV-balıq)
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) Production-hazırlıq yoxlama siyahısı
[] Brauzer/versiyalar/cihazlar matrisi və SLA yeniləmələri qeydə alınmışdır.
[] Avtomatik testlərin Smoke dəsti (Playwright) PR və nightly-də başlayır; video/treys hesabatları.
[] RUM telemetriya FPS/TTFF/heap/WebGL-brauzer/cihazlar kəsilməsi ilə səhvlər.
[] Fallback: WebGL1 ← WebGL2 ← WebGPU; Audio unlock; Pointer/Touch abstraksiya.
[] emal lifecycle/visibility, pause/resume, offline, context lost.
[] Davamlı saxlama (IndexedDB + deqradasiya), SW/CDN vasitəsilə immutable assets versiyası.
[] Real cihazlarda profillər (iOS/Android) və masaüstü 60/120 Hz.
[] Məlum məhdudiyyətlərin sənədləşdirilməsi (iOS avtomobil, IDB kvotaları, orientation).
[] Problemli xüsusiyyətlər üçün geri dönüş/feature-flags planları (WebGPU/Threads).
[] Oyunda rəy kanalı (feedback + log-damp).
---
Xülasə
HTML5 oyunlarının krossbrauzer uyğunluğu bir «Safari» çek qutusu deyil, nizam-intizamdır: sərt platforma matrisi, ölçülə bilən metriklər (FPS/TTFF/heap), real cihazlarda avtotestlər, qrafika/audio/giriş folbekləri və ehtiyatlı oflayn və qənaət ilə işləmək. Sabit test paypline daxil edin, RUM-u toplayın və bayraqların arxasında fişləri saxlayın - belə ki, oyun Chrome, Safari və Firefox, telefon və masaüstü üçün eyni dərəcədə hamar və proqnozlaşdırıla bilər.