في الإصدار 76 من Chrome، أتحنا إمكانية استخدام ما يلي:
- الاستعلام عن الوسائط في
prefers-color-scheme
، ما يؤدي إلى إضافة الوضع الداكن إلى المواقع الإلكترونية. - زر تثبيت في المربّع المتعدد الاستخدامات لتسهيل عملية تثبيت تطبيقات الويب التقدّمية على أجهزة الكمبيوتر المكتبي.
- منع ظهور شريط المعلومات المصغّر في تطبيقات الويب التقدّمية على الأجهزة الجوّالة.
- تحديثات أكثر تكرارًا لـ WebAPK.
- والكثير غير ذلك.
اسمي بيت ليب، وسأتحدث بالتفصيل عن الميزات الجديدة للمطوّرين في الإصدار 76 من Chrome.
زر تثبيت المربّع المتعدد الاستخدامات في وضع الويب التقدّمي (PWA)
في الإصدار 76 من Chrome، نسهِّل على المستخدمين تثبيت تطبيقات الويب التقدّمية على سطح المكتب، من خلال إضافة زر تثبيت إلى شريط العناوين، ويُسمّى أحيانًا المربّع المتعدّد الاستخدامات.
إذا كان موقعك الإلكتروني يستوفي
معايير تثبيت تطبيقات الويب التقدّمية، سيعرض Chrome
زر التثبيت في المربّع المتعدد الاستخدامات ليوضّح للمستخدم أنّه
يمكن تثبيت تطبيق الويب التقدّمي (PWA). إذا نقر المستخدم على زر التثبيت، سيتم إجراء ذلك بالطريقة نفسها التي يتم بها استدعاء prompt()
في حدث beforeinstallprompt
، إذ يعرض مربّع حوار التثبيت، ما يسهّل على المستخدم تثبيت تطبيق الويب التقدّمي (PWA).
راجع تثبيت شريط العناوين لتطبيقات الويب التقدّمية على سطح المكتب للحصول على التفاصيل الكاملة.
إمكانية تحكُّم إضافية في شريط المعلومات المصغّر لتطبيق الويب التقدّمي (PWA)
على الأجهزة الجوّالة، يعرض 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" (76)
- الإيقاف النهائي للإصدار 76 من Chrome أو إزالته
- تحديثات ChromeStatus.com لإصدار Chrome 76
- الميزات الجديدة في JavaScript في Chrome 76
- قائمة تغييرات مستودع مصدر Chromium
اشتراك
إذا كنت تريد الاطّلاع على آخر الأخبار حول فيديوهاتنا، يمكنك الاشتراك في قناة Chrome Developers على YouTube، وستتلقّى إشعارًا عبر البريد الإلكتروني عندما ننشر فيديو جديدًا.
اسمي بيت ليب، وبعد طرح الإصدار 77 من Chrome، سأكون على استعداد هنا لإخبارك بالجديد في Chrome!