HTML5 თამაშების ჯვარედინი თავსებადობა: ტესტის მატრიცა

1) რატომ არის HTML5 თამაშები „მტკივნეული“ ჯვარედინი

თამაშები გავლენას ახდენს პლატფორმის თითქმის ყველა ფენაზე: გრაფიკა (Canvas/WebGL/WebGPU), ტაიმერები და ნაკადები (RAF/Workers), ხმა (WebAudio/Media policies), შეყვანა (keyboard/pointer/touchoup/toup/gamans/gans), ქსელი (SW/Cache/IndexedDB), ინტეგრაცია (fullscreen/ორიენტაცია/PWA). ძრავების უთანხმოება - Chromium (Chromium/Edge/Opera/Android), WebKit (Safari/macOS, iOS/iPadOS ყველა ბრაუზერში), Gecko (FireFirefox). გარდა ამისა, ენერგეტიკული დაზოგვის განსხვავებები, ფონის ჩანართების throttling, მეხსიერების შეზღუდვები და ავტო პოლიტიკა.

---

2) დამხმარე გარემო: სამიზნე მატრიცა

ბრაუზერები/OS (მინიმალური ვერსიები მაგალითია, შეცვალეთ თქვენი SLA):

• 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 - მხოლოდ WebKit (iOS- ის ყველა ბრაუზერი იყენებს WebKit- ს).
• PWA (ინსტალაცია): Chromium desktop/mobile, Safari iOS 16. 4 + (Add to Home Screen შეზღუდვებით).

აპარატურის კლასები:

• დაბალი (მობილური ბიუჯეტი, 2 GB RAM)
• საშუალო (მობილური/ულტრაბუკები, 4-8 GB RAM)
• მაღალი (დესკტოპი/საკონსულო GPU, 8-16 + GB)

---

3) დიდი ტესტის მატრიცა (შაბლონი)

ჩამოაყალიბეთ რეალური ცხრილი თქვენს ტრეკერში. ქვემოთ მოცემულია ძირითადი ბლოკები და სტატუსები (OK/Partial/N/A), რომლებიც უნდა შეფასდეს.

3. 1 გრაფიკა

3. 2 აუდიო და მედია პოლიტიკა

3. 3 შეყვანა და ინტერფეისი

3. 4 პროდუქტიულობა და ენერგიის დაზოგვა

3. 5 შენახვა/ოფლაინ/ქსელი

---

4) სახელმძღვანელო სცენარების მინიმალური ნაკრები (Smoke)

1. პირველი გაშვება: ასეტების დატვირთვა, splash, დონის დაწყება <3 საშუალო კლასში.

2. შეყვანა: ტაჩი/მაუსი/კლავა/თამაში, მრავალჯერადი თითები, დაჭერა, სვიპები.

3. ეკრანი: სრული ეკრანი, ორიენტაციის დაბლოკვა, safe-area (iPhone ერთად ყბა).

4. აუდიო: პირველი ნოტა მომხმარებლის ჟესტის შემდეგ, mute/unmute, მუსიკის მიქსი/FX.

5. WebGL: კონტექსტის დაკარგვა/აღდგენა (სიმულაცია), ჩრდილები/შეიდერები/მასშტაბები.

6. სასიცოცხლო ციკლი: გამორთვა/განლაგება, ზარი/შეტყობინება, ჩანართი ფონზე.

7. შენახვა: პროგრესი/პარამეტრები IndexedDB/LocalStorage- ში, აღდგენა გადატვირთვის/ოფლაინის შემდეგ.

8. ქსელი: 3G throttle/მაღალი RTT, ქსელის დაკარგვა, retrai, cashing SW.

9. PWA: ინსტალაცია (Chromium/iOS), ხატები, ოფლაინ გვერდი, ვერსიის განახლება.

10. გრძელი სესია: 20-30 წუთი გაჟონვის გარეშე (FPS/heap სტაბილურია).

---

5) ავტომატიზაცია: რა და როგორ

Playwright (რეკომენდებულია): ჯვარედინი ძრავა, მობილური ემულაციები, WebKit დრაივერი, ვიდეო/ტრეისი.

კვიპროსი: სწრაფი dev ციკლი, მაგრამ WebKit/mobile შეზღუდულია.

WebDriver/Selenium: ინტეგრაცია ღრუბლებთან.

ღრუბლები: BrowserStack, Sauce Labs - ნამდვილი მოწყობილობები და iOS Safari.

პროფილირება: Chrome DevTools Protocol, Safari Web Inspector (Remote), Firefox Profiler.

პერფის სკრიპტები: k6/browser RUM- ის მსგავსი სცენარებისთვის ასეტების დატვირთვისთვის.

