HTML5 oyunlarının çapraz tarayıcı uyumluluğu: test matrisi

1) Neden HTML5 oyunları çapraz tarama "zarar"

Oyunlar platformun hemen hemen tüm katmanlarını etkiler: grafikler (Canvas/WebGL/WebGPU), zamanlayıcılar ve akışlar (RAF/İşçiler), ses (WebAudio/Medya politikaları), giriş (klavye/işaretçi/dokunma/gamepad), ağ ve önbellekler (SW/Önbellek/Indepad exedDB), entegrasyon (tam ekran/yönlendirme/PWA). Farklı motorlar - Chromium (Chrome/Edge/Opera/Android), WebKit (Safari/macOS, tüm tarayıcılarda iOS/iPadOS), Gecko (Firefox). Ayrıca güç tasarrufu, arka plan sekmelerinin daraltılması, bellek sınırları ve otomatik oynatma ilkelerindeki farklılıklar.

2) Desteklenen ortamlar: hedef matris

Tarayıcılar/OS (minimum sürümler bir örnektir, SLA'larınızı değiştirin):

Masaüstü: Chrome/Edge 116 +, Firefox 115 +, Safari 16 + (macOS 12 +).
Mobil: Chrome Android 116 + (Android 9 +), Samsung Internet 21 +, Safari iOS/iPadOS 16 +.
WebView: Android WebView 116 +, iOS - yalnızca WebKit (iOS'taki tüm tarayıcılar WebKit kullanır).
PWA (kurulum): Chromium masaüstü/mobil, Safari iOS 16. 4 + (Kısıtlamalarla Ana Ekrana ekleyin).

Donanım sınıfları:

Düşük (mobil bütçe, 2 GB RAM)
Orta (mobil/ultrabook, 4-8 GB RAM)
Yüksek (masaüstü/tüketici GPU, 8-16 + GB)

3) Büyük test matrisi (şablon)

İzleyicinizde gerçek bir tablo oluşturun. Aşağıda, ölçülmesi gereken temel bloklar ve durumlar (Tamam/Kısmi/N/A) bulunmaktadır.

3. 1 Grafik

Alt sistem	Chrome	Safari (iOS/macOS)	Firefox	Ad notata
Tuval 2D (HiDPI, alfa)				DPI ölçekleme, blit dışlamalar
WebGL 1. 0				Bağlam kaybı, maksimum doku boyutu
WebGL 2. 0				IOS/eski Safari'de genellikle Kısmi
WebGPU (kullanıyorsanız)				Feature-flag/polypill yolu
OffscreenCanvas				IOS: kısmen/değil WebView
WebAssembly SIMD/Threads				IOS limiti. akışları; COOP/COEP

3. 2 Ses ve Medya Politikaları

Alt sistem	Chrome	Safari	Firefox	Ad notata
WebAudio API				Otomatik oynatma kısıtlamaları
Jest olmadan otomatik oynatma				IOS: yasaklandı, kullanıcı hareketi gerekli
Gecikme (AudioContext)				Cep telefonlarında düşük gecikme süresi değişir

3. 3 Giriş ve arayüz

Alt sistem	Chrome	Safari	Firefox	Ad notata
İşaretçi Olayları				iOS Safari: yakalama özellikleri
Dokunma/hareket				Pasif dinleyiciler, preventDefault
Klavye (IME, özel tuşlar)				KeyCode/Kod farklılıkları
Gamepad API'si				IOS WebKit son derece sınırlıdır
Tam ekran API				IOS: hareketler/çizgiler, Güvenli Alan
Yönlendirme Kilidi				IOS kullanıcı hareketi gerektirir

3. 4 Performans ve enerji tasarrufu

Alt sistem	Chrome	Safari	Firefox	Ad notata
RequestAnimationFrame (60/120 Гц)				120Hz monitörler, iOS 120 Hz ProMotion
Arka planı kısma				Arka plan sekmesindeki klemp zamanlayıcıları
Bellek kapağı/OOM				IOS, 500-800 MB'de sekmeyi aşırı yükler

3. 5 Kaydeder/çevrimdışı/ağ

Alt sistem	Chrome	Safari	Firefox	Ad notata
IndexedDB (kotalar)				IOS: kotalar küçük/sistem tarafından temizleniyor
Yerel/Oturum Depolama				Özel modlar temizlenir/engellenir
Servis çalışanı/önbellek				IOS - uyandırma oranı sınırları
Fetch/CORS/HTTP/2/3				Ön kontrol/canlı tutma farklılıkları

4) Minimum manuel komut dosyası seti (Duman)

