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

بيت ليبيج

في الإصدار 73 من Chrome، أتحنا إمكانية استخدام ما يلي:

وهناك الكثير غيرها.

اسمي بيت ليب. دعونا نتعمق في الأمر ونطّلع على الميزات الجديدة للمطوّرين في Chrome 73!

سجلّ التغييرات

لا يشمل هذا سوى بعض أبرز اللمحات الرئيسية، لذا يُرجى التحقق من الروابط أدناه لمعرفة التغييرات الإضافية في Chrome 73.

تطبيقات الويب التقدّمية تعمل في كل مكان

توفر تطبيقات الويب التقدّمية تجربة قابلة للتثبيت تشبه التطبيقات ويتم إنشاؤها وتقديمها مباشرةً عبر الويب. في الإصدار 73 من Chrome، أتحنا إمكانية استخدام تطبيقات الويب التقدّمية على جميع الأنظمة الأساسية لأجهزة الكمبيوتر المكتبي - أنظمة التشغيل Mac وWindows وChromeOS وLinux، بالإضافة إلى تبسيط تطوير تطبيقات الويب على الأجهزة الجوّالة.

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

يمكن للمستخدمين تثبيت تطبيق الويب التقدّمي (PWA) من قائمة السياقات في Chrome، أو يمكنك الترويج لتجربة التثبيت مباشرةً باستخدام حدث beforeinstallprompt. بعد تثبيت تطبيق الويب التقدّمي (PWA)، يتم دمجه مع نظام التشغيل ليعمل كتطبيق أصلي: يعثر المستخدمون على التطبيقات ويشغِّلونها من المكان نفسه الذي تتوفّر فيه التطبيقات الأخرى، ويعملون في نافذتهم الخاصة، وتظهر في مبدِّل المهام، ويمكن أن تعرض رموزهم شارات الإشعارات، وما إلى ذلك.

نريد سد الفجوة في الإمكانيات بين الويب والتطبيقات الأصلية لتوفير أساس متين للتطبيقات الحديثة المعروضة على الويب. نعمل على إضافة إمكانات جديدة على منصات الويب التي تتيح لك الوصول إلى عناصر مثل نظام الملفات وقفل التنشيط وإضافة شارة محيطة إلى شريط العناوين لإعلام المستخدمين بإمكانية تثبيت تطبيق الويب التقدّمي (PWA) وتثبيت السياسة للمؤسسات وغير ذلك الكثير.

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

  1. إضافة بيان
  2. إنشاء مجموعة من الرموز
  3. إضافة مشغّل خدمات نموذجية

ثم كرر من هناك.

Signed HTTP Exchanges

Signed HTTP Exchanges (SXG)، وهي جزء من تقنية ناشئة تُسمى حزم الويب متاحة الآن في Chrome 73. تتيح آلية Signed HTTP Exchange إنشاء محتوى "قابل للنقل" يمكن للجهات الأخرى تقديمه، وهذا هو الجانب الأساسي، حيث يحافظ على سلامة الموقع الأصلي وإسناده.

Signed Exchange: جوهر

يؤدي هذا إلى فصل مصدر المحتوى عن الخادم الذي يعرضه، ولكن بما أنه موقّع، فإنه يتم تسليمه من الخادم. عند تحميل المتصفِّح لـ Signed Exchange هذه، يمكن أن يعرض عنوان URL بأمان في شريط العناوين، لأن التوقيع في التبادل يشير إلى أن المحتوى قد تم استخراجه في الأصل من الأصل.

تتيح Signed HTTP Exchange للمستخدمين تسليم المحتوى بشكل أسرع، ما يتيح لهم الحصول على مزايا شبكة توصيل المحتوى (CDN) بدون الحاجة إلى التنازل عن التحكّم في المفتاح الخاص لشهادتك. يخطّط فريق AMP لاستخدام تبادلات HTTP الموقَّعة على صفحات نتائج البحث من Google لتحسين عناوين URL لصفحات AMP وزيادة سرعة النقرات على نتائج البحث.

راجع مشاركة عمليات Signed HTTP Exchange على Kinuko للحصول على تفاصيل حول كيفية البدء.

أوراق أنماط قابلة للإنشاء

توفّر لنا أوراق الأنماط القابلة للإنشاء، الجديد في Chrome 73، طريقة جديدة لإنشاء أنماط قابلة لإعادة الاستخدام وتوزيعها، وهو أمر مهم بشكل خاص عند استخدام Shadow DOM.

من الممكن دائمًا إنشاء أوراق أنماط باستخدام JavaScript. يمكنك إنشاء عنصر <style> باستخدام document.createElement('style'). بعد ذلك، عليك الوصول إلى خاصية الورقة للحصول على مرجع لمثيل CSSStyleSheet الأساسي، وضبط النمط.

رسم بياني يوضّح تحضير لغة CSS وتطبيقها

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

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

عملية البدء بسيطة جدًا وإنشاء مثيل جديد من CSSStyleSheet ثم استخدام replace أو replaceSync لتعديل قواعد ورقة الأنماط.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

اطلع على مشاركة أوراق الأنماط القابلة للإنشاء: أنماط سلسة قابلة لإعادة الاستخدام للحصول على المزيد من التفاصيل وعينات التعليمات البرمجية!

ومقاييس أخرى

هذه ليست سوى عدد قليل من التغييرات في الإصدار 73 من Chrome للمطوّرين، بالطبع وهناك المزيد والمزيد.

  • matchAll() هي طريقة جديدة لمطابقة التعبير العادي على النموذج الأولي للسلسلة، وتعرض مصفوفة تحتوي على التطابقات الكاملة.
  • أصبح العنصر <link> يتيح الآن استخدام السمتَين imagesrcset وimagesizes ليتوافق مع سمتَي srcset وsizes للسمتَين HTMLImageElement.
  • تطبيق نصف قطر تمويه الظل في Blink يتطابق الآن مع Firefox وSafari.
  • يتوفر الآن "الوضع الداكن" في واجهة المستخدم في Chrome على أجهزة Mac، وستتوفّر في هذا النظام حاليًا دعمًا لنظام التشغيل Windows. علاوة على ذلك، يتم العمل على الاستعلام عن وسائط CSS : prefers-color-scheme، الذي يمكن استخدامه لرصد ما إذا كان المستخدم قد طلب من النظام استخدام نسق ألوان فاتح أو داكن. الخطأ الذي حدث في التتبّع هو إضافة دعم لميزة وسائط prefers-color-scheme بتنسيق CSS في Chrome وFirefox.

اشتراك

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

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