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

Pete LePage

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

  • يصبح التوجيه أسهل مع تضمين URLPattern في المتصفِّح.
  • توفر Eye Dropper API أداة مدمجة لاختيار الألوان.
  • تتوفّر تجربة جديدة لتحديد المصدر تتيح لك الموافقة على تلقّي انخفاض سلسلة UA الآن.
  • فيديوهات مؤتمر PWA متاحة على الإنترنت.
  • وهناك المزيد.

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

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

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

فهي تعتمد على أطر العمل الحالية، مما يسهل تنفيذ مهام التوجيه الشائعة. على سبيل المثال، المطابقة مع عناوين 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>، لكنها ليست مثالية.

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

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

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

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

مؤتمر PWA

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

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

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

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

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

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

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

وغير ذلك

بالطبع هناك الكثير.

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

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

اشتراك

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

اسمي بيت ليبيج، وبمجرد طرح Chrome 96، سأكون على أتم استعداد إطلاعك على الميزات الجديدة في Chrome