1. İlk başlangıç: orta sınıfta varlıkların yüklenmesi, sıçrama, seviye başlangıcı <3 s.

2. Giriş: touch/mouse/keyboard/gamepad, çoklu parmak, hold, swipes.

3. Ekran: tam ekran, yönlendirme kilidi, güvenli alan (patlama ile iPhone).

4. Ses: özel hareketten sonra ilk not, sessize alma/sessize alma, müzik karışımı/FX.

5. WebGL: Kayıp/kurtarma bağlam (simüle), gölgeler/gölgelendiriciler/ölçek.

6. Yaşam döngüsü: daraltma/genişletme, çağrı/bildirim, arka planda sekme.

7. Kaydeder: progress/settings in IndexedDB/LocalStorage, recovery after restart/offline.

8. Ağ: 3G gaz kelebeği/yüksek RTT, ağ kaybı, yeniden ödeme, SW üzerinden önbelleğe alma.

9. PWA: kurulum (Chromium/iOS), simgeler, çevrimdışı sayfa, sürüm güncellemesi.

10. Uzun seans: Sızıntı olmadan 20-30 dakika (FPS/yığın stabil).

5) Otomasyon: nasıl ve nasıl

Oyun yazarı (önerilen): çapraz motor, mobil emülasyonlar, WebKit sürücüsü, video/parça.

Cypress: hızlı dev döngüsü, ancak WebKit/mobil sınırlıdır.

WebDriver/Selenium: bulut entegrasyonu.

Bulutlar: BrowserStack, Sauce Labs - gerçek cihazlar ve iOS Safari.

Profil oluşturma: Chrome DevTools Protokolü, Safari Web Inspector (Remote), Firefox Profiler.

Perf komut dosyaları: RUM benzeri varlık yükleme komut dosyaları için k6/tarayıcı.

İpucu: her PR için 3-5 dakika boyunca bir "paket" autotest tutun: yükleme, bir oyun döngüsü, duraklatma, yönlendirme değiştirme, kaydetmeyi kontrol etme.

6) Performans: hedef metrikler ve telemetri

FPS: Kararlı 60 fps (veya ProMotion'da 120) - sadece ortalama değil, kare hızını yakalayın.

Çerçeve bütçesi: 16. 7 ms (veya 8. 3 ms) üzerinde güncelleme + render, GC

Giriş gecikmesi: <80 ms mobil, 50 ms masaüstü

Time-to-First-Frame (TTFF): <1. 5 s (varlıkları yükledikten sonra).

Yığın büyümesi: 20 dakikalık oturum başına + %10'dan fazla değil; Kaçak tahsisat eksikliği.

Ses gecikmesi: <100ms gidiş dönüş.

RUM göm: FPS gönder, TTFF, yığın, WebGL bağlam kayıp telemetri, 'tarayıcı/os/aygıt'tarafından oluşturma hataları.

7) Sık uyumsuzluklar ve nasıl tedavi edileceği

7. 1 Grafik/oluşturma

HiDPI Canvas-Set logical size = CSS px, physical = 'css devicePixelRatio'.

WebGL bağlamı kayboldu: 'webglcontextlost/webglcontextrestored'i dinleyin, yeniden başlatma için kaynakları depolayın.

Dokular/gölgelendiriciler: evrensel olmayan uzantılardan kaçının; OES _ texture _ float, EXT _ color _ buffer _ float ve fallback seçeneklerini işaretleyin.

WebGPU: rulo özelliği-bayrak; WebGL2 yolu bir geri dönüş olarak tutun.

7. 2 Ses/otomatik oynatma

AudioContext'i özel bir hareketle başlatın ('dokunun/tıklayın') ve 'izin verilen' bayrağını saklayın.

IOS'ta, en aza indirirken/değiştirirken askıya almaya hazırlanın.

7. 3 Giriş/jestler

Olayların dinleyicileri varsayılan olarak pasif hale getirir; Burada 'preventDefault ()' açıkça pasifi devre dışı bırakmaktır.

