توافق المتصفح المتقاطع لألعاب HTML5: مصفوفة الاختبار

1) لماذا ألعاب HTML5 «تؤذي» التصفح المتقاطع

تؤثر الألعاب على جميع طبقات النظام الأساسي تقريبًا: الرسومات (Canvas/WebGL/WebGPU)، وأجهزة التوقيت والتدفقات (RAF/Workers)، والصوت (سياسات WebAudio/Media)، والمدخلات (لوحة المفاتيح/المؤشر/اللمس/لوحة اللعب)، والشبكة ومخابس (SW W Cache/Indepad exedDB)، التكامل (الشاشة الكاملة/التوجه/PWA). محركات مختلفة - Chromium (Chrome/Edge/Opera/Android)، WebKit (Safari/macOS، iOS/iPadOS في جميع المتصفحات)، Gecko (Firefiefox). بالإضافة إلى الاختلافات في توفير الطاقة وخنق علامات التبويب الخلفية وحدود الذاكرة وسياسات التشغيل التلقائي.

2) البيئات المدعومة: مصفوفة الهدف

المتصفحات/نظام التشغيل (الإصدارات الدنيا مثال، استبدل SLAs الخاصة بك):

سطح المكتب: Chrome/Edge 116 + و Firefox 115 + و Safari 16 + (macOS 12 +).
الهاتف المحمول: Chrome Android 116 + (Android 9 +) و Samsung Internet 21 + و Safari iOS/iPadOS 16 +.
WebView: Android WebView 116 +، iOS - WebKit فقط (جميع المتصفحات الموجودة على iOS تستخدم WebKit).
PWA (التركيب): سطح مكتب Chromium/mobile، Safari iOS 16. 4 + (أضف إلى الشاشة الرئيسية مع قيود).

فئات الأجهزة:

منخفضة (ميزانية متنقلة، 2 جيجابايت ذاكرة وصول عشوائي)
متوسطة (متنقلة/فائقة السرعة، 4-8 غيغابايت من ذاكرة الوصول العشوائي)
عالية (وحدة معالجة الرسومات المكتبية/الاستهلاكية، 8-16 + جيجابايت)

3) مصفوفة اختبار كبيرة (نموذج)

شكل طاولة حقيقية في جهاز التعقب الخاص بك. فيما يلي الكتل والحالات الرئيسية (OK/Partial/N/A) التي يجب قياسها.

3. 1 رسومات

النظام الفرعي	كروم	سفاري (iOS/macOS)	فايرفوكس	Ad notata
قماش ثنائي الأبعاد (HiDPI، ألفا)				تحجيم DPI، قطع أثرية مبهرجة
WebGL 1. 0				فقدان السياق، حجم الملمس الأقصى
WebGL 2. 0				على iOS/Safari القديم غالبًا ما يكون جزئيًا
WebGPU (في حالة الاستخدام)				مسار علم الميزة/polypill
خارج الشاشة قماش				iOS: جزئيًا/ليس في WebView
WebAssembly SIMD/Threads				حد iOS. والتدفقات ؛ COOP/COEP

3. 2 السياسات السمعية والإعلامية

النظام الفرعي	كروم	سفاري	فايرفوكس	Ad notata
واجهة برمجة التطبيقات WebAudio				قيود التشغيل التلقائي
التشغيل التلقائي بدون إيماءة				iOS: لفتة المستخدم المحظورة المطلوبة
الكمون (السياق الصوتي)				يختلف زمن الوصول المنخفض على الهواتف المحمولة

3. 3 المدخلات والوصلة البينية

النظام الفرعي	كروم	سفاري	فايرفوكس	Ad notata
أحداث المؤشر				iOS Safari: ميزات التقاط
لمسة/لفتة				المستمعين السلبيين، منع الافتراضي
لوحة مفاتيح (IME، مفاتيح خاصة)				اختلافات المدونة/المدونة الرئيسية
واجهة برمجة التطبيقات Gamepad				iOS WebKit محدود للغاية
واجهة برمجة التطبيقات كاملة الشاشة				iOS: إيماءات/خطوط، منطقة آمنة
قفل التوجيه				يتطلب نظام iOS إيماءة المستخدم

3. 4 الأداء وتوفير الطاقة

النظام الفرعي	كروم	سفاري	فايرفوكس	Ad notata
RequestAnimationFrame (60/120 Гц)				شاشات 120 هرتز، iOS 120 Hz ProMotion
خلفية خانقة				مؤقتات المشبك في علامة التبويب الخلفية
غطاء الذاكرة/OOM				علامة تبويب الحمل الزائد لنظام iOS بسعة 500-800 ميجابايت

3. 5 حفظ/خارج الإنترنت/شبكة

