به نکات مشتری عامل کاربر مهاجرت کنید

استراتژی‌هایی برای انتقال سایت خود از اتکا به رشته کاربر-عامل به نکات جدید User-Agent Client.

روآن مروود

رشته User-Agent یک سطح اثرانگشت غیرفعال قابل توجه در مرورگرها است و پردازش آن نیز دشوار است. با این حال، انواع دلایل معتبر برای جمع‌آوری و پردازش داده‌های عامل کاربر وجود دارد، بنابراین آنچه لازم است مسیری برای راه‌حل بهتر است. User-Agent Client Hints هم راهی صریح برای اعلام نیاز شما به داده های عامل کاربر و هم روش هایی برای برگرداندن داده ها در قالبی با کاربری آسان ارائه می دهد.

این مقاله شما را از طریق ممیزی دسترسی شما به داده‌های عامل کاربر و انتقال استفاده از رشته عامل کاربر به راهنمای کاربر-عامل مشتری راهنمایی می‌کند.

جمع آوری حسابرسی و استفاده از داده های عامل کاربر

مانند هر شکلی از جمع‌آوری داده، همیشه باید دلیل جمع‌آوری داده‌ها را بدانید. اولین قدم، صرف نظر از اینکه آیا اقدامی انجام خواهید داد یا خیر، این است که بدانید کجا و چرا از داده های عامل کاربر استفاده می کنید.

اگر نمی‌دانید داده‌های عامل کاربر در کجا استفاده می‌شوند یا نه، کد جلویی خود را برای استفاده از navigator.userAgent و کد پشتیبان خود را برای استفاده از سربرگ User-Agent HTTP جستجو کنید. همچنین باید کد جلویی خود را برای استفاده از ویژگی‌های منسوخ شده، مانند navigator.platform و navigator.appVersion بررسی کنید.

از نقطه نظر عملکردی، به هر جایی از کد خود که در حال ضبط یا پردازش هستید فکر کنید:

  • نام یا نسخه مرورگر
  • نام یا نسخه سیستم عامل
  • ساخت یا مدل دستگاه
  • نوع CPU، معماری، یا بیت (به عنوان مثال، 64 بیتی)

همچنین این احتمال وجود دارد که شما از یک کتابخانه یا سرویس شخص ثالث برای پردازش عامل کاربر استفاده کنید. در این مورد، بررسی کنید که آیا آنها در حال به روز رسانی برای پشتیبانی از راهنمایی های مشتری-عامل مشتری هستند یا خیر.

آیا شما فقط از داده های عامل کاربر اصلی استفاده می کنید؟

مجموعه پیش‌فرض User-Agent Client Hints شامل موارد زیر است:

  • Sec-CH-UA : نام مرورگر و نسخه اصلی/مهم
  • Sec-CH-UA-Mobile : مقدار بولی که دستگاه تلفن همراه را نشان می دهد
  • Sec-CH-UA-Platform : نام سیستم عامل

نسخه کاهش یافته رشته کاربر-عامل که پیشنهاد شده است نیز این اطلاعات پایه را به روشی سازگار با عقب حفظ می کند. برای مثال، به جای Chrome/90.0.4430.85 رشته شامل Chrome/90.0.0.0 می‌شود.

اگر فقط رشته عامل کاربر را برای نام مرورگر، نسخه اصلی یا سیستم عامل بررسی می‌کنید، کد شما همچنان به کار خود ادامه می‌دهد، اگرچه احتمالاً هشدارهای منسوخ شدن را می‌بینید.

در حالی که می‌توانید و باید به User-Agent Client Hints مهاجرت کنید، ممکن است محدودیت‌های کد یا منابع قدیمی داشته باشید که از این امر جلوگیری می‌کند. کاهش اطلاعات در رشته عامل کاربر به این روش سازگار با عقب برای اطمینان از این است که در حالی که کد موجود اطلاعات جزئی کمتری دریافت می کند، همچنان باید عملکرد اولیه را حفظ کند.

