دراسة حالة حول Wake Lock API: زيادة بنسبة% 300 في مؤشرات الرغبة في الشراء على BettyCrocker.com

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

Phillip Kriegel

Thomas Steiner

تطبيقات iOS وAndroid التي تم إيقافها

تم إصداره لانتشار واسع في عام 2014، أخرجت "بيتي كروكر" تطبيقاتها مؤخرًا من Apple App Store و"متجر Google Play". بعد خفض أولوياتها. فضّل فريق بيتي كروكر منذ فترة طويلة إضافة ميزات جديدة إلى موقع الجوّال بدلاً من تطبيقات iOS/Android. كان النظام الأساسي التقني الذي تم إنشاء تطبيقات iOS/Android عليه قديمًا، ولم تكن لدى الشركة الموارد لدعم تحديث التطبيقات والحفاظ على أدائها. كان تطبيق الويب أيضًا بشكل موضوعي أكبر من حيث حركة البيانات، أكثر حداثة وأسهل في التحسين.

ومع ذلك، تحتوي تطبيقات iOS/Android على ميزة أساسية واحدة نالت إعجاب المستخدمين:

نصيحة احترافية لجيل الألفية في مجال الطهي: تطبيق @BettyCrocker للأجهزة الجوّالة لا تعتيم أو تقفل عند اتباع وصفة. —@AvaBeilke

80٪ من الأشخاص يطهوون باستخدام جهاز في المطبخ، ولكن هناك مشكلة في تعتيم الشاشة وقفلها. ماذا فعل صاحبة قناة @BettyCrocker؟ تم تعديل إعدادات التطبيق ليصبح "عدم تعتيم الشاشة" عندما يكون المستخدمون في وصفة طعام. —@KatieTweedy

توفير الميزة الرائعة على الويب باستخدام Wake Lock API

عند الطهي باستخدام الجهاز، لن يكون هناك أي إزعاج أكثر إحباطًا. من الاضطرار إلى لمس الشاشة بيديك فوضوية أو حتى أنفك عندما تنطفئ الشاشة. سألت "بيتي كروكر" نفسها عن كيفية الاستفادة من الميزة الرائعة في تطبيقات iOS/Android. إلى تطبيق الويب. هذا عندما علموا مشروع Fugu واجهة برمجة تطبيقات Wake Lock.

توفّر واجهة Wake Lock API وسيلة لمنع تشغيل الجهاز. بدءًا من تعتيم الشاشة أو قفلها تتيح هذه الإمكانية تجارب جديدة تتطلب، حتى الآن، استخدام تطبيق iOS/Android. تحدّ واجهة برمجة تطبيقات Wake Lock من الحاجة إلى حلول بديلة يمكن أن تكون غير مفهومة أو تتسبّب في استهلاك الطاقة.

طلب قفل التنشيط

لطلب تفعيل قفل تنشيط، يجب طلب إجراء 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). على الرغم من أن بيتي كروكر فقط تمتلك تطبيقات iOS وAndroid، المواقع الثلاثة لهما قاعدة رموز مشتركة، لذا تمكنوا من تنفيذ المكون مرة واحدة ونشره في كل مكان، كما هو موضح في لقطات الشاشة أدناه.

وعند تطوير المكوِّن بناءً على إطار العمل المحدث للموقع الجديد، كان هناك تركيز قوي على الطبقة ViewModel من نمط MVVM. تمت برمجة الفريق أيضًا مع وضع إمكانية التشغيل البيني في الاعتبار لتفعيل الوظائف على أُطر العمل القديمة والجديدة للموقع الإلكتروني.

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

كإجراء آمن للإخفاقات للمستخدمين، أنشأ الفريق مهلة مفروضة لإيقاف قفل التنشيط بعد ساعة واحدة من عدم النشاط. وقد توصلوا إلى عملية التنفيذ النهائية هو التبديل على المدى القصير في جميع صفحات وصفات الطعام على مواقعهم الإلكترونية وعلى المدى الطويل، يتصوران رؤية مجدّدة لصفحة وصفة الطعام.

حاوية قفل التنشيط

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 تقريبًا لمستخدمي قفل التنشيط مقارنةً بجميع المستخدمين.

الاستنتاجات

شهدت "بيتي كروكر" نتائج رائعة من خلال استخدام واجهة برمجة تطبيقات Wake Lock API. يمكنك تجربة الميزة بنفسك من خلال البحث عن وصفة الطعام المفضّلة لديك على أي موقع من مواقعها. (BettyCrocker، Pillsbury، أو Tablespoon) وتفعيل مفتاح التبديل منع تعتيم الشاشة أثناء الطهي.

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

لقد جمعنا كل ما تحتاج إلى معرفته حول Wake Lock API. في مقالة شاملة على هذا الموقع استمتع بالقراءة، ونتمنى لك طهيًا سعيدًا!

شكر وتقدير

صورة الشخص الذي يعجن العجين مقدَّمة من جوليان هوتشيغسانغ على Unسبل المساعدة