الجديد في Chrome 103

Pete LePage

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

  • يتوفّر رمز حالة HTTP 103 جديد يساعد المتصفّح في تحديد المحتوى المطلوب تحميله مسبقًا قبل بدء وصول الصفحة.
  • تمنح واجهة برمجة التطبيقات Local Font Access API تطبيقات الويب إمكانية إحصاء الخطوط المثبَّتة على كمبيوتر المستخدم واستخدامها.
  • AbortSignal.timeout() هي طريقة أسهل لتنفيذ المهلات على واجهات برمجة التطبيقات غير المتزامنة.
  • وهناك الكثير من الميزات الأخرى.

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

رمز حالة HTTP 103 103 - تلميحات مبكرة

من بين الطرق التي يمكنك من خلالها تحسين أداء الصفحة استخدام إشارات الموارد. وتمنحهم المتصفح "تلميحات" حول العناصر التي قد يحتاج إليها لاحقًا. على سبيل المثال، تحميل الملفات مسبقًا أو الاتصال بخادم مختلف

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

ولا يمكن للمتصفّح اتّخاذ أي إجراء استنادًا إلى هذه الإشارات إلى أن يرسل الخادم جزءًا من الصفحة على الأقل.

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

بعد أن ينشئ الخادم الصفحة، يمكنه إرسالها باستخدام استجابة ‎ HTTP 200 العادية. عندما تظهر الصفحة، يبدأ المتصفّح فيتحميل الموارد المطلوبة.

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

بدء استخدام HTTP 103:

واجهة برمجة تطبيقات الوصول إلى الخطوط المحلية

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

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

للحصول على قائمة بالخطوط المثبَّتة على الجهاز، عليك أولاً طلب الإذن.

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

بعد ذلك، يمكنك الاتصال بالرقم window.queryLocalFonts(). يعرض هذا العمود صفيفًا من جميع الخطوط المثبّتة على جهاز المستخدم.

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

إذا كنت مهتمًا فقط بمجموعة فرعية من الخطوط، يمكنك فلترتها عن طريق إضافة postscriptNames.

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

اطّلِع على مقالة "توم" استخدام خطوط متقدّمة مع الخطوط المحلية على web.dev للاطّلاع على التفاصيل الكاملة.

مهلات أسهل باستخدام AbortSignal.timeout()

في JavaScript، يتم استخدام AbortController وAbortSignal لإلغاء مكالمة غير متزامنة.

على سبيل المثال، عند تقديم طلب fetch()، يمكنك إنشاء AbortSignal وتمريره إلى fetch(). إذا أردت إلغاء fetch() قبل أن يعود، يمكنك استدعاء abort() في مثيل AbortSignal. حتى الآن، إذا أردت إيقافه بعد فترة زمنية معيّنة، كان عليك setTimeout().

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

من الجيّد أنّ ذلك أصبح أسهل بفضل طريقة timeout() الثابتة الجديدة على AbortSignal. ويعرض العنصر AbortSignal الذي يتم تلقائيًا إيقافه بعد عدد مُحدَّد من المللي ثانية. ما كان يتطلّب في السابق كتابة حفنة من أسطر الرمز البرمجي، أصبح الآن سطرًا واحدًا فقط.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

يتوفّر AbortSignal.timeout() في الإصدار 103 من Chrome، وهو متوفّر أيضًا في Firefox وSafari.

وغير ذلك

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

  • يمكن الآن مشاركة تنسيق ملف الصورة avif باستخدام ميزة "المشاركة على الويب".
  • يتطابق متصفّح Chromium الآن مع Firefox من خلال تنشيط popstate مباشرةً بعد تغييرات عنوان URL. أصبح ترتيب الأحداث الآن: popstate ثم hashchange على كِلا النظامَين الأساسيَين.
  • ويُعلمك الرمز Element.isVisible() بما إذا كان العنصر مرئيًا أم لا.

مراجع إضافية

يتناول هذا فقط بعض النقاط الرئيسية. تحقق من الروابط أدناه للتعرف على تغييرات إضافية في Chrome 103.

اشتراك

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

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