რჩევა: შეინახეთ ავტოსატრანსპორტო საშუალებების „პაკეტი“ 3-5 წუთის განმავლობაში (პატარა) თითოეული PR- სთვის: დატვირთვა, ერთი თამაშის ციკლი, პაუზა, ორიენტაციის შეცვლა, შენახვის შემოწმება.

---

6) შესრულება: მიზნობრივი მეტრიკა და ტელემეტრია

FPS: სტაბილური 60 fps (ან 120 ProMotion- ზე) - ჩაწერეთ frame pacing და არა მხოლოდ საშუალო.

Frame budget: 16. 7 ms (ან 8. 3 ms) განახლებისთვის + render, GC <2-3 ms ჩარჩოში.

Input latency: <80 ms mobile, 50 ms desctop.

Time-to-First-Frame (TTFF): < 1. 5 გვ (ასეტების დატვირთვის შემდეგ).

Heap ზრდა: სესიის 20 წუთში არაუმეტეს + 10%; runaway allocations- ის არარსებობა.

აუდიო ლიტერატურა: <100 ms roundtrip.

მშენებარე RUM: გაგზავნეთ ტელემეტრია FPS, TTFF, heap, WebGL context lost, 'browser/os/device'.

---

7) ხშირი შეუთავსებლობა და როგორ მკურნალობა

7. 1 გრაფიკა/რენდერი

HiDPI Canvas: დაუსვით ლოგიკური ზომა = CSS px, ფიზიკური = 'css devicePixelRatio'.

WebGL კონტექსტი: მოუსმინეთ 'webglcontextlost/webglcontextrestored', შეინახეთ რესურსები გადატვირთვისთვის.

ტექსტურები/შეიდერები: თავიდან აიცილეთ უნებართვო გაფართოება; შეამოწმეთ 'OES _ texture _ float', 'EXT _ color _ buffer _ float' და fallback.

WebGPU: feature-flag; შეინარჩუნეთ WebGL2 გზა, როგორც fallback.

7. 2 აუდიო/ავტომატური

დაიწყეთ AudioContext მომხმარებლის ჟესტით ('tap/click') და შეინახეთ დროშა „ნებადართულია“.

მოემზადეთ suspend- ისთვის iOS- ზე დასაკეცი/გადართვისას.

7. 3 შეყვანა/ჟესტები

ღონისძიების მსმენელები გააკეთეთ ნაგულისხმევი; სადაც საჭიროა 'preventDefault ()' არის აშკარა passive გამორთვა.

Pointer Events + Touch Events - თავიდან აიცილეთ ორმაგი დამუშავება; აბსტრაქტული შეყვანის ფენა.

Gamepad: შეამოწმეთ 'navigator. getGamepads () 'RAF- ის მიხედვით, გაითვალისწინეთ ღილაკების განლაგება.

7. 4 Fullscreen/Orientation/Safe-Area

iOS- სთვის გაითვალისწინეთ 'env (safe-area-inset-)', დაამატეთ padding ტილოზე/Overlay UI.

Orientation lock მხოლოდ მომხმარებელთა შეშფოთების შემდეგ; გქონდეთ ღილაკი „ეკრანზე გადაბრუნება“.

7. 5 Storigi/offline

IndexedDB: გადააკეთეთ ოპერაციები დროის გარეთ/retrai; iOS- ზე კვოტები მცირეა - შეინარჩუნეთ მსუბუქი შენახვა.

Service Worker: სტრატეგია 'Stale-While-Revalidate' ასეტებისთვის; გულწრფელად ინვალიდი ვერსიები (შინაარსი-hash).

LocalStorage შეიძლება მიუწვდომელი იყოს პირად რეჟიმში - გამაფრთხილებელი მეხსიერების განადგურება.

7. 6 ტაიმერები/ფონ

ტაიმერების ფონზე, კლამპები 1 სმ ან მეტს. შეაჩერეთ რთული ლოგიკა, პაუზა თამაში.

ჩართეთ visibility/' visibilityanity 'და ღონისძიების წამყვანი განახლებები ინტერვალების ნაცვლად.

---

8) Pipline შეკრება crossbrouser- ისთვის

ტრანსპილაცია: TypeScript/Babel targets 'es2020' (ან ქვემოთ ძველი WebViews).

პოლიფილები: მხოლოდ feature detection, და არა UA- ს მიხედვით.

Assets: sprite ფურცლები, ტექსტურები fallback ფორმატებით (WebP/PNG), აუდიო (AAC/OGG/Opus).

კოდის გამიჯვნა: lazy-chunks რედაქტორისთვის/არა მოთამაშის პანელებისთვის.

შეკუმშვა: Brotli/Zstd; HTTP/2/3; CDN immutable ვერსიით.

Feature flags: WebGPU/OffscreenCanvas/Threads - ჩართეთ თეთრი სია.

---

9) ჩეკების ფურცლების შაბლონები

