الميزات الجديدة في 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" }
    ]
  },
]

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

واجهة برمجة تطبيقات الصور المتحركة على الويب

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

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

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

واجهة برمجة تطبيقات فهرسة المحتوى

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

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

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


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 للحصول على التفاصيل الكاملة.

واجهة برمجة تطبيقات قفل التنشيط

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

أحب الطبخ، لكنني أجد الأمر محبطًا للغاية عند اتباع الوصفة، وتبدأ شاشة الاستراحة! باستخدام واجهة برمجة التطبيقات قفل التنشيط، التي أُطلقت أيضًا من مرحلة التجربة والتقييم في 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 لمعرفة مزيد من المعلومات عن واجهة برمجة التطبيقات وكيفية بدء تجربتها اليوم.

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

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

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

والمزيد

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

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

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

اشتراك

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

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