النظام الفرعي	كروم	سفاري	فايرفوكس	Ad notata
الفهرسة (الحصص)				نظام iOS: الحصص صغيرة/تنظيف بواسطة النظام
تخزين محلي/جلسة				يتم تنظيف/حظر الأوضاع الخاصة
عامل خدمة/مخبأ				iOS - حدود معدل الاستيقاظ
Fetch/CORS/HTTP/2/3				الاختلافات بين الإضاءة المسبقة والحفاظ على الحياة

4) الحد الأدنى من مجموعة النصوص اليدوية (الدخان)

1. البداية الأولى: تحميل الأصول، الرش، بدء المستوى <3 s على الطبقة الوسطى.

2. المدخلات: اللمس/الفأر/لوحة المفاتيح/لوحة الألعاب، أصابع متعددة، تمسك، تمريرات.

3. الشاشة: الشاشة الكاملة، قفل التوجيه، المنطقة الآمنة (iPhone مع الانفجارات).

4. الصوت: الملاحظة الأولى بعد إيماءة مخصصة، كتم الصوت/غير مكتوب، مزيج الموسيقى/FX.

5. WebGL: فقدان/استرداد السياق (محاكاة)، الظلال/الظلال/المقياس.

6. دورة الحياة: الانهيار/التوسع، الاتصال/الإخطار، علامة التبويب في الخلفية.

7. يحفظ: التقدم/الإعدادات في IndexedDB/LocalStorage، الاسترداد بعد إعادة التشغيل/غير متصل بالإنترنت.

8. الشبكة: 3G دواسة الوقود/RTT عالية، فقدان الشبكة، إعادة الطرح، التخزين المؤقت عبر SW.

9. PWA: التثبيت (Chromium/iOS)، الأيقونات، الصفحة غير المتصلة بالإنترنت، تحديث الإصدار.

10. جلسة طويلة: 20-30 دقيقة بدون تسريبات (FPS/كومة مستقرة).

5) الأتمتة: كيف وكيف

الكاتب المسرحي (موصى به): محرك متقاطع، مستحلبات متنقلة، سائق WebKit، فيديو/مسارات.

السرو: حلقة التطوير السريع، لكن WebKit/mobile محدود.

WebDriver/Selenium: التكامل السحابي.

السحب: BrowserStack و Sauce Labs - أجهزة حقيقية و iOS Safari.

التنميط: Chrome DevTools Protocol, Safari Web Inspector (Remote), Firefox Profiler.

نصوص Perf: k6/متصفح لنصوص تحميل الأصول الشبيهة بـ RUM.

نصيحة: احتفظ بـ «حزمة» من الاختبارات الذاتية لمدة 3-5 دقائق (دخان) لكل علاقات عامة: التحميل، دورة لعبة واحدة، التوقف المؤقت، تبديل الاتجاه، التحقق من الحفظ.

6) الأداء: المقاييس المستهدفة والقياس عن بعد

FPS: مستقر 60 إطارًا في الثانية (أو 120 على ProMotion) - التقاط سرعة الإطار، وليس فقط المتوسط.

ميزانية الإطار: 16. 7 مم (أو 8. 3 مللي ثانية) عند التحديث + العرض، GC <2-3 مللي ثانية لكل إطار.

زمن انتظار الإدخال: <80 ms mobile، 50 ms desktop

Time-to-First-Frame (TTFF): <1. 5 s (بعد تحميل الأصول).

نمو الكومة: لا يزيد عن + 10٪ لكل 20 دقيقة من الجلسة ؛ الافتقار إلى المخصصات الجامحة.

زمن الوصول الصوتي: <100 مللي ثانية ذهابًا وإيابًا.

Embed RUM: أرسل FPS، TTFF، كومة، سياق WebGL المفقود، مما أدى إلى حدوث أخطاء بواسطة «المتصفح/العمليات/الجهاز».

7) أوجه عدم التوافق المتكررة وكيفية التعامل معها

7. 1 رسومات/عرض

HiDPI Canvas-Set الحجم المنطقي = CSS px، physical = 'css devicePixelRate'.

فقد سياق WebGL: استمع إلى «webglcontextlost/webglcontextreored»، وتخزين الموارد لإعادة التشغيل.

القوام/الظلال: تجنب الامتدادات غير العالمية ؛ تحقق من OES _ comsture _ float, EXT _ color _ buffer _ float, and redback.

WebGPU: roll feature-flag; حافظ WebGL2 المسار كعامل احتياطي.

7. 2 التشغيل الصوتي/التلقائي

ابدأ AudioContext بإيماءة مخصصة («انقر/انقر») واحتفظ بالعلم «المسموح به».

على iOS، استعد للتعليق عند التقليل/التبديل.

