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

Pete LePage

في الإصدار 76 من Chrome، أضفنا الدعم لما يلي:

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

زر تثبيت المربّع المتعدد الاستخدامات في PWA

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

إذا كان موقعك الإلكتروني يستوفي معايير قابلية تثبيت تطبيق الويب التقدّمي، سيعرض Chrome زر تثبيت في مربّع العرض الشامل يشير إلى المستخدم بأنّه يمكن تثبيت تطبيق الويب التقدّمي. إذا نقر المستخدم على زر التثبيت، يُعدّ ذلك مماثلاً لدعوة prompt() في الحدث beforeinstallprompt، ويؤدي ذلك إلى عرض مربّع حوار التثبيت، ما يسهّل على المستخدم تثبيت تطبيقك المتوافق مع الويب.

اطّلِع على تثبيت تطبيقات الويب التقدّمية من شريط العناوين على أجهزة الكمبيوتر المكتبي للحصول على التفاصيل الكاملة.


إمكانية التحكّم بشكل أكبر في شريط المعلومات المصغّر لتطبيقات الويب التقدّمية

مثال على شريط المعلومات المصغّر "إضافة إلى الشاشة الرئيسية" لتطبيق AirHorner

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

اعتبارًا من الإصدار 76 من Chrome، سيؤدي استدعاء preventDefault() في حدث beforeinstallprompt إلى إيقاف ظهور شريط المعلومات المصغّر.

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

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

تحديثات أسرع لحِزم WebAPK

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

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

اطّلِع على مقالة تحديث حِزم WebAPK بشكلٍ متكرّر للحصول على التفاصيل الكاملة.

الوضع الداكن

يتيح العديد من أنظمة التشغيل الآن استخدام الوضع الداكن أو المظهر الداكن.

تتيح لك prefers-color-scheme طلب البحث عن الوسائط تعديل مظهر موقعك الإلكتروني ومضمونه ليتطابق مع الوضع المفضّل للمستخدم.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

نشر توم مقالة رائعة بعنوان مرحبًا يا ظلام، يا صديقي القديم على web.dev تتضمّن كل ما تحتاج إلى معرفته، بالإضافة إلى نصائح لتصميم جداول الأنماط لتتوافق مع الوضعين الفاتح والداكن.

وغير ذلك

هذه ليست سوى بعض التغييرات في الإصدار 76 من Chrome للمطوّرين، وبالطبع، هناك الكثير من التغييرات الأخرى.

Promise.allSettled()

أنا شخصيًا متحمّس جدًا بشأن Promise.allSettled(). هذه العملية مماثلة لـ Promise.all()، إلا أنّه ينتظر حتى تتم تسوية جميع الوعود قبل العودة.

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

قراءة الأشكال المتعدّدة الأبعاد أسهل

من الأسهل قراءة رموز Blob باستخدام ثلاث طرق جديدة: text() وarrayBuffer() وstream()، ما يعني أنّنا لسنا مضطرين لإنشاء برنامج تضمين لقارئ الملفات بعد الآن.

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

إتاحة الصور في واجهة برمجة التطبيقات للحافظة غير المتزامنة

أضفنا أيضًا إمكانية استخدام الصور في واجهة برمجة التطبيقات Asynchronous Clipboard API، ما يسهّل نسخ الصور ولصقها آليًا.

مراجع إضافية

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

اشتراك

إذا أردت البقاء على اطّلاع على فيديوهاتنا، ما عليك سوى الاشتراك في قناتنا على YouTube Developers في متصفّح Chrome، وستتلقّى إشعارًا عبر البريد الإلكتروني عندما ننشر فيديو جديدًا.

اسمي بيت ليبيج، وفور طرح Chrome 77، سأكون في انتظارك لإخبارك بالجديد في Chrome.