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

Pete LePage

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

• أصبح إنشاء محتوى قابل للنقل أسهل باستخدام عمليات تبادل HTTP الموقَّعة.
• يصبح تغيير الأنماط ديناميكيًا أسهل بكثير باستخدام جداول الأنماط القابلة للإنشاء.
• أصبح بإمكانك استخدام تطبيقات الويب التقدّمية على أجهزة Mac، ما يتيح استخدامها على جميع منصات أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة، ما يسهّل إنشاء التطبيقات القابلة للتثبيت التي يتم عرضها على الويب.

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

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

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

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

• قائمة التغييرات في مستودع مصدر Chromium
• تعديلات ChromeStatus.com على الإصدار 73 من Chrome
• الميزات التي سيتم إيقافها نهائيًا أو إزالتها في الإصدار 73 من Chrome
• تعديلات الوسائط في الإصدار 73 من Chrome
• الميزات الجديدة في JavaScript في Chrome 73

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

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

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

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

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

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

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

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

عمليات Signed HTTP Exchange

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

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

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

اطّلِع على مقالة Kinuko حول تبادلات HTTP الموقَّعة للحصول على تفاصيل حول كيفية البدء.

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

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

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

يؤدي استخدام هذه الطريقة إلى زيادة حجم جدول الأنماط. والأسوأ من ذلك، أنّه يؤدي إلى ظهور محتوى غير منسق. تتيح جداول الأنماط القابلة للإنشاء تحديد وأعداد أنماط 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.