7. 3 مدخلات/إيماءات

مستمعي الأحداث يصبحون سلبيين بشكل افتراضي ؛ حيث «preventDefault ()» هو تعطيل صريح سلبي.

أحداث المؤشر + أحداث اللمس - تجنب المعالجة المزدوجة ؛ تجريد طبقة المدخلات.

Gamepad: تحقق من الملاح. GetGamepads () "عبر سلاح الجو الملكي البريطاني، تأخذ في الاعتبار تخطيط الأزرار.

7. 4 شاشة كاملة/توجيه/منطقة آمنة

بالنسبة لنظام التشغيل iOS، ضع في اعتبارك «env (منطقة آمنة - inset-)»، أضف حشوة إلى واجهة المستخدم القماشية/Complay.

قفل التوجيه فقط بعد إيماءة المستخدم ؛ لديك زر «الشاشة الدوارة».

7. 5 Storigi/Offline

'1' مصرف التنمية الأفريقي المفهرس: عمليات التفاف في فترات زمنية/عمليات إعادة التدوير ؛ على iOS، الحصص صغيرة - احتفظ بعمليات حفظ خفيفة الوزن.

عامل الخدمة: استراتيجية «إعادة التحقق من الأصول» ؛ الإصدارات المعطلة بصدق (تجزئة المحتوى).

قد لا يكون التخزين المحلي متاحًا في أوضاع خاصة - يتحلل إلى ذاكرة التحذير.

7. 6 أجهزة توقيت/خلفية

في الخلفية، تتجمع أجهزة التوقيت حتى 1 ثانية أو أكثر. أوقف المنطق الثقيل، أوقف اللعبة مؤقتًا.

تمكين رؤية الصفحة/« visibilityange »والتحديثات التي تحركها الأحداث بدلاً من الفترات الزمنية.

8) تجميع خط الأنابيب للمتصفح

Transpilation: TypeScript/Babel يستهدف «es2020» (أو أقل لـ WebViews القديمة).

البوليفيلات: الكشف عن الميزات فقط، وليس UA.

الأصول: أوراق سبريت، قوام بتنسيقات احتياطية (WebP/PNG)، صوت (AAC/OGG/Opus).

فصل الرمز: قطع كسولة للمحرر/لوحات غير لعبة.

الضغط: بروتلي/زستد ؛ HTTP/2/3; CDN مع إصدار غير قابل للتغيير.

أعلام الميزة: WebGPU/OffscreenCanvas/Threads - تم تمكينه بواسطة القائمة البيضاء.

9) قوالب القائمة المرجعية

9. 1 هاتف ذكي (Android/Chrome و iPhone/Safari)

اللمس + اللمس المتعدد ؛ الإيماءات لا «تسحب» الصفحة
الشاشة الكاملة والتوجيه ؛ منطقة آمنة صحيحة
الصوت الأول بعد النقر ؛ يعمل البكم
FPS ≥ 50 (الطبقة المنخفضة)، بدون إطار خشن
حفظ/استعادة التقدم بعد إعادة التشغيل
المشهد غير المتصل بالإنترنت/إعادة تشغيل SW
مكالمة تراكب النظام (المكالمة الواردة) → التوقف الصحيح

9. 2 سطح المكتب (Windows/macOS)

فأر + عجلة + لوحة مفاتيح، IME
Gamepad (XInput/Generic)
شاشات 60/120Hz: سرعة الإطار المستقرة
Alt-Tab/شاشات متعددة/شاشة كاملة/نافذة
الذاكرة <الحد، لا تسربات (20 + دقيقة)

10) أمثلة رمزية (شظايا)

قماش с HiDPI:

وظيفة js resizeCanvas (قماش) {
const dpr = Math. min (نافذة. PixelRatio         1, 2);
const {clientWidth: w, clientHeight: h} = قماش ؛
قماش. width = Math. floor (w dpr);
قماش. الطابق (ح dpr) ؛
const ctx = قماش. getContext ('2d') ؛
ctx. setTransform (dpr, 0, 0, dpr, 0, 0);
}

WebGL: معالجة خسارة السياق:

js const gl = قماش. getContext ('webgl', {PreserveDrawingBuffer: false});
قماش. ReductionEventListener ('webglcontextlost', e => {e. preventDefault (); توقف مؤقتا = صحيح ؛}) ؛
قماش. EventListener ('webglcontextreored', () => {reloadResources (); توقف مؤقتا = خطأ ؛}) ؛

الصوت «فتح»:

