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

Pete LePage

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

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

زر تثبيت تطبيق ويب تقدّمي (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) للاطّلاع على أفضل الممارسات التي ننصح بها للترويج لتثبيت تطبيقات الويب التقدّمية.

تحديثات أسرع لحِزم 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.

اشتراك

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

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