9. 1 სმარტფონი (Android/Chrome, iPhone/Safari)

• Touch + multi-touch; ჟესტები არ „იჭერენ“ გვერდს
• Fullscreen და ორიენტაცია; safe-area სწორი

პირველი ხმა ტაპას შემდეგ; მუტი მუშაობს

• FPS-50 (დაბალი კლასი), „ჭვავის“ ჩარჩოს გარეშე
• პროგრესის შენარჩუნება/აღდგენა გადატვირთვის შემდეგ
• offline სცენა/გადატვირთვა SW
• სისტემის ოვერლეების გამოწვევა (შემომავალი ზარი) - სწორი პაუზა

9. 2 დესკტოპი (Windows/macOS)

მაუსი + ბორბალი + კლავიატურა, IME

• გეიმპადი (XInput/Generic)
• 60/120 ჰც მონიტორები: სტაბილური ჩარჩო
• Alt-Tab/რამდენიმე მონიტორი/fullscreen/windows
• მეხსიერება <ლიმიტი, გაჟონვის გარეშე (20 + წუთი)

---

10) კოდის მაგალითები (ფრაგმენტები)

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: კონტექსტის დაკარგვის დამუშავება:

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 });

Page Visibility:

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

---

11) რისკებისა და პრიორიტეტების მართვა

მერფის კანონი iOS- სთვის: შეამოწმეთ თქვენი მატრიციდან iOS- ის ყველა მცირე ვერსია - ხშირი რეგრესიები.

WebView OEM: მოძველებული WebView Android მოწყობილობები - ცალკეული რისკის ფენა (შეიყვანეთ „greylist“ მოწყობილობები).

ფუნქციური დროშები: ჩართეთ პრობლემური ფიჩები ბრენდების/მფრინავების ბაზრების მიხედვით.

Rollout: 1% - 10%, 50% - 100% RUM კარიბჭეებით (FPS, crash, TTFF).

---

12) დაკვირვება და ცუდი მოხსენებები

თითოეულ შეცდომაში შედის: 'ua', 'browser ვერსია', 'os', 'device', 'gpu/renderer', 'memory', 'fps', 'logs (WebGL/WebAudio შეცდომები)', 'steps', 'repreprepro videvideo'.

Crash dumps- ის ავტომატური გაგზავნა (JS/რესურსების შეცდომები), მოვლენები 'context', 'audio unlock failed'.

დაშბორდები: FPS ბრაუზერებისთვის/მოწყობილობებისთვის, საშუალო TTFF, contex- ის წილი, IndexedDB შეცდომები, SW ოფლაინ ჰიტები.

---

13) მატრიქსის საბოლოო შაბლონი (CSV თევზი)

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) წარმოების სიის მზადყოფნა

[] ჩაწერილია ბრაუზერის/ვერსიების/მოწყობილობების და SLA განახლების მატრიცა.
[] Smoke ნაკრები (Playwright) იწყება PR და nightly; მოხსენებები ვიდეო/ტრეისებით.
[] RUM ტელემეტრია FPS/TTFF/heap/WebGL შეცდომები ბრაუზერების/მოწყობილობების ჭრილით.
[] Folbeki: WebGL1, WebGL2 - WebGPU; Audio unlock; Pointer/Touch აბსტრაქცია.
[] დამუშავებულია lifecycle/visibility, pause/resume, offline, context lost.
[] შენახვა სტაბილურია (IndexedDB + დეგრადაცია), immutable assets ვერსია SW/CDN- ის საშუალებით.
[] პროფილები რეალურ მოწყობილობებზე (iOS/Android) და დესკტოპებზე 60/120 ჰც.
[] ცნობილი შეზღუდვების დოკუმენტაცია (iOS autoples, IDB კვოტები, orientation).
[] დაბრუნების გეგმები/feature-flags პრობლემური ფიგურებისთვის (WebGPU/Threads).
[] უკუკავშირის არხი თამაშში (feedback + log damp).

---

რეზიუმე

HTML5 თამაშების ჯვარედინი თავსებადობა - ეს არ არის ერთი ჩეკის ყუთი „მუშაობს Safari- ში“, არამედ დისციპლინა: პლატფორმების მკაცრი მატრიცა, გაზომილი მეტრიკა (FPS/TTFF/heap), ავტო სადგურები რეალურ მოწყობილობებზე, გრაფიკული/აუდიო/შეყვანის ფოლადი ფრთხილად მუშაობა ოფლაინით და შენარჩუნებით. შეიყვანეთ სტაბილური შეკვეთის ტესტირება, შეაგროვეთ RUM და შეინახეთ დროშები - ეს თამაში თანაბრად გლუვი და პროგნოზირებადი იქნება Chrome, Safari და Firefox, ტელეფონით და დესკტოპით.