js let audioUnlocked = false;
النافذة. EventListener ('pointerdown', () => {
if (! audioUnlocked) {
const ctx = new AudioContext ();
const b = ctx. createBuffer (1, 1, 22050);
السلبية s = ctx. CreateBufferSource ();
s. buffer = b; s. connect (ctx. والوجهة المقصودة) ؛ البدء (0) ؛
audioUnlocked = صحيح ؛
}
}، {مرة واحدة: صحيح، سلبي: صحيح}) ؛

رؤية الصفحة:

js document. EventListener («visibilitychange»، () => {
إذا (الوثيقة. مخفي) pauseGame () ؛
سيرة ذاتية أخرى () ؛
});

11) إدارة المخاطر وتحديد الأولويات

قانون مورفي لنظام التشغيل iOS: اختبر كل إصدار ثانوي من نظام التشغيل iOS من مصفوفتك - الانحدارات متكررة.

WebView OEM: أجهزة Android التي تحتوي على WebView قديمة هي طبقة مخاطر منفصلة (أدخل أجهزة "greylist').

الأعلام الوظيفية: تشمل ميزات المشكلة من قبل العلامة التجارية/الطيارين في السوق.

الطرح: 1٪ → 10٪ → 50٪ → 100٪ مع بوابات RUM (FPS، تحطم، TTFF).

12) تقارير المراقبة والأخطاء

تضمين كل تقرير خطأ: «ua»، «إصدار المتصفح»، «os'،» الجهاز «،» gpu/renderer «،» الذاكرة «،» fps'، «السجلات (أخطاء WebGL/WebAudio)»، «خطوات»، «إعادة برو فيديو».

الإرسال التلقائي لمكبات التصادم (أخطاء/موارد JS)، «السياق المفقود»، أحداث «فتح الصوت» الفاشلة.

لوحات القيادة: FPS حسب المتصفح/الجهاز، متوسط TTFF، السياق المفقود، أخطاء IndexedDB، ضربات SW غير المتصلة بالإنترنت.

13) مصفوفة القالب النهائي (CSV fish)


منصة، متصفح، إصدار، ميزة، سيناريو، متوقع، حالة، ملاحظات
Android، Chrome، 116 +، WebGL2، Context lost/restore، State restored، OK، iOS,Safari,16. يؤثر الصوت 6,Audio,First على الصنبور والمسرحيات والجزئي والمفتاح الصامت
سطح المكتب، Firefox، 115 +، Fullscreen، Enter/Exit، No clayout jump، OK، Android، WebView، 116 +، حصة التخزين، IndexedDB، وفر 5MB,PARTIAL,Quota أقل على الجهاز X iOS,Safari,16. 4 +، PWA، تركيب وإعادة إطلاق، استمرت الدولة، حسنًا، "

---

14) قائمة مرجعية لاستعداد الإنتاج

[] مصفوفة متصفح/إصدار/جهاز ثابت وتحديث SLA.
[] يتم إطلاق مجموعة الدخان من الاختبارات الذاتية (Playwright) في العلاقات العامة وليلاً ؛ التقارير مع الفيديو/المسارات.
[] أخطاء القياس عن بعد RUM مع قسم المتصفح/الجهاز.
[] Folbeki: WebGL1 ← WebGL2 ← WebGPU ؛ فتح قفل الصوت ؛ المؤشر/لمس التجريد.
[] دورة الحياة/الرؤية المعالجة، التوقف المؤقت/الاستئناف، خارج الإنترنت، ضياع السياق.
[] الثبات مستقر (مؤشر DB + التحلل)، نسخة الأصول غير قابلة للتغيير عبر SW/CDN.
[] ملفات تعريف على الأجهزة الحقيقية (iOS/Android) وأجهزة الكمبيوتر المكتبية 60/120 هرتز.
[] توثيق القيود المعروفة (التشغيل التلقائي لنظام التشغيل الآلي، وحصص البنك الإسلامي للتنمية، والتوجيه).
[] خطط التراجع/أعلام الميزات للميزات الإشكالية (WebGPU/Thread).
[] قناة التغذية الراجعة في اللعبة (التعليقات + تفريغ السجل).

---

ملخص السيرة الذاتية

توافق المتصفح المتقاطع لألعاب HTML5 ليس مربع اختبار واحد «يعمل في Safari»، ولكنه تخصص: مصفوفة منصة صلبة، مقاييس قابلة للقياس (FPS/TTFF/كومة)، اختبارات ذاتية على الأجهزة الحقيقية، ظهور فولكس للرسومات/الصوت/الإدخال والعمل الدقيق مع عدم الاتصال والإنقاذ. أدخل خط أنابيب اختبار مستقر، واجمع RUM واحتفظ بالميزات خلف الأعلام - بهذه الطريقة ستكون اللعبة سلسة ويمكن التنبؤ بها على Chrome و Safari و Firefox، على هاتفك وسطح مكتبك.