البقاء في الوضع النشط مع واجهة برمجة التطبيقات Screen Wake Lock

Pete LePage
Thomas Steiner

تاريخ النشر: 18 كانون الأول (ديسمبر) 2018

Browser Support

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 126.
  • Safari: 16.4.

Source

ما هي Screen Wake Lock API؟

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

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

تحدّ واجهة برمجة التطبيقات Screen Wake Lock من الحاجة إلى حلول بديلة غير فعّالة وقد تستهلك الكثير من الطاقة. تعالج هذه الواجهة أوجه القصور في واجهة برمجة تطبيقات قديمة كانت تقتصر على إبقاء الشاشة قيد التشغيل وتتضمّن عددًا من مشاكل الأمان والخصوصية.

حالات الاستخدام المقترَحة لواجهة برمجة التطبيقات Screen Wake Lock API

RioRun هو تطبيق ويب طوّرته The Guardian، وكان مثالاً ممتازًا على حالات الاستخدام (مع أنّه لم يعُد متاحًا). يأخذك التطبيق في جولة صوتية افتراضية في ريو، باتّباع مسار ماراثون الألعاب الأولمبية لعام 2016. بدون أقفال التنشيط، سيتم إيقاف شاشات المستخدمين بشكل متكرر أثناء تشغيل الجولة، ما يجعل استخدامها صعبًا.

بالطبع، هناك العديد من حالات الاستخدام الأخرى:

  • تطبيق وصفات طعام يبقي الشاشة مضاءة أثناء تحضيرك كعكة أو وجبة عشاء
  • تطبيق لبطاقة صعود إلى الطائرة أو تذكرة يبقي الشاشة مضاءة إلى أن يتم مسح الرمز الشريطي
  • تطبيق بنمط أكشاك الخدمة الذاتية يبقي الشاشة قيد التشغيل باستمرار
  • تطبيق عرض تقديمي مستند إلى الويب يحافظ على تشغيل الشاشة أثناء العرض التقديمي

استخدام Screen Wake Lock API

توفّر واجهة برمجة التطبيقات Screen Wake Lock API نوعًا واحدًا فقط من أقفال التنشيط، وهو screen.

screen قفل التنشيط

يمنع screen قفل التنشيط إيقاف شاشة الجهاز، ما يتيح للمستخدم رؤية المعلومات المعروضة على الشاشة.

الحصول على مفتاح قفل تشغيل الشاشة

لطلب قفل تنشيط الشاشة، عليك استدعاء الطريقة navigator.wakeLock.request() التي تعرض الكائن WakeLockSentinel. يمكنك اختياريًا ضبط النوع screen كمعلَمة. يمكن للمتصفّح رفض الطلب لأسباب مختلفة (على سبيل المثال، لأنّ مستوى شحن البطارية منخفض جدًا)، لذا من المستحسن تضمين الاستدعاء في عبارة try...catch. تحتوي رسالة الاستثناء على مزيد من التفاصيل في حال حدوث خطأ.

إصدار مفتاح قفل تشغيل الشاشة

تحتاج أيضًا إلى طريقة لإيقاف قفل تنشيط الشاشة، ويتم ذلك من خلال استدعاء الطريقة release() الخاصة بالعنصر WakeLockSentinel. إذا لم تخزِّن مرجعًا إلى WakeLockSentinel، لن تتمكّن من إلغاء القفل يدويًا، ولكن سيتم إلغاؤه عندما تصبح علامة التبويب الحالية غير مرئية.

إذا أردت إلغاء قفل تنشيط الشاشة تلقائيًا بعد مرور فترة زمنية معيّنة، يمكنك استخدام window.setTimeout() لاستدعاء release()، كما هو موضّح في المثال.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a screen wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request();
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released:', wakeLock.released);
    });
    console.log('Screen Wake Lock released:', wakeLock.released);
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Request a screen wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
  wakeLock.release();
  wakeLock = null;
}, 5000);

يحتوي العنصر WakeLockSentinel على سمة باسم released تشير إلى ما إذا تم إصدار عنصر تحكّم مسبقًا. تكون قيمته في البداية false، وتتغيّر إلى true عند إرسال حدث "release". تساعد هذه السمة مطوّري الويب في معرفة وقت إيقاف قفل بدون الحاجة إلى تتبُّعه يدويًا.

دورة حياة عمليات قفل تنشيط الشاشة

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

لإعادة الحصول على قفل تنشيط الشاشة، استمع إلى حدث visibilitychange واطلب قفل تنشيط شاشة جديدًا عند حدوثه:

const handleVisibilityChange = async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    await requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);

تقليل تأثيرك على موارد النظام

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

قبل إضافة قفل تنشيط الشاشة إلى تطبيقك، فكِّر في ما إذا كان يمكن حل حالات الاستخدام من خلال أحد الحلول البديلة التالية:

عرض توضيحي

يمكنك الاطّلاع على العرض التوضيحي لـ Screen Wake Lock ومصدر العرض التوضيحي. لاحظ كيف يتم إلغاء قفل تنشيط الشاشة تلقائيًا عند التبديل بين علامات التبويب أو التطبيقات.

عمليات قفل تنشيط الشاشة في "مدير المهام" لنظام التشغيل

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

الملاحظات

هل عثرت على خطأ في تنفيذ Chrome؟ أو هل يختلف التنفيذ عن المواصفات؟

  • الإبلاغ عن خطأ يُرجى تضمين أكبر قدر ممكن من التفاصيل. قدِّم تعليمات واضحة لإعادة إنتاج الخطأ، واضبط المكوّنات على Blink>WakeLock.

الموارد

الإقرارات

تمت الاستعانة بفيديو إدارة المهام من هنري ليم.