İşaretçi Olayları + Dokunma Olayları - çift işlemeden kaçının; Giriş katmanını soyutlayın.

Gamepad: Navigasyon cihazını kontrol et. GetGamepads () 'RAF aracılığıyla, düğmelerin düzenini dikkate alın.

7. 4 Tam Ekran/Yönlendirme/Güvenli Alan

IOS için, 'env (safe-area-inset-)' düşünün, tuval/Overlay UI'sine dolgu ekleyin.

Yönlendirme kilidi yalnızca kullanıcı hareketinden sonra; "Ekranı döndür" düğmesi var.

7. 5 Storigi/Çevrimdışı

IndexedDB: zaman aşımı/geri alma işlemlerinde sarma işlemleri; İOS'ta kotalar küçüktür - hafif tasarruf sağlayın.

Hizmet Çalışanı: Varlıklar için 'Bayat-While-Revalidate' stratejisi; Dürüst olmak gerekirse sürümleri devre dışı bıraktı (content-hash).

LocalStorage özel modlarda kullanılamayabilir - uyarı belleğine düşer.

7. 6 Zamanlayıcılar/arka plan

Arka planda, zamanlayıcılar 1 s veya daha fazla kümelenir. Ağır mantığı durdurun, oyunu durdurun.

Aralıklar yerine sayfa görünürlüğünü/' visibilitychange've olay odaklı güncellemeleri etkinleştirin.

8) Crossbrowser için boru hattı montajı

Transpilasyon: TypeScript/Babel hedefleri 'es2020' (veya daha eski WebViews için daha düşük).

Polifiller: sadece özellik algılama, UA değil.

Varlıklar: sprite sayfaları, geri dönüş formatlı dokular (WebP/PNG), ses (AAC/OGG/Opus).

Kod ayrımı: Editör/oyun dışı paneller için tembel parçalar.

Sıkıştırma: Brotli/Zstd; HTTP/2/3; Değişmez-sürüm ile CDN.

Özellik bayrakları: WebGPU/OffscreenCanvas/Threads - beyaz liste ile etkinleştir.

9) Kontrol listesi şablonları

9. 1 Akıllı telefon (Android/Chrome, iPhone/Safari)

Touch + multi-touch; jestler sayfayı "çekmez"
Tam ekran ve yönlendirme; Güvenli alan doğru
Musluktan sonraki ilk ses; sessize alma çalışmaları
FPS ≥ 50 (düşük sınıf), düzensiz çerçeve yok
Yeniden başlattıktan sonra ilerlemeyi kaydet/geri yükle
Çevrimdışı sahne/SW yeniden başlatma
Sistem yer paylaşımı çağrısı (gelen çağrı) - doğru duraklama

9. 2 Masaüstü (Windows/macOS)

Fare + tekerlek + klavye, IME
Gamepad (XInput/Genel)
60/120Hz monitörler: kararlı çerçeve pacing
Alt-Tab/birden fazla monitör/tam ekran/pencereli
Bellek

10) Kod örnekleri (fragmanlar)

Tuval с HiDPI:

js işlevi resizeCanvas (canvas) {
Const dpr = Math. min (pencere. DevicePixelRatio         1, 2);
const {clientWidth: w, clientHeight: h} = canvas;
tuval. Genişlik = Math. zemin (w dpr);
tuval. Yükseklik = Math. kat (h dpr);
Const ctx = tuval. GetContext ('2d');
ctx. setTransform (dpr, 0, 0, dpr, 0, 0);
}

WebGL: bağlam kaybı işleme:

Js const gl = tuval. GetContext ('webgl', {preserveDrawingBuffer: false});
tuval. AddEventListener ('webglcontextlost', e => {. preventDefault (); Duraklatılmış = true;});
tuval. AddEventListener ('webglcontextrestored', () => {reloadResources (); duraklatılmış = false;});

Ses "kilit açma":

js let audioUnlocked = false;
Pencere. AddEventListener ('pointerdown', () => {
if (! audioUnlocked) {
const ctx = yeni AudioContext ();
const b = ctx. createBuffer (1, 1, 22050);
Const s = ctx. createBufferSource ();
s. arabellek = b; s. bağlan (ctx. varış noktası); s. başlangıç (0);
AudioUnlocked = true;
}
}, {once: true, passive: true});

