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

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

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

زر تثبيت المربّع المتعدد الاستخدامات في وضع الويب التقدّمي (PWA)

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

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

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


إمكانية تحكُّم إضافية في شريط المعلومات المصغّر لتطبيق الويب التقدّمي (PWA)

مثال على شريط المعلومات المصغّر "إضافة إلى الشاشة الرئيسية" لشركة 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) للتعرّف على أفضل الممارسات التي ننصحك باستخدامها للترويج لتثبيت تطبيقات الويب التقدّمية.

تحديثات أسرع لـ WebAPKs

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

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

راجع تحديث WebAPKs بشكل متكرر أكثر للحصول على التفاصيل الكاملة.

الوضع الداكن

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

يتيح لك الاستعلام عن الوسائط 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);
});

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

وأضفنا أيضًا إمكانية الصور إلى واجهة برمجة التطبيقات غير المتزامنة للحافظة، ما يسهّل نسخ الصور ولصقها آليًا.

محتوى إضافي للقراءة

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

اشتراك

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

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