الميزات الجديدة في 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 والإصدارات الأحدث. بالنسبة إلى المتصفّحات أو البيئات التي لا تتيح استخدام هذه الميزة بعد، مثل Node، يمكنك استخدام مكتبة urlpattern-polyfill.

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

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

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

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

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

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

يمكنك تجربة إصدار تجريبي سريع والاطّلاع على الرمز البرمجي على Glitch.

PWA Summit

هل شاركت في قمة التطبيقات المتوافقة مع الويب في وقت سابق من هذا الشهر؟

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

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

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

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

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

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

وغير ذلك

بالطبع، هناك الكثير من الميزات الأخرى.

مراجع إضافية

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

اشتراك

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

اسمي "بيت ليبيه"، وسأكون هنا لإطلاعك على ميزات الإصدار 96 من Chrome فور طرحه.