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

Pete LePage

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

  • يمكنك الآن تحميل جداول التنسيقات في CSS باستخدام عبارات import، تمامًا مثل وحدات JavaScript.
  • يمكن لتطبيقات الويب التقدّمية المثبَّتة التسجيل كمعالجات عناوين URL، ما يتيح للمستخدمين الانتقال مباشرةً إلى تطبيق الويب التقدّمي.
  • تم تعديل واجهة برمجة التطبيقات Multi-Screen Window Placement API استنادًا إلى ملاحظاتك، وبدأت فترة تجريبية ثانية للمنشأ.
  • سيُعقد مؤتمر PWA في الفترة بين 6 و7 تشرين الأول (أكتوبر).
  • وهناك الكثير من الميزات الأخرى.

اسمي بيت ليبيه، وأعمل وأصور من المنزل. لنلقِ نظرة على الميزات الجديدة للمطوّرين في الإصدار 93 من Chrome.

نصوص وحدة CSS

يمكنك الآن تحميل جداول التنسيقات في CSS باستخدام عبارات import، تمامًا مثل وحدات JavaScript. يمكن بعد ذلك تطبيق جداول الأنماط على المستند أو جذور الظل بالطريقة نفسها المستخدَمة في جداول الأنماط القابلة للإنشاء.

إنّ ميزة "النصوص البرمجية لوحدة CSS" الجديدة رائعة للعناصر المخصّصة. وعلى عكس الطُرق الأخرى لتطبيق CSS من JavaScript، ليس عليك إنشاء عناصر أو العبث بسلاسل JavaScript من نص CSS.

لاستخدامه، استورِد جدول الأنماط باستخدام assert {type: 'css'}، ثم طبِّقه على document أو shadowRoot من خلال استدعاء adoptedStyleSheets.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

ولكن احرِص على عدم حذف الرمز assert، وإلا سيتم التعامل مع الملف على أنّه JavaScript ولن يعمل.

اطّلِع على مقالة استخدام نصوص CSS Module Scripts لاستيراد أوراق الأنماط على web.dev للحصول على التفاصيل الكاملة.

Multi-Screen Window Placement API

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

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

يمكنك التحقّق سريعًا مما إذا كانت هناك أكثر من شاشة واحدة متصلة بالجهاز:

const isExtended = window.screen.isExtended;
// returns true/false

ولكن، تتوفّر الوظيفة الرئيسية في window.getScreens()، التي تقدّم كل التفاصيل عن الشاشات المرفقة.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

على سبيل المثال، يمكنك تحديد الشاشة الأساسية، ثم استخدام requestFullscreen() لعرض عنصر على تلك الشاشة.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

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

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

اطّلِع على مقالة "توم" بعنوان إدارة عدّة شاشات باستخدام Multi-Screen Window Placement API على web.dev للاطّلاع على مزيد من التفاصيل.

دورة إصدار قصيرة

في آذار (مارس)، أعلنّا عن خططنا لتقصير دورة الإصدار وطرح إصدار جديد من Chrome كل أربعة أسابيع.

لقد حان هذا الوقت، وسنطرح الإصدار 94 من Chrome في 21 أيلول (سبتمبر). يمكنك العثور على تواريخ الإصدار المخطّط لكل إصدار في تقويم Chrome.

ميزات جديدة في تطبيقات الويب التقدّمية

إذا كنت بصدد إنشاء تطبيق ويب تقدّمي، هناك تجربتان جديدتان لاختبار المصدر تستحقان الاطّلاع عليهما.

معالجات عناوين URL لتطبيقات الويب التقدّمية

إذا كان لديك تطبيق ويب تقدّمي مثبَّت، ونقرت على رابط يؤدي إلى هذا التطبيق، من المحتمل أن تريد فتحه في تطبيق الويب التقدّمي، وليس في علامة تبويب متصفّح.

من خلال تحديد url_handlers في بيان تطبيق الويب، وإضافة ملف web-app-origin-association إلى دليل .well-known/، يمكنك إخبار المتصفّح بأنّه إذا نقر أحد المستخدمين على رابط يؤدي إلى تطبيقك على الويب التقدّمي، من المفترض أن يتم فتحه داخل تطبيق الويب التقدّمي المثبّت.

مثال على url_handlers في ملف manifest.json:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

مثال على ملف web-app-origin-association:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

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

يمكنك الاطّلاع على كل التفاصيل حول الفترة التجريبية للمصدر في مقالة تطبيقات PWA كمعالِجات عناوين URL على web.dev.

تراكب عناصر التحكّم في النوافذ

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

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

لمزيد من المعلومات عن الفترة التجريبية الأصلية، اطّلِع على مقالة تخصيص طريقة عرض عناصر التحكّم في النوافذ على شريط العناوين في تطبيق الويب التقدّمي (PWA).

PWA Summit

سيُعقد مؤتمر PWA Summit في تشرين الأول (أكتوبر). وهو مؤتمر مجاني على الإنترنت يركز على مساعدة الجميع في تحقيق النجاح باستخدام "تطبيقات الويب التقدّمية". إنّ PWA Summit هو تعاون بين أشخاص من حفنة من الشركات المختلفة المشارِكة في إنشاء تكنولوجيات تطبيقات الويب التقدمية: Google و Intel وMicrosoft وSamsung.

هناك الكثير من المحادثات والمحتوى الرائع. يمكنك الاطّلاع على مزيد من المعلومات والتسجيل على PWASummit.org.

وغير ذلك

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

  • تمّت إضافة دعم لكلمات المحاذاة الرئيسية في المربّع المرن وعناصر المربّع المرن: start وend وself-start وself-end وleft وright.
  • تتيح الآن واجهة برمجة التطبيقات async clipboard API استخدام ملفات SVG.
  • وسيتمّ تطبيق سمة media عند ضبط meta theme-color، لكي تتمكّن من تحديد ألوان مظهر مختلفة للوضعَين الفاتح والداكن.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

مراجع إضافية

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

اشتراك

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

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