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

Pete LePage

بدأ طرح الإصدار 84 من Chrome على القناة الثابتة الآن.

في ما يلي ما تحتاج إلى معرفته:

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

اختصارات رموز التطبيق

اختصارات رمز التطبيق لتطبيق الويب التقدّمي Twitter

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

يتم تفعيل هذه الاختصارات من خلال الضغط مع الاستمرار على رمز التطبيق على Android. يمكنك بسهولة إضافة اختصار إلى تطبيق الويب التقدّمي (PWA) من خلال إنشاء موقع shortcuts جديد في بيان تطبيق الويب، ووصف الاختصار، وإضافة الرموز.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  },
]

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

Web animations API

يضيف الإصدار 84 من Chrome مجموعة كبيرة من الميزات غير المتوافقة سابقًا إلى واجهة برمجة التطبيقات Web Animations API.

  • تم وعد animation.ready وanimation.finished.
  • يمكن للمتصفح الآن تنظيف الصور المتحركة القديمة وإزالتها، ما يوفر مساحة في الذاكرة ويؤدي إلى تحسين الأداء.
  • ويمكنك الآن دمج الصور المتحركة باستخدام الأوضاع المركبة، وذلك باستخدام الخيارين add وaccumulate.

أنا لا أستطيع تقديم جميع التحسينات مباشرةً أو تقديم أمثلة جيدة هنا، لذا يمكنك الاطّلاع على تحسينات واجهة برمجة التطبيقات Web Animations API في Chromium 84 للحصول على التفاصيل الكاملة.

Content indexing API

إذا كان المحتوى متاحًا بدون اتصال بالشبكة ولكن هل المستخدم لا يعرف ذلك؟ هل هذا الخيار متاح فعلاً؟ هناك مشكلة في الاكتشاف!

باستخدام Content Indexing API، التي تم الانتهاء من تجربتها الأصلية للتو، يمكنك إضافة عناوين URL والبيانات الوصفية للمحتوى المتاح بلا إنترنت. باستخدام هذه العلامات الوصفية، يتم عرض المحتوى بعد ذلك للمستخدم، ما يساهم في تحسين إمكانية العثور عليه.

لإضافة محتوى إلى الفهرس، استخدِم index.add() في تسجيل worker الخدمة، وقدِّم البيانات الوصفية المطلوبة عن المحتوى.


const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  url: '/articles/123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

هل تريد الاطّلاع على المحتوى الذي سبق أن تم فهرسته؟ اتصل بالرقم index.getAll() بشأن تسجيل مشغّل الخدمة.

const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

اطّلِع على مقالة فهرسة صفحاتك المتوافقة مع وضع عدم الاتّصال بالإنترنت باستخدام Content Indexing API للحصول على التفاصيل الكاملة.

Wake lock API

تنفيذ ميزة Wake Lock على موقع Betty Crocker الإلكتروني

أحب الطبخ، لكنني أجد الأمر محبطًا للغاية عند اتباع وصفة، وتبدأ شاشة الاستراحة! يمكن للمواقع الإلكترونية طلب قفل التنشيط لمنع تعتيم الشاشة وقفلها، وذلك من خلال واجهة برمجة تطبيقات التنشيط (Wake lock) التي تظهر أيضًا من مرحلة التجربة والتقييم في Chrome 84.

في الواقع، يستخدم موقع Betty Crocker الإلكتروني هذا اليوم، وقد نشر دراسة حالة على web.dev تظهر فيها زيادة بنسبة %300 في مؤشرات الرغبة في الشراء.

للحصول على قفل تنبيه، يمكنك استدعاء navigator.wakeLock.request()، وسيعرض العنصر WakeLockSentinel الذي يُستخدَم "لإلغاء قفل التنبيه".


// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

بالطبع، هناك المزيد من التفاصيل، لذا اطّلِع على مقالة إبقاء الشاشة نشطة باستخدام واجهة برمجة التطبيقات Screen Wake Lock API، ولكن على الأقل لن تتسخ شاشتي بالدقيق بعد الآن.

عمليات التجربة والتقييم

هناك مرحلتان جديدتان للمصدر أريد ذكرهما. إذا كنت حديث العهد بمرحلة تقييم وتجربة المنتجات، اطّلِع على مقالة البدء بمرحلة تقييم وتجربة المنتجات في Chrome.

الكشف عن حالة عدم النشاط

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

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

اطّلِع على مقالة رصد المستخدمين غير النشطين باستخدام واجهة برمجة التطبيقات Idle Detection API للاطّلاع على مزيد من المعلومات عن واجهة برمجة التطبيقات وكيفية بدء تجربتها اليوم.

شريحة SIMD لتجميع الويب

ويبدأ Web Assembly SIMD فترة تجريبية للإصدار الأول. ويقدّم تعليمات عمليات ترتبط بتعليمات SIMD المتاحة بشكل شائع في الأجهزة. وتُستخدم عمليات SIMD لتحسين الأداء، خاصة في تطبيقات الوسائط المتعددة.

لمعرفة مزيد من المعلومات عن WebAssembly SIMD، يمكنك الاطّلاع على التطبيقات السريعة المتوازية التي تستخدم WebAssembly SIMD.

والمزيد

إصدار Chrome 84 كبير، ولكن هناك بعض التحديثات المهمة الأخرى التي أريد أن أشير إليها.

مراجع إضافية

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

اشتراك

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

اسمي بيت ليبيج، وما زلت بحاجة إلى قص شعري، ولكن فور طرح Chrome 85، سأخبرك بالجديد في Chrome.