Sayfa Görünürlüğü:

Js belge. AddEventListener ('visibilitychange', () => {
eğer (belge. gizli) pauseGame ();
else resumeGame ();
});

11) Risk yönetimi ve önceliklendirme

IOS için Murphy Yasası: IOS'un her küçük sürümünü matrisinizden test edin - regresyonlar sık görülür.

WebView OEM: Eski WebView'a sahip Android cihazlar ayrı bir risk katmanıdır ("greylist" cihazlara girin).

Fonksiyonel bayraklar: Marka/pazar pilotları tarafından sorunlu özellikleri içerir.

Rollout: RUM kapıları (FPS, crash, TTFF) ile %1 - %10 - %50 - %100.

12) Gözlemlenebilirlik ve hata raporları

Her hata raporuna şunları ekleyin:'ua ',' tarayıcı sürümü ',' os ',' aygıt ',' gpu/renderer ',' bellek ',' fps ',' günlükler (WebGL/WebAudio hataları) ',' adımlar ',' repro video '.

Çökme dökümlerinin otomatik olarak gönderilmesi (JS hataları/kaynakları), 'bağlam kaybı', 'ses kilidi başarısız' olayları.

Panolar: Tarayıcıya/cihaza göre FPS, ortalama TTFF, bağlam kayıp payı, IndexedDB hataları, SW çevrimdışı isabetleri.

13) Son şablon matrisi (CSV balık)


Platform, Tarayıcı, Sürüm, Özellik, Senaryo, Beklenen, Durum, Notlar
Android, Chrome, 116 +, WebGL2, Bağlam kayıp/geri yükleme, Durum geri yüklendi, Tamam, iOS,Safari,16. Dokunarak ses 6,Audio,First, Oynatma, PARSIYEL, Sessiz anahtar etkiler
Desktop, Firefox, 115 +, Fullscreen, Enter/Exit, No layout jump, OK, Android, WebView, 116 +, Storage, IndexedDB kota, X 5MB,PARTIAL,Quota cihazında Kaydet iOS,Safari,16 daha düşük. 4 +, PWA, Yükleme ve yeniden başlatma, Durum devam etti, Tamam, "'

---

14) Üretime hazırlık kontrol listesi

[] Sabit tarayıcı/sürüm/cihaz matrisi ve SLA güncellemesi.
[] Ototest Duman-set (Oyun Yazarı) PR ve gece başlatıldı; Video/parça içeren raporlar.
[] Tarayıcı/aygıt bölümü ile RUM telemetri FPS/TTFF/heap/WebGL hataları.
[] Folbeki: WebGPU WebGL1 ← WebGL2 ←; Ses kilidini açma; İşaretçi/Dokunma soyutlaması.
[] İşlenmiş yaşam döngüsü/görünürlük, duraklat/devam et, çevrimdışı, bağlam kayboldu.
[] Kalıcılık kararlıdır (IndexedDB + degradation), varlık sürümü SW/CDN ile değiştirilemez.
[] Gerçek cihazlarda (iOS/Android) ve 60/120 Hz masaüstü bilgisayarlarda profiller.
[] Bilinen kısıtlamaların belgelenmesi (iOS autoplays, IDB kotaları, oryantasyon).
[] Sorunlu özellikler için geri alma planları/özellik bayrakları (WebGPU/Threads).
[] Oyundaki geri bildirim kanalı (geri bildirim + günlük dökümü).

---

Özgeçmiş Özeti

HTML5 oyunlarının çapraz tarayıcı uyumluluğu, "Safari'de çalışan'bir onay kutusu değil, bir disiplindir: katı bir platform matrisi, ölçülebilir metrikler (FPS/TTFF/heap), gerçek cihazlarda otomatik testler, grafik/ses/giriş folkbacks ve çevrimdışı ve tasarruflarla dikkatli çalışma. İstikrarlı bir test hattına girin, RUM toplayın ve bayrakların arkasındaki özellikleri koruyun - bu şekilde oyun Chrome, Safari ve Firefox'ta, telefonunuzda ve masaüstünüzde eşit derecede pürüzsüz ve öngörülebilir olacaktır.