الميزات الجديدة في Chrome 95

Pete LePage

وفي ما يلي ما تحتاج إلى معرفته:

اسمي بيت ليب، وأعمل وأتصّل بالتصوير من المنزل، لنطّلِع على التفاصيل ونتعرّف على الميزات الجديدة للمطوّرين في Chrome 95.

يتم التوجيه باستخدام URLPattern

تعتمد جميع تطبيقات الويب تقريبًا على التوجيه بطريقة ما، سواء كان ذلك عبارة عن رمز يتم تشغيله على خادم يعيّن مسارًا للملفات على القرص أو على المنطق في تطبيق من صفحة واحدة يعمل على تحديث نموذج العناصر في المستند (DOM) عند تغيير عنوان URL. URLPattern هي واجهة برمجة تطبيقات جديدة لمنصة الويب تعمل على توحيد بنية نمط التوجيه.

وتعتمد على أساس أطر العمل الحالية، مما يسهِّل أداء مهام التوجيه الشائعة. على سبيل المثال، المطابقة مع عناوين URL الكاملة أو اسم مسار عنوان URL، ثم عرض معلومات حول الرمز المميز ومطابقات المجموعة.

إذا كنت على دراية ببنية التوجيه المستخدَمة في Express أو Ruby on Rails أو path-to-regexp، قد تبدو مألوفة لك.

لاستخدام هذه الميزة، أنشِئ URLPattern() جديدة وقدِّم التفاصيل التي تريد تطبيق نمط مطابق لها. يمكن أن تحتوي الأنماط على أحرف بدل ومجموعات رموز مميزة ومجموعات تعبيرات عادية ومعدِّلات المجموعات.

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

على سبيل المثال، لنلقِ نظرة على URLPattern التي قد يستخدمها "مستندات Google". سنحدِّد kind للملف وID ونوع mode الذي سيتم فتح الملف فيه. ثم لاستخدام النمط، يمكننا طلب إما test() أو exec().

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

يتم تفعيل URLPattern تلقائيًا في الإصدار 95 من Chrome وEdge. ويمكنك استخدام مكتبة urlpattern-polyfill بالنسبة إلى المتصفحات أو البيئات التي لا تتوافق معها حاليًا، مثل Node.

يمكنك الاطّلاع على مقالة طارق بعنوان URLPattern جلب التوجيه إلى النظام الأساسي للويب للحصول على تفاصيل كاملة.

انتقاء الألوان باستخدام واجهة برمجة التطبيقات Eye Dropper API

يحتوي كل تطبيق تصميم استخدمته تقريبًا على أداة اختيار الألوان، ما يسهّل التعرّف على اللون. تحتوي بعض المتصفحات على إمكانات أداة اختيار الألوان مضمَّنة في <input type=color>، لكنها ليست مثالية.

إن واجهة برمجة تطبيقات Eyedropper، التي يطبقها بعض الأشخاص في Microsoft تضيف هذه الوظيفة إلى الويب. لاستخدامه، أنشِئ مثيل EyeDropper() جديد، ثم استدعِ open() عليه.

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

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

يمكنك تجربة عرض توضيحي سريع ورؤية الرمز البرمجي على أداة Glitch.

قمة PWA

هل شاركت في مؤتمر PWA في وقت سابق من هذا الشهر؟

لقد كان من الرائع رؤية الكثير من الأشخاص يتحدثون عن تطبيقات الويب التقدّمية (PWA) ويشاركون تجاربهم. إذا لم تتمكن من العثور على أي فيديوهات، يمكنك الاطّلاع عليها على الرابط PWASummit.org أو قناة PWA Summit على YouTube.

مرحلة التجربة والتقييم لخفض وكيل المستخدم

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

بدءًا من الإصدار 95 من Chrome، تتوفّر نسخة تجريبية من المصدر جديدة تسمح لك بتلقّي سلسلة Universal Analytics المخفَّضة الآن. وسيمكّنك هذا من اكتشاف المشاكل وإصلاحها قبل أن يصبح UA الذي تم تخفيضه هو السلوك التلقائي في Chrome.

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

يمكنك الاطّلاع على كل التفاصيل والمخطط الزمني في مقالة مرحلة التجربة والتقييم في تقليل وكيل المستخدم على developer.chrome.com.

ومقاييس أخرى

بالطبع هناك المزيد.

محتوى إضافي للقراءة

يتناول هذا فقط بعض النقاط الرئيسية. اطّلِع على الروابط أدناه لمعرفة التغييرات الإضافية في الإصدار 95 من Chrome.

اشتراك

للاطّلاع على آخر الأخبار، اشترِك في قناة مطوّري برامج Chrome على YouTube، وستتلقّى إشعارًا عبر البريد الإلكتروني كلّما أطلقنا فيديو جديدًا.

اسمي بيت ليب، وبعد إصدار Chrome 96، سأكون هنا لإخبارك بالجديد في Chrome!