النقل إلى تلميحات برنامج وكيل المستخدم

استراتيجيات لنقل موقعك الإلكتروني من الاعتماد على سلسلة وكيل المستخدم إلى حقول معلومات الوكيل المستخدم الجديدة.

Rowan Merewood

وكيل المستخدم السلسلة هو بصمة سلبية مهمة عرضها في المتصفحات، مثلاً بالإضافة إلى صعوبة معالجتها. ومع ذلك، هناك جميع أنواع البيانات جمع ومعالجة بيانات وكيل المستخدم، إذًا ما هو مطلوب الطريق إلى حل أفضل. تقدّم حقول معلومات الوكيل المستخدم طريقة صريحة للإعلان عن حاجتك إلى بيانات وكيل المستخدم والطرق لإرجاع البيانات في تنسيق سهل الاستخدام.

ترشدك هذه المقالة خلال عملية تدقيق وصولك إلى بيانات وكيل المستخدم نقل استخدام سلسلة وكيل المستخدم إلى حقول وكيل المستخدم.

جمع بيانات وكيل المستخدم واستخدامها

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

إذا كنت لا تعرف ما إذا كان يتم استخدام بيانات وكيل المستخدم أو مكان استخدامها، ننصحك بالبحث رمز الواجهة الأمامية لاستخدام navigator.userAgent ورمز الواجهة الخلفية استخدام عنوان HTTP يتضمّن User-Agent. يجب عليك أيضًا التحقق من رمز الواجهة الأمامية لاستخدام ميزات تم إيقافها نهائيًا، مثل navigator.platform navigator.appVersion

من وجهة نظر وظيفية، فكر في أي مكان في التعليمات البرمجية الخاص بك تكون فيه التسجيل أو المعالجة:

• اسم المتصفّح أو إصداره
• اسم نظام التشغيل أو إصداره
• العلامة التجارية للجهاز أو طرازه
• نوع وحدة المعالجة المركزية (CPU) أو البنية أو وحدة البت (على سبيل المثال، 64 بت)

ومن المحتمل أيضًا أنك تستخدم مكتبة أو خدمة تابعة لجهة خارجية من أجل معالجة وكيل المستخدم. في هذه الحالة، تحقق لمعرفة ما إذا كان يتم التحديث إلى تتيح ميزة User-Agent Client Hints.

هل تستخدم البيانات الأساسية لوكيل المستخدم فقط؟

تشمل المجموعة التلقائية من "تلميحات العميل لوكيل المستخدم" ما يلي:

• Sec-CH-UA: اسم المتصفّح وإصداره الرئيسي أو المهم
• Sec-CH-UA-Mobile: قيمة منطقية تشير إلى جهاز جوّال
• Sec-CH-UA-Platform: اسم نظام التشغيل
  • يُرجى العِلم أنّه قد تم تعديل ذلك في المواصفات وسيعكسه في متصفّح Chrome والمتصفحات الأخرى المستندة إلى Chromium قريبًا.

سيحتفظ أيضًا الإصدار المصغّر من سلسلة وكيل المستخدم المقترحة هذه المعلومات الأساسية بطريقة متوافقة مع الأنظمة القديمة. على سبيل المثال، بدلاً من Chrome/90.0.4430.85 ستحتوي السلسلة على Chrome/90.0.0.0.

إذا كنت تتحقق فقط من سلسلة وكيل المستخدم لاسم المتصفح أو الإصدار الرئيسي أو نظام التشغيل، فسيستمر الرمز في العمل على الرغم من احتمال للاطّلاع على تحذيرات الإيقاف النهائي.

على الرغم من أنّه يمكنك الانتقال إلى ميزة User-Agent Client Hints (ويجب عليك ذلك)، إلا أنّه قد يكون لديك إصدار قديم من التعليمات البرمجية أو الموارد التي تمنع ذلك. يؤدي تقليل المعلومات في تهدف سلسلة وكيل المستخدم بهذه الطريقة المتوافقة مع الأنظمة القديمة إلى ضمان على الرغم من أن الرمز الحالي سيتلقى معلومات أقل تفصيلاً، إلا أنه يجب بالوظائف الأساسية.

الاستراتيجية: واجهة برمجة تطبيقات JavaScript من جهة العميل عند الطلب

إذا كنت تستخدم حاليًا navigator.userAgent، يجب عليك الانتقال إلى تفضيل navigator.userAgentData قبل الرجوع إلى تحليل سلسلة وكيل المستخدم.

if (navigator.userAgentData) {
  // use new hints
} else {
  // fall back to user-agent string parsing
}

إذا كنت تبحث عن جهاز جوّال أو كمبيوتر مكتبي، استخدِم قيمة mobile المنطقية:

const isMobile = navigator.userAgentData.mobile;

userAgentData.brands هي مصفوفة من الكائنات مع brand وversion. حيث يستطيع المتصفح عرض توافقه مع تلك العلامات التجارية. يمكنك الوصول إليها مباشرةً كمصفوفة أو قد ترغب في استخدام طلب some() للتحقّق من توفّر إدخال معيّن:

function isCompatible(item) {
  // In real life you most likely have more complex rules here
  return ['Chromium', 'Google Chrome', 'NewBrowser'].includes(item.brand);
}
if (navigator.userAgentData.brands.some(isCompatible)) {
  // browser reports as compatible
}

إذا كنت بحاجة إلى إحدى قيم وكيل المستخدم الأكثر تفصيلاً وعالية القصور، تحديد العنوان والتحقّق من النتيجة في Promise المعروضة:

navigator.userAgentData.getHighEntropyValues(['model'])
  .then(ua => {
    // requested hints available as attributes
    const model = ua.model
  });

يمكنك أيضًا استخدام هذه الإستراتيجية إذا كنت ترغب في الانتقال من المعالجة من جهة الخادم إلى المعالجة من جهة العميل. لا تسمح واجهة برمجة تطبيقات JavaScript تتطلب الوصول إلى عناوين طلبات HTTP، ولذلك يمكن طلب قيم وكيل المستخدم على في أي وقت.

الاستراتيجية: عنوان ثابت من جهة الخادم

في حال استخدام عنوان الطلب User-Agent على الخادم ووفقًا لاحتياجاتك لتلك البيانات نسبيًا على مستوى موقعك بالكامل، عندها يمكنك تحديد تلميحات العميل المطلوبة كمجموعة ثابتة في ردودك. هذا هو أمرًا بسيطًا نسبيًا حيث لا تحتاج بشكل عام إلى تهيئته إلا في الموقع. فعلى سبيل المثال، قد يكون في تهيئة خادم الويب إذا كنت قد تضيف رؤوسًا هناك، أو تهيئة الاستضافة، أو تهيئة المستوى الأعلى إطار العمل أو النظام الأساسي الذي تستخدمه لموقعك.

استخدِم هذه الاستراتيجية في حال تحويل الردود أو تخصيصها. استنادًا إلى بيانات وكيل المستخدم.

قد تختار المتصفحات أو الأجهزة العميلة الأخرى تقديم تلميحات افتراضية مختلفة، ومن ثم ممارسة جيدة لتحديد كل ما تحتاجه، حتى لو كان يوفره بشكل عام الافتراضي.

على سبيل المثال، سيتم تمثيل الإعدادات التلقائية الحالية في Chrome على النحو التالي:

⬇️ عناوين الردود

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

إذا كنت ترغب أيضًا في الحصول على طراز الجهاز في الردود، فعليك إرسال:

⬇️ عناوين الردود

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA

عند معالجة هذا من جانب الخادم، يجب عليك أولاً التحقق مما إذا كانت البيانات التي تم إرسال العنوان Sec-CH-UA ثم سيتم الرجوع إلى العنوان User-Agent التحليل إذا لم يكن متاحًا.

الاستراتيجية: تفويض تلميحات للطلبات الواردة من عدّة مصادر

في حال طلب موارد فرعية من مصادر متعددة أو مواقع إلكترونية متعددة تتطلّب "تلميحات عميل وكيل المستخدم" لكي يتم إرسالها بشأن طلباتهم، عليك حينها ما يلي: تحديد التلميحات المطلوبة بشكل صريح باستخدام سياسة الأذونات.

على سبيل المثال، لنفترض أنّ https://blog.site يستضيف موارد على https://cdn.site التي يمكنها عرض موارد محسَّنة لجهاز معيّن. بإمكان "https://blog.site" طلب التلميح Sec-CH-UA-Model، ولكن عليه تفويضه صراحةً إلى https://cdn.site باستخدام Permissions-Policy . تتوفر قائمة بالتلميحات التي تتحكم فيها السياسة في قسم تلميحات العملاء بنى أساسية مسودّة

⬇️ ردّ من "blog.site" بشأن تفويض التلميح

Accept-CH: Sec-CH-UA-Model
Permissions-Policy: ch-ua-model=(self "https://cdn.site")

⬆️ تضمين التلميح المفوَّض في طلب إرسال الموارد الفرعية على cdn.site

Sec-CH-UA-Model: "Pixel 5"

يمكنك تحديد تلميحات متعدّدة لأصول متعدّدة، وليس من نطاق ch-ua فقط:

⬇️ ردّ من "blog.site" بشأن تفويض عدة تلميحات إلى مصادر متعدّدة

Accept-CH: Sec-CH-UA-Model, DPR
Permissions-Policy: ch-ua-model=(self "https://cdn.site"),
                    ch-dpr=(self "https://cdn.site" "https://img.site")

الاستراتيجية: تفويض تعديلات على إطارات iframe

تعمل إطارات iframe من مصادر متعددة بطريقة مشابهة للموارد المشتركة المصدر، ولكن يمكنك لتحديد التلميحات التي تريد تفويضها في السمة allow.

⬇️ رد من "blog.site"

Accept-CH: Sec-CH-UA-Model

↪️ HTML للسمة blog.site

<iframe src="https://widget.site" allow="ch-ua-model"></iframe>

⬆️ طلب إرسال إلى widget.site

Sec-CH-UA-Model: "Pixel 5"

ستلغي السمة allow في إطار iframe أي عنوان Accept-CH قد يرسل widget.site نفسه، لذا تأكد من أنك حددت كل شيء إليه.

الاستراتيجية: تعديلات ديناميكية من جهة الخادم

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

من المهم أن نتذكّر هنا أنّ كل مثيل من Accept-CH محل المجموعة الحالية بشكل فعّال. لذلك، إذا كنت تستخدم أداء ديناميكي لضبط العنوان، فيجب أن تطلب كل صفحة المجموعة الكاملة من التلميحات المطلوبة.

على سبيل المثال، قد يكون لديك قسم واحد على موقعك الإلكتروني تريد توفيره الرموز وعناصر التحكم التي تتوافق مع نظام تشغيل المستخدم. لهذا، يمكنك نريد أيضًا سحب Sec-CH-UA-Platform-Version لعرض الإعلانات المناسبة وموارد فرعية.

⬇️ عناوين الرد على "/blog"

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

⬇️ عناوين الرد على "/app"

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA

الاستراتيجية: مطلوب إدخال تعديلات من جهة الخادم عند الطلب الأول

قد تكون هناك حالات تحتاج فيها إلى أكثر من المجموعة الافتراضية للتلميحات على في طلبك الأول، ولكن هذا أمر نادر الحدوث على الأرجح، لذلك راجعت الأسباب.

يعني الطلب الأول حقًا أول طلب عالي المستوى لذلك المصدر المرسلة في جلسة التصفح هذه. تتضمن المجموعة التلقائية من التلميحات المتصفّح. واسم الإصدار الرئيسي والنظام الأساسي ومؤشر الجوّال. لذا فإن السؤال الذي السؤال هنا هو: هل تحتاج إلى بيانات موسّعة عند التحميل الأولي للصفحة؟

للحصول على تلميحات إضافية بشأن الطلب الأول، لديك خياران. أولاً، يمكنك الاستفادة من عنوان Critical-CH. ويكون هذا الملف بالتنسيق نفسه المستخدَم في السمة Accept-CH. ولكنه يخبر المتصفح أنه يجب عليه إعادة محاولة الطلب على الفور إذا كانت تم إرسال الرسالة دون التلميح المهم.

⬆️ طلب أوّلي

[With default headers]

⬇️ عناوين الردود

Accept-CH: Sec-CH-UA-Model
Critical-CH: Sec-CH-UA-Model

🎞 يعيد المتصفح محاولة الطلب الأولي باستخدام العنوان الإضافي.

[With default headers + …]
Sec-CH-UA-Model: Pixel 5

وسيؤدي ذلك إلى تحمل عبء إعادة المحاولة مع الطلب الأول، ولكن انخفاض تكلفة التنفيذ نسبيًا إرسال الرأس الإضافي والمتصفّح والباقي.

بالنسبة للمواقف التي تحتاج فيها حقًا إلى تلميحات إضافية حول في تحميل الصفحة لأول مرة، فإن موثوقية تلميحات العميل الاقتراح هو تخطيط مسار لتحديد تلميحات في إعدادات مستوى الاتصال. هذا النمط تستخدم بروتوكول طبقة التطبيق الإعدادات (ALPS) لبروتوكول أمان طبقة النقل (TLS) 1.3 لتفعيل هذا العرض المبكر للتلميحات حول اتصالات HTTP/2 وHTTP/3. هذا النمط لا تزال في مرحلة مبكرة، ولكن إذا كنت تدير بشكلٍ نشط بروتوكول أمان طبقة النقل (TLS) الخاص بك إعدادات الاتصال، فهذا هو الوقت المثالي للمساهمة.

الاستراتيجية: الدعم القديم

قد يكون لديك رمز قديم أو جهة خارجية على موقعك الإلكتروني يعتمد على navigator.userAgent، بما في ذلك أجزاء سلسلة وكيل المستخدم التي سيتم إلى التخفيض. وعلى المدى الطويل، ينبغي لك التخطيط للانتقال إلى ما يعادلها navigator.userAgentData يتصل، ولكن هناك حل مؤقت.

تُعد الملء التلقائي UA-CH عملية صغيرة تتيح لك استبدال navigator.userAgent بسلسلة جديدة تم إنشاؤها من قيم navigator.userAgentData المطلوبة.

على سبيل المثال، ستنشئ هذه التعليمة البرمجية سلسلة وكيل مستخدم تؤدي بالإضافة إلى تتضمن "النموذج" تلميح:

import { overrideUserAgentUsingClientHints } from './uach-retrofill.js';
overrideUserAgentUsingClientHints(['model'])
  .then(() => { console.log(navigator.userAgent); });

ستعرض السلسلة الناتجة نموذج Pixel 5، ولكنها ستظل تعرض القيمة المخفّضة 92.0.0.0 لأنّه لم يتم طلب تلميح uaFullVersion:

Mozilla/5.0 (Linux; Android 10.0; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.0.0 Mobile Safari/537.36

مزيد من الدعم

إذا لم تكن هذه الاستراتيجيات تشمل حالة استخدامك، يرجى بدء مناقشة في privacy-sandbox-dev-support المستودع ويمكننا استكشاف مشكلتك معًا.

صورة بواسطة ريكاردو روشا على Unإعادة البداية