لا شيء أسوأ من أن يتم إيقاف شاشة جهازك الجوّال أثناء تحضير إحدى خطوات الوصفة. تعرَّف على الطريقة التي استخدم بها موقع الطهي BettyCrocker.com واجهة برمجة التطبيقات Wake Lock API لمنع حدوث ذلك.
على مدار قرن تقريبًا، كانت Betty Crocker هي مصدر تعليمات الطهي الحديثة وتطوير الوصفات الموثوق بها في الولايات المتحدة. تم إطلاق الموقع الإلكتروني BettyCrocker.com في عام 1997، ويتلقّى اليوم أكثر من 12 مليون زائر شهريًا. بعد تنفيذ واجهة Wake Lock API، كانت مؤشراتها إلى الرغبة في الشراء أعلى بنسبة% 300 تقريبًا لمستخدمي قفل التنشيط مقارنةً بجميع المستخدمين.
تطبيقات iOS وAndroid التي تم إيقافها
تم إطلاق بيتي كروكر كثير من المعجبين في عام 2014، وأصدرت مؤخرًا تطبيقاتها من متجر Apple App Store ومتجر Google Play بعد إلغاء أولوياتها. لفترة طويلة، فضّل فريق Betty Crocker إضافة ميزات جديدة إلى الموقع الإلكتروني المتوافق مع الأجهزة الجوّالة بدلاً من تطبيقات iOS/Android. كانت المنصة التقنية التي تم إنشاء تطبيقات iOS/Android عليها قديمة، ولم يكن لدى النشاط التجاري الموارد اللازمة لتوفير الدعم لتحديث التطبيقات وصيانتها من الآن فصاعدًا. كان تطبيق الويب أيضًا أكبر من حيث عدد الزيارات بشكل موضوعي، وأكثر حداثة وأسهل تحسينًا.
ومع ذلك، كانت تطبيقات iOS/Android تتضمّن ميزة رائعة أحبّها المستخدمون:
نصيحة احترافية لصناعة محتوى من جيل الألفية: لا يخفي تطبيق @BettyCrocker للأجهزة الجوّالة أو يقفله عند اتّباع وصفة طعام. —@AvaBeilke
80٪ من الأشخاص يطهوون باستخدام جهاز في المطبخ، ولكن هناك مشكلة في تعتيم الشاشة وقفلها. ماذا فعل صاحبة قناة @BettyCrocker؟ عدّل المطوّرون التطبيق لاستخدام ميزة "عدم تعتيم الشاشة" عندما يكون المستخدمون في وصفة طعام. —@KatieTweedy
توفير ميزة رائعة على الويب باستخدام واجهة برمجة التطبيقات Wake Lock API
عند الطهي باستخدام جهاز، لا شيء أكثر إحباطًا مما يتعين عليك فعله، وهو لمس الشاشة بيديك المتسختين أو حتى أنفك عندما يتم إيقاف الشاشة. سألت شركة Betty Crocker نفسها كيف يمكنها نقل الميزة الرائعة لتطبيقاتها المتوافقة مع iOS/Android إلى التطبيق على الويب. وهذا عندما تعرّفت على Project Fugu وواجهة برمجة التطبيقات Wake Lock API.
توفّر واجهة برمجة التطبيقات Wake Lock API طريقة لمنع الجهاز من تعتيم الشاشة أو قفلها. تتيح هذه الميزة تجارب جديدة كانت تتطلّب حتى الآن استخدام تطبيق iOS/Android. وتساعد واجهة برمجة التطبيقات Wake Lock API في تقليل الحاجة إلى استخدام الحلول البديلة التي قد تستهلك الكثير من الطاقة.
طلب قفل تنشيط
لطلب قفل تنبيه، عليك استدعاء طريقة navigator.wakeLock.request()
التي تعرض عنصر WakeLockSentinel
. ستستخدم هذا الكائن
كقيمة أساسية.
يمكن للمتصفّح رفض الطلب لأسباب مختلفة
(على سبيل المثال، بسبب انخفاض طاقة البطارية)،
لذلك من الممارسات الجيدة تضمين طلب الاتصال في عبارة try…catch
.
إزالة قفل التنشيط
ستحتاج أيضًا إلى طريقة لإلغاء قفل التنشيط،
ويتم ذلك من خلال استدعاء طريقة release()
للكائن WakeLockSentinel
.
إذا كنت تريد إزالة قفل التنشيط تلقائيًا بعد مرور فترة زمنية معيّنة،
يمكنك استخدام window.setTimeout()
للاتصال release()
، كما هو موضّح في المثال أدناه.
// The wake lock sentinel.
let wakeLock = null;
// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request('screen');
wakeLock.addEventListener('release', () => {
console.log('Wake Lock was released');
});
console.log('Wake Lock is active');
} catch (err) {
console.error(`${err.name}, ${err.message}`);
}
};
// Request a wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
wakeLock.release();
wakeLock = null;
}, 5000);
التنفيذ
من خلال تطبيق الويب الجديد، سيتمكّن المستخدمون من التنقّل بسهولة في الوصفة، وإكمال الخطوات، وحتى الابتعاد عن الجهاز بدون قفل الشاشة. لتحقيق هذا الهدف، قام الفريق أولاً ببناء نموذج أوّلي سريع للواجهة الأمامية كدليل على المفهوم وجمع مدخلات تجربة المستخدم.
بعد أن تبيّن أنّ النموذج الأوّلي مفيد، صمم الفريق مكوّن Vue.js يمكن مشاركته على جميع علاماتها التجارية (BettyCrocker، Pillsbury وTablespoon). على الرغم من أنّ Betty Crocker هي الشركة الوحيدة التي كانت لديها تطبيقات iOS وAndroid، تشترك المواقع الإلكترونية الثلاثة في قاعدة رموز برمجية، ما سمح لها بتنفيذ المكوّن مرة واحدة ونشره في كل مكان، كما هو موضّح في لقطات الشاشة أدناه.
عند تطوير المكوّن استنادًا إلى إطار العمل المُعدَّل للموقع الإلكتروني الجديد،
تم التركيز بشكل كبير على
ViewModel
طبقة نمط MVVM.
فكّر الفريق أيضًا في إمكانية التشغيل التفاعلي عند البرمجة،
لإيقاف الوظائف في إطارات العمل القديمة والجديدة للموقع الإلكتروني.
لتتبُّع مدى إمكانية العرض وسهولة الاستخدام، دمجت شركة Betty Crocker تتبُّع الإحصاءات للأحداث الأساسية في دورة حياة قفل التنشيط. استخدَم الفريق إدارة الميزات لنشر مكوّن قفل التنشيط على موقع إلكتروني واحد لطرح الإصدار الأولي، ثم نشر الميزة على بقية المواقع الإلكترونية بعد مراقبة الاستخدام وحالة الصفحة. ويواصلون مراقبة بيانات الإحصاءات استنادًا إلى استخدام هذا المكوّن.
ولضمان أمان المستخدمين، أنشأ الفريق مهلة إجبارية لإيقاف قفل التنشيط بعد ساعة واحدة من عدم النشاط. وفي ما يتعلّق بالتنفيذ النهائي الذي تم الاتفاق عليه، كان على المدى القصير توفير مفتاح تبديل في جميع صفحات الوصفات على مواقعها الإلكترونية. وفي المدى الطويل، يتوقّع الفريق إعادة تصميم طريقة عرض صفحة الوصفة.
حاوية قفل التنشيط
var wakeLockControl = () => {
return import(/* webpackChunkName: 'wakeLock' */ './wakeLock');
};
export default {
components: {
wakeLockControl: wakeLockControl,
},
data() {
return {
config: {},
wakeLockComponent: '',
};
},
methods: {
init: function(config) {
this.config = config || {};
if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {
this.wakeLockComponent = 'wakeLockControl';
} else {
console.log('Browser not supported');
}
},
},
};
مكوّن قفل التنشيط
<template>
<div class="wakeLock">
<div class="textAbove"></div>
<label class="switch" :aria-label="settingsInternal.textAbove">
<input type="checkbox" @change="onChange()" v-model="isChecked">
<span class="slider round"></span>
</label>
</div>
</template>
<script type="text/javascript">
import debounce from 'lodash.debounce';
const scrollDebounceMs = 1000;
export default {
props: {
settings: { type: Object },
},
data() {
return {
settingsInternal: this.settings || {},
isChecked: false,
wakeLock: null,
timerId: 0,
};
},
created() {
this.$_raiseAnalyticsEvent('Wake Lock Toggle Available');
},
methods: {
onChange: function() {
if (this.isChecked) {
this.$_requestWakeLock();
} else {
this.$_releaseWakeLock();
}
},
$_requestWakeLock: async function() {
try {
this.wakeLock = await navigator.wakeLock.request('screen');
//Start new timer
this.$_handleAbortTimer();
//Only add event listeners after wake lock is successfully enabled
document.addEventListener(
'visibilitychange',
this.$_handleVisibilityChange,
);
window.addEventListener(
'scroll',
debounce(this.$_handleAbortTimer, scrollDebounceMs),
);
this.$_raiseAnalyticsEvent('Wake Lock Toggle Enabled');
} catch (e) {
this.isChecked = false;
}
},
$_releaseWakeLock: function() {
try {
this.wakeLock.release();
this.wakeLock = null;
//Clear timer
this.$_handleAbortTimer();
//Clean up event listeners
document.removeEventListener(
'visibilitychange',
this.$_handleVisibilityChange,
);
window.removeEventListener(
'scroll',
debounce(this.$_handleAbortTimer, scrollDebounceMs),
);
} catch (e) {
console.log(`Wake Lock Release Error: ${e.name}, ${e.message}`);
}
},
$_handleAbortTimer: function() {
//If there is an existing timer then clear it and set to zero
if (this.timerId !== 0) {
clearTimeout(this.timerId);
this.timerId = 0;
}
//Start new timer; Will be triggered from toggle enabled or scroll event
if (this.isChecked) {
this.timerId = setTimeout(
this.$_releaseWakeLock,
this.settingsInternal.timeoutDurationMs,
);
}
},
$_handleVisibilityChange: function() {
//Handle navigating away from page/tab
if (this.isChecked) {
this.$_releaseWakeLock();
this.isChecked = false;
}
},
$_raiseAnalyticsEvent: function(eventType) {
let eventParams = {
EventType: eventType,
Position: window.location.pathname || '',
};
Analytics.raiseEvent(eventParams);
},
},
};
</script>
النتائج
تم نشر مكوّن Vue.js على جميع المواقع الإلكترونية الثلاثة وحقّق نتائج رائعة. خلال الفترة من 10 كانون الأول (ديسمبر) 2019 إلى 10 كانون الثاني (يناير) 2020، سجّلت BettyCrocker.com المقاييس التالية:
- من بين جميع مستخدمي Betty Crocker الذين لديهم متصفّح متوافق مع واجهة برمجة التطبيقات Wake Lock API، فعالَأ 3.5% منهم الميزة على الفور، ما جعلها من بين أهم 5 إجراءات.
- كانت مدة الجلسة للمستخدمين الذين فعّلوا قفل التنشيط أطول بـ 3.1 مرة مقارنةً بالمستخدمين الذين لم يفعّلوا هذا القفل.
- كان معدّل الارتداد للمستخدمين الذين فعّلوا ميزة "قفل التنشيط" أقل بنسبة %50 مقارنةً بالمستخدمين الذين لا يستخدمون هذه الميزة.
- كانت مؤشرات نية الشراء أعلى بنسبة %300 تقريبًا لدى مستخدمي قفل التنشيط مقارنةً بجميع المستخدمين.
3.1×
مدّة الجلسة الأطول
50%
انخفاض في معدّل الارتداد
300%
مؤشّرات عالية للرغبة في الشراء
الاستنتاجات
شهدت "بيتي كروكر" نتائج رائعة من خلال استخدام واجهة برمجة تطبيقات Wake Lock API. يمكنك اختبار الميزة بنفسك من خلال البحث عن وصفتك المفضّلة على أيّ من المواقع الإلكترونية (BettyCrocker، Pillsbury أو Tablespoon) وتفعيل خيار منع إطفاء الشاشة أثناء الطهي.
لا تقتصر حالات استخدام عمليات قفل التنشيط على المواقع الإلكترونية التي تعرض وصفات طعام. ومن الأمثلة الأخرى تطبيقات بطاقة صعود الطائرة أو تطبيقات التذاكر التي تحتاج إلى إبقاء الشاشة مفعَّلة إلى أن يتم مسح الرمز الشريطي ضوئيًا، أو تطبيقات على طراز Kiosk تُبقي الشاشة تعمل باستمرار، أو تطبيقات العرض التقديمي المستندة إلى الويب التي تمنع الشاشة من النوم أثناء العرض التقديمي.
لقد جمعنا كل ما تحتاج إلى معرفته حول Wake Lock API في مقالة شاملة على هذا الموقع الإلكتروني. نتمنى لك قراءة ممتعة وطهيًا لذيذًا.
الشكر والتقدير
صورة شخص يعجن العجين من موقع Flickr، شكرًا لصاحبها Julian Hochgesang على Unsplash.