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

Pete LePage

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

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

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

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

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

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

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

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

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

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

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

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

بعد ذلك، يمكنك تكرار الخطوات.

تبادلات HTTP الموقَّعة

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

ملف Signed Exchange: الجوهر

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

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

يمكنك الاطّلاع على مشاركة Signed HTTP Exchanges على موقع Kinuko للحصول على تفاصيل حول كيفية البدء.

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

توفّر لنا جداول الأنماط القابلة للإنشاء، وهي ميزة جديدة في الإصدار 73 من Chrome، طريقة جديدة لإنشاء أنماط قابلة لإعادة الاستخدام و توزيعها، وهو أمر مهم بشكل خاص عند استخدام نموذج كائن المستند (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 على YouTube، وستتلقّى إشعارًا عبر البريد الإلكتروني عند نشر فيديو جديد.

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