كيفية حل مشكلة استخدام navigator.userAgent و navigator.appVersion و navigator.platform في المتصفحات الحديثة؟

تخبرك الرسالة أنك تستخدم بعض الموارد ال deprecated، وهي

• navigator.userAgent
• navigator.appVersion
• navigator.platform

لذلك يمكن الانتقال إلى استخدام `navigator.userAgentData` للوصول إلى معلومات المتصفح بدلاً من استخدام الخصائص المهجورة `navigator.userAgent` و `navigator.platform` و `navigator.appVersion`. يمكن استخدام هذا الأسلوب في المتصفحات الحديثة التي تدعم هذه الوظيفة مثل Chrome و Firefox و Edge.

فيما يلي مثال على كيفية استخدام `navigator.userAgentData` للحصول على معلومات المتصفح:

if (navigator.userAgentData) {
  const uaData = navigator.userAgentData;
  const browserName = uaData.brands.filter(brand => brand.brand === 'Google Chrome')[0].brand;
  const browserVersion = uaData.brands.filter(brand => brand.brand === 'Google Chrome')[0].version;
  console.log(`Browser: ${browserName}, Version: ${browserVersion}`);
} else {
  const userAgent = navigator.userAgent;
  const browserName = userAgent.indexOf("Chrome") !== -1 ? "Google Chrome" : "Unknown";
  const browserVersion = userAgent.substring(userAgent.indexOf("Chrome")).split("/")[1].split(" ")[0];
  console.log(`Browser: ${browserName}, Version: ${browserVersion}`);
}

في هذا المثال، يتم فحص توفر `navigator.userAgentData` وإذا كانت متاحة، يتم استخدامها للحصول على اسم وإصدار المتصفح. يتم استخدام خاصية `brands` للحصول على مصفوفة من العلامات التجارية للمتصفحات وإصداراتها، ويتم استخدام `filter` للبحث عن ماركة متصفح محدد (في هذا الحالة Google Chrome)، ثم يتم عرض اسم المتصفح وإصداره.

إذا لم يكن `navigator.userAgentData` متاحًا، يتم استخدام `navigator.userAgent` للحصول على اسم وإصدار المتصفح. يتم استخدام `indexOf` للبحث عن "Chrome" في سلسلة معرف المستخدم، ثم يتم استخدام `substring` و `split` لاستخراج إصدار المتصفح.

يجب ملاحظة أن هذا المثال يستخدم `navigator.userAgentData` للحصول على اسم المتصفح وإصداره، ولكن يمكن استخدامه أيضًا للحصول على معلومات أخرى، مثل نوع جهاز المستخدم وهل يدعم الجهاز WebVR أو WebAR.

المشكلة تظهر عندما تقوم صفحة الويب أو البرنامج النصي باستخدام أحد خصائص المتصفح مثل navigator.userAgent أو navigator.appVersion أو navigator.platform، وتحدث في المتصفحات الحديثة، مثل جوجل كروم.

وتم تقليل الكمية من المعلومات المتاحة في سلسلة User Agent string اعتبارًا من Chrome 101 لأسباب تتعلق بالأمان والخصوصية.

لذلك، حاول تجربة الحلول التالية:

1- الكشف عن الخصائص بشكل تدريجي (progressive enhancement)

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

2- الكشف عن الخصائص باستخدام تقنية feature detection

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

3- الانتقال إلى استخدام navigator.userAgentData

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

أي باختصار، يجب تحديث الكود واستخدام الأساليب الحديثة والآمنة للكشف عن خصائص المتصفح، مثل feature detection و navigator.userAgentData.