Crypto Casino
Bieg torrent
Kompatybilność przeglądarki krzyżowej gier HTML5: matryca testowa
1) Dlaczego gry HTML5 „boli” przeglądanie krzyżowe
Gry dotyczą prawie wszystkich warstw platformy: grafiki (Canvas/WebGL/WebGPU), timerów i strumieni (RAF/Workers), dźwięku (polityka WebAudio/Media), wejścia (klawiatura/wskaźnik/dotyk/gamepad), sieci i buforów (SS W/Cache/Indepad exedDB), integracja (pełny ekran/orientacja/PWA). Różne silniki - chrom (Chrome/Edge/Opera/Android), WebKit (Safari/macOS, iOS/iPadOS we wszystkich przeglądarkach), Gecko (Firefox). Plus różnice w oszczędzaniu mocy, rozdrabniania kart tła, limitów pamięci i zasad autoplay.
2) Wspierane środowiska: matryca docelowa
Przeglądarki/OS (minimalne wersje są przykładem, zastąpić swoje SLA):- Pulpit: Chrome/Edge 116 +, Firefox 115 +, Safari 16 + (macOS 12 +).
- Telefon komórkowy: Chrome Android 116 + (Android 9 +), Samsung Internet 21 +, Safari iOS/iPadOS 16 +.
- WebView: Android WebView 116 +, iOS - tylko WebKit (wszystkie przeglądarki na iOS używają WebKit).
- PWA (instalacja): Chrom desktop/mobile, Safari iOS 16. 4 + (Dodaj do ekranu głównego z ograniczeniami).
- Niski (budżet mobilny, 2 GB RAM)
- Medium (mobilne/ultrabooki, 4-8 GB pamięci RAM)
- Wysoka (pulpit/konsument GPU, 8-16 + GB)
3) Duża matryca testowa (szablon)
Utwórz prawdziwy stół w nadajniku. Poniżej znajdują się kluczowe bloki i statusy (OK/Partial/N/A), które należy zmierzyć.
3. 1 Grafika
3. 2 Polityka audio i mediów
3. 3 Wejście i interfejs
3. 4 Wydajność i oszczędność energii
3. 5 Zapisy/offline/sieć
4) Minimalny zestaw skryptów ręcznych (dym)
1. Pierwszy start: loading assets, splash, start poziomu <3 s na klasie średniej.
2. Wejście: dotyk/mysz/klawiatura/gamepad, wiele palców, uchwyt, skręty.
3. Ekran: pełny ekran, blokada orientacyjna, sejf (iPhone z bangs).
4. Audio: pierwsza notatka po niestandardowym gestze, mute/unmute, muzyka mix/FX.
5. WebGL: utrata/odzyskanie kontekstu (symulacja), cienie/cienie/skala.
6. Cykl życia: zawalenie/rozszerzenie, wywołanie/powiadomienie, zakładka w tle.
7. Zapisuje: postęp/ustawienia w IndexedDB/Storage, odzyskiwanie po ponownym uruchomieniu/offline.
8. Sieć: przepustnica 3G/wysoka RTT, utrata sieci, przekaźnik, buforowanie przez SW.
9. PWA: instalacja (Chrom/iOS), ikony, strona offline, aktualizacja wersji.
10. Długa sesja: 20-30 minut bez wycieków (stabilny FPS/hałd).
5) Automatyzacja: jak i jak
Playwright (zalecane): cross-engine, mobile emulations, WebKit driver, video/tracks.
Cypress: szybka pętla dev, ale WebKit/mobile jest ograniczony.
WebDriver/Selenium: integracja w chmurze.
Chmury: BrowserStack, Souce Labs - prawdziwe urządzenia i iOS Safari.
Profilowanie: Chrome DevTools Protocol, Safari Web Inspector (Remote), Firefox Profiler.
Skrypty Perf: k6/przeglądarka dla skryptów ładowania aktywów podobnych do RUM.
Wskazówka: zachować „pakiet” autotest przez 3-5 minut (dym) dla każdego PR: załadunek, jeden cykl gry, pauza, przełączanie orientacji, zaoszczędzenie.
6) Wydajność: mierniki docelowe i telemetria
FPS: stabilny 60 fps (lub 120 na ProMotion) - przechwytywanie ramki, nie tylko średnia.
Budżet ramowy: 16. 7 ms (lub 8. 3 ms) na aktualizacji + render, GC <2-3 ms na ramkę.
Opóźnienie wejścia: <80 ms mobile, 50 ms desktop
Czas do pierwszej ramy (TTFF): <1. 5 s (po załadunku aktywów).
Wzrost hałdy: nie więcej niż + 10% na 20 minut sesji; Brak przydziałów na ucieczkę.
Opóźnienie audio: <100ms rundtrip.
Embed RUM: wyślij FPS, TTFF, hałas, kontekst WebGL utracona telemetria, renderowanie błędów przez 'przeglądarka/os/urządzenie'.
7) Częste niezgodności i sposób leczenia
7. 1 Grafika/render
HiDPI Canvas-Set rozmiar logiczny = CSS px, fizyczny = 'css PixelRatio'.
Stracił kontekst WebGL: słuchaj „webglcontextlost/webglcontextrestored”, przechowuj zasoby do ponownego uruchomienia.
Tekstury/odcieni: unikać nieuniwersalnych rozszerzeń; Sprawdź OES _ texture _ float, EXT _ color _ buffer _ float i fallback.
WebGPU: roll feature-flag; utrzymać WebGL2 ścieżkę jako upadek.
7. 2 Audio/autoplay
Uruchom AudioContext za pomocą niestandardowego gestu ('dotknij/kliknij') i zachowaj „dozwoloną” flagę.
Na iOS, przygotować się do zawieszenia podczas minimalizacji/przełączania.
7. 3 Dane wejściowe/gesty
Słuchacze zdarzeń robią się bierne domyślnie; gdzie 'preventDefault ()' ma wyraźnie wyłączyć pasywne.
Wydarzenia wskaźnikowe + imprezy dotykowe - unikaj podwójnego przetwarzania; abstrakcję warstwy wejściowej.
Gamepad: sprawdź 'nawigator. blackGamepads () 'poprzez RAF, należy wziąć pod uwagę układ przycisków.
7. 4 Pełny ekran/orientacja/bezpieczna strefa
W odniesieniu do systemu iOS należy wziąć pod uwagę '(safe-area-inset-)', dodać wyściółkę do płótna/nakładki interfejsu użytkownika.
Blokada orientacji tylko po gestze użytkownika; mają przycisk „obracać ekran”.
7. 5 Storigi/Offline
IndexedDB: operacje owijania w timeouts/retrays; na iOS, kwoty są małe - zachować lekkie oszczędności.
Pracownik serwisowy: strategia „Stale-While-Revalidate” dotycząca aktywów; szczerze wyłączone wersje (content-hash).
• Pamięć masowa może być niedostępna w trybach prywatnych - degradacja do pamięci ostrzegawczej.
7. 6 Timery/tło
W tle zegary zaciskają się do 1 s lub więcej. Zatrzymaj ciężką logikę, zatrzymaj grę.
Włącz widoczność strony/' visibilitychange'i aktualizacje wywołane zdarzeniami zamiast odstępów czasu.
8) Montaż rurociągu do przeglądarki krzyżowej
Transpilacja: Wartość docelowa „es2020 ”/Babel (lub niższa dla starszych WebViews).
Polifile: funkcja wykrywania tylko, a nie UA.
Aktywa: arkusze sprite, tekstury z formatami fallback (WebP/PNG), audio (AAC/OGG/Opus).
Oddzielenie kodu: leniwe kawałki dla paneli edytorskich/non-game.
Kompresja: Brotli/Zstd; HTTP/2/3; CDN z niezmienną wersją.
Flagi funkcji: WebGPU/OffscreenCanvas/Threads - enable by whitelist.
9) Szablony listy kontrolnej
9. 1 smartfon (Android/Chrome, iPhone/Safari)
- Touch + multi-touch; gesty nie „pociągają” strony
- Pełny ekran i orientacja; bezpieczna strefa poprawna
- Pierwszy dźwięk po kranie; roboty niemych
- FPS ≥ 50 (niska klasa), bez ramki
- Zapisz/Przywróć postęp po ponownym uruchomieniu
- Offline scene/SW restart
- Połączenie nakładkowe systemu (połączenie przychodzące) → poprawna pauza
9. 2 Pulpit (Windows/macOS)
- Mysz + koło + klawiatura, IME
- Gamepad (XInput/Generic)
- Monitory 60/120Hz: stabilne pakowanie ramek
- Alt-Tab/multiple monitors/fullscrereen/windowed
- Pamięć
10) Przykłady kodów (fragmenty)
Płótno i HiDPI:js funkcja resizeCanvas (płótno) {
const dpr = Math. min (okno. PixelRatio 1, 2);
const {clientWidth: w, clientWysokość: h} = płótno;
płótno. szerokość = Matowa podłoga (w dpr);
płótno. wysokość = Matowa podłoga (h dpr);
const ctx = płótno. viaContext ("2d');
ctx. setTransform (dpr, 0, 0, dpr, 0, 0);
}js const gl = płótno. viaContext ('webgl', {prestp Buffer: false});
płótno. addΑ Listener ('webglcontextlost', e => {e. Default (); pauza = true;});
płótno. addz Listener („webglcontextrestored”, () => {reloadResources (); pauza = fałszywa;});js let audioUnlocked = false;
okno. addΑ Listener ('pointerdown', () => {
jeśli (! audioOdblokowany) {
const ctx = nowy AudioContext ();
const b = ctx. • Bufor (1, 1, 22050);
const s = ctx. • BufferSource ();
s. bufor = b; s. connect (ctx. miejsce przeznaczenia); s. start (0);
audioUnlocked = true;
}
}, {raz: true, passive: true});dokument js. addz Listener („visibilitychange”, () => {
jeśli (dokument. ukryty) paiaGra ();
else wznowić grę ();
});11) Zarządzanie ryzykiem i ustalanie priorytetów
Murphy's Law for iOS: Testuj każdą drobną wersję iOS z macierzy - regresje są częste.
WebView OEM: Urządzenia z systemem Android z przestarzałym WebView są oddzielną warstwą ryzyka (wprowadź urządzenia „greylist”).
Flagi funkcjonalne: zawierają funkcje problemowe marki/pilotów rynkowych.
Rollout: 1% → 10% → 50% → 100% z bramkami RUM (FPS, crash, TTFF).
12) Obserwowalność i raporty o błędach
W każdym zgłoszeniu błędów należy umieścić: 'ua', 'wersja przeglądarki', 'os',' urządzenie ',' gpu/renderer ',' memory ',' fps ',' logs (błędy WebGL/WebAudio) ',' steps ',' repro video '.
Automatyczne wysyłanie porzucania awarii (błędy/zasoby JS), „utrata kontekstu”, „odblokowanie audio nie powiodło się” zdarzeń.
Deski rozdzielcze: FPS przez przeglądarkę/urządzenie, średni TTFF, kontekst utracony udział, błędy IndexedDB, hity offline SW.
13) Końcowa matryca szablonu (ryba CSV)
Platforma, Przeglądarka, Wersja, Funkcja, Scenariusz, Oczekiwane, Status, Uwagi
Android, Chrome, 116 +, WebGL2, Context lost/restore, State restored, OK, iOS,Safari,16. 6,Audio,First dźwięk na kran, Gry, CZĘŚCIOWY, Silent switch wpływa
Desktop, Firefox, 115 +, Fullscreen, Enter/Exit, No layout jump, OK, Android, WebView, 116 +, Storage, IndexedDB quota, Zapisz 5MB,PARTIAL,Quota niższy na urządzeniu X iOS,Safari,16. 4 +, PWA, Instalacja i wznowienie, Trwały stan, OK „,”
---
14) Lista kontrolna gotowości do produkcji
[] Naprawiono przeglądarkę/wersję/matrycę urządzenia i aktualizację SLA.
[] Zestaw dymów z autotestami (Playwright) jest uruchamiany w PR i w nocy; raporty z wideo/utworów.
[] RUM telemetry FPS/TTFF/hałd/WebGL błędy z przeglądarki/urządzenia sekcji.
[] Folbeki: WebGL1 ← WebGL2 ← WebGPU; Odblokowanie audio; Wskaźnik/abstrakcja dotykowa.
[] Przetworzony cykl życia/widoczność, pauza/wznowienie, offline, kontekst utracony.
[] Trwałość jest stabilna (IndexedDB + degradacja), wersja aktywów immutable via SW/CDN.
[] Profile na urządzeniach rzeczywistych (iOS/Android) i komputerach stacjonarnych 60/120 Hz.
[] Dokumentacja znanych ograniczeń (autoplays iOS, kwoty IDB, orientacja).
[] Plany rollback/feature-flags dla funkcji problematycznych (WebGPU/Threads).
[] Kanał zwrotny w grze (feedback + log dump).
---
Wznów streszczenie
Kompatybilność przeglądarki krzyżowej gier HTML5 to nie jedno pole wyboru „działa w Safari”, ale dyscyplina: sztywna matryca platformowa, wymierne mierniki (FPS/TTFF/hałas), autotest na urządzeniach rzeczywistych, folkbacks grafiki/audio/wejście oraz staranna praca z offline i oszczędności. Wprowadź stabilny rurociąg testowy, zebrać RUM i zachować funkcje za flagami - w ten sposób gra będzie równie gładka i przewidywalna na Chrome, Safari i Firefox, na telefonie i pulpicie.