الجديد في Chrome 103

Pete LePage

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

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

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

رمز حالة HTTP 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() بما إذا كان العنصر مرئيًا أم لا.

مراجع إضافية

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

اشتراك

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

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