استراتژی: API جاوا اسکریپت سمت مشتری درخواستی

اگر در حال حاضر از navigator.userAgent استفاده می‌کنید، باید پیش از تجزیه رشته user-agent به ترجیح navigator.userAgentData بروید.

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

اگر موبایل یا دسکتاپ را بررسی می‌کنید، از مقدار Boolean 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
  });

همچنین اگر می خواهید از پردازش سمت سرور به پردازش سمت سرویس گیرنده بروید، ممکن است بخواهید از این استراتژی استفاده کنید. API جاوا اسکریپت نیازی به دسترسی به هدرهای درخواست HTTP ندارد، بنابراین مقادیر user-agent را می توان در هر نقطه درخواست کرد.

استراتژی: هدر سمت سرور استاتیک

اگر از هدر درخواست 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 را بخواهد، اما باید با استفاده از سربرگ Permissions-Policy آن را به صراحت به https://cdn.site واگذار کند. فهرست نکات کنترل شده توسط خط مشی در پیش نویس زیرساخت نکات مشتریان موجود است

⬇️ پاسخ از 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")

استراتژی: تفویض نکات به iframes

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 ممکن است خودش ارسال کند لغو می کند، بنابراین مطمئن شوید که هر چیزی که سایت iframe'd به آن نیاز دارد را مشخص کرده اید.

استراتژی: نکات پویا سمت سرور

اگر بخش‌های خاصی از سفر کاربر دارید که در آن به تعداد بیشتری از راهنمایی‌ها نسبت به سایر قسمت‌های سایت نیاز دارید، می‌توانید به جای اینکه به صورت ایستا در کل سایت، آن نکات را درخواست کنید، درخواست کنید. این برای مدیریت پیچیده‌تر است، اما اگر قبلاً سرصفحه‌های مختلفی را بر اساس هر مسیر تنظیم کرده‌اید، ممکن است امکان‌پذیر باشد.

نکته مهمی که در اینجا باید به خاطر داشته باشید این است که هر نمونه از هدر 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

این امر در همان اولین درخواست هزینه‌های سربار تلاش مجدد را متحمل می‌شود، اما هزینه پیاده‌سازی نسبتاً کم است. هدر اضافی را ارسال کنید و مرورگر بقیه کارها را انجام خواهد داد.

برای موقعیت‌هایی که واقعاً به نکات اضافی در بارگذاری صفحه اول نیاز دارید، پیشنهاد قابلیت اطمینان Client Hints مسیری را برای تعیین نکات در تنظیمات سطح اتصال تعیین می‌کند. این از پسوند Application-Layer Protocol Settings (ALPS) به TLS 1.3 استفاده می کند تا این انتقال اولیه نکات در اتصالات HTTP/2 و HTTP/3 را فعال کند. این هنوز در مراحل اولیه است، اما اگر فعالانه تنظیمات TLS و اتصال خود را مدیریت می کنید، این زمان ایده آلی برای مشارکت است.

استراتژی: پشتیبانی از میراث

ممکن است کدهای قدیمی یا شخص ثالث در سایت خود داشته باشید که به navigator.userAgent بستگی دارد، از جمله بخش هایی از رشته کاربر-عامل که کاهش می یابد. در دراز مدت باید برنامه ریزی کنید که به فراخوانی معادل navigator.userAgentData بروید، اما یک راه حل موقت وجود دارد.

UA-CH retrofill یک کتابخانه کوچک است که به شما امکان می دهد navigator.userAgent با یک رشته جدید ساخته شده از مقادیر درخواست شده navigator.userAgentData بازنویسی کنید.

به عنوان مثال، این کد یک رشته عامل کاربر ایجاد می کند که علاوه بر این شامل راهنمایی "model" است: 

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 شروع کنید و ما می‌توانیم مشکل شما را با هم بررسی کنیم.

عکس ریکاردو روشا در Unsplash