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

Pete LePage

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

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

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

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

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

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


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

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

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

بدءًا من Chrome 76، سيؤدي استدعاء 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 تتضمّن كل المعلومات التي تحتاج إلى معرفتها، بالإضافة إلى نصائح حول هندسة صفحات الأنماط بطريقة تناسب الإضاءة والوضع الداكن.

وغير ذلك

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

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، ما يسهِّل نسخ الصور ولصقها آليًا.

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

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

اشتراك

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

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