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

بدأنا بطرح الإصدار 84 من Chrome في الإصدار الثابت الآن.

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

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

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

اختصارات رمز التطبيق لتطبيق الويب التقدّمي 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 في الإصدار 84 من Chromium للحصول على التفاصيل الكاملة.

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

تطبيق قفل التنشيط على الموقع الإلكتروني لشركة Betty Crocker

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

في الواقع، يستخدم موقع 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 للاطّلاع على مزيد من المعلومات عن واجهة برمجة التطبيقات وكيفية بدء تجربتها اليوم.

Web Assembly SIMD

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

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

والمزيد

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

مراجع إضافية

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

اشتراك

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

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