كيفية اكتشاف جهاز المستخدم الخاص بك حتى تتمكن من تحسين تجربة المستخدم الخاصة بهم

قبل بضعة أشهر شاهدت حديثًا رائعًا من Chrome Dev Summit حول الأداء في الأجهزة البطيئة.

لقد أذهلني كل العمل الذي قام به Facebook في تحديد الأجهزة لإنشاء تجربة مستخدم أفضل. تقدم سريعًا حتى الآن ، وقد قررت دراسة المزيد حول الموضوع ومعرفة ما يمكنني فعله في Thinkific (الشركة التي أعمل بها).

وكلاء المستخدم

وكلاء المستخدم معروفون جيدًا من قبل المطورين. نستخدمها لاكتشاف برامج الروبوت ، وإعادة توجيه المستخدمين إلى إصدار معين من موقعنا على الويب أو إلحاق فئات CSS على صفحتنا حتى نتمكن من إنشاء تجارب مختلفة.

في Thinkific ، نستخدم بالفعل متصفح Ruby gem لتحليل وكيل المستخدم والحصول على المعلومات ذات الصلة (اكتشاف الروبوت على سبيل المثال). لذلك ، قررت الاحتفاظ بالمعلومات الرئيسية في جدول Visitor_device - هنا المخطط:

tenant_id: the course creator school the visitor is checkingraw: the raw uatype: desktop / mobile / tablet / bot / otherbrowser_namebrowser_versionplatform_nameplatform_versionhardware: hstore containing memory, processor, device_model, device_nameconnection: hstore containing downlink_max, connection_type

ربما لاحظت أن بعض الأشياء غير متوفرة في سلسلة UA. حان الوقت لواجهات برمجة تطبيقات JavaScript API الجديدة:

الحصول على معلومات الأجهزة باستخدام JavaScript

كما تم تناوله في فيديو Chrome Dev Summit ، يمكننا استخدام JS للحصول على هذه المعلومات.

ذاكرة

navigator.deviceMemoryسيعيد رقم الفاصلة العائمة. هناك أشياء يجب مراعاتها هنا:

  • إنه يعمل فقط عبر HTTPS
  • الدعم محدود للغاية (Chrome بشكل أساسي فقط)

المزيد عنها:

  • المواصفات من W3C
  • مستندات MDN
  • هل يمكنني استخدام deviceMemory

معالجات

navigator.hardwareConcurrencyسيعيد عدد النوى المنطقية لوحدة المعالجة المركزية للمستخدم. الدعم لهذا لائق.

الكشف عن معلومات الاتصال باستخدام JavaScript

navigator.connectionهي واجهة برمجة تطبيقات جديدة تحتوي على معلومات حول اتصال النظام ، مثل عرض النطاق الترددي الحالي لجهاز المستخدم أو ما إذا كان الاتصال محسوبًا أم لا. الدعم محدود للغاية (Chrome بشكل أساسي فقط) ولكن الأمور واعدة.

المزيد عنها:

  • مثال على Chrome
  • مستندات MDN
  • هل يمكنني استخدام واجهة برمجة تطبيقات معلومات الشبكة

الكشف عن طراز الجهاز

قد يقوم وكيل المستخدم بإرجاع بعض المعلومات حول اسم الطراز. userstack هي خدمة تمنحك معلومات بناءً على وكيل المستخدم. إنه يعمل بشكل جيد ويسهل دمجه ، ومع ذلك ، بناءً على احتياجاتك ، لا يمكنهم المساعدة.

خذ على سبيل المثال iDevices. وكيل المستخدم الخاص بهم هو نفسه بشكل أساسي ، لذا لا يمكنك تمييز iPad Pro عن جهاز iPad القديم الذي يعمل بنظام iOS الأخير. في هذه الحالات ، قد تحتاج إلى اكتشاف أفضل استنادًا إلى الدقة وكثافة البكسل ومعلومات الأجهزة الأخرى المعروضة في المتصفح. لقد أجريت بعض البحث السريع حول هذا ووجدت 3 منتجات حتى الآن: WURFL.io و DeviceAtlas و 51 درجة. لم يتح لي الوقت لتجربة منتجاتهم حتى الآن ، لكنني أتطلع إلى القيام بذلك (والنشر عنها)

التعليمات

سؤال: لماذا لا تستخدم Google Analytics / Mixpanel / Kibana / New Relic / أداتك هنا؟

يمكننا الحصول على معلومات المتصفح داخل أدوات أخرى. ولكن كمنتج SaaS ، لا نستخدم خاصية Google Analytics الخاصة بنا (يضيف العملاء ملكيتهم الخاصة). أيضًا ، قد تمنع أدوات حظر الإعلانات أدوات الطرف الثالث هذه. أخيرًا وليس آخرًا ، من خلال وجود هذه المعلومات في جانبنا يمكننا التكيف بشكل أفضل.

سؤال: هل لديك قائمة بالأجهزة المنخفضة / المتطورة؟

لا. ربما يمكن بناء هذا من خلال الجمع بين عدد المعالجات والذاكرة ولكني لم أستثمر الكثير من الوقت في هذا الأمر. في هذا المشروع ، أنشأ زميلي مساعد ريلز الذي سيحدد ما إذا كان المستخدم سيستخدم الإصدار البسيط أو الافتراضي من موقع الويب استنادًا إلى الأجهزة. في هذا الموضوع ، من المهم الإشارة إلى أن Facebook لديه مكتبة لنظام Android تسمى Device Year Class.

نشرت أيضا على مدونتي. إذا أعجبك هذا المحتوى ، فاتبعني على Twitter و GitHub.

بالمناسبة - Thinkific هو التوظيف لعدة وظائف إذا كنت مهتمًا.