Нет ничего хуже, чем отключение экрана мобильного устройства во время готовки на этапе приготовления. Узнайте, как кулинарный сайт BettyCrocker.com использовал API Wake Lock, чтобы предотвратить это.
Устаревшие приложения iOS и Android
Выпущенная с большой помпой в 2014 году, Betty Crocker недавно убрала свои приложения из Apple App Store и Google Play Store после того, как они были лишены приоритета. Долгое время команда Betty Crocker предпочитала добавлять новые функции на мобильный сайт вместо приложений iOS/Android. Техническая платформа, на которой были созданы приложения iOS/Android, устарела, и у бизнеса не было ресурсов для поддержки обновления и поддержки приложений в будущем. Веб-приложение также было объективно намного больше с точки зрения трафика, более современным и более простым в улучшении.
Однако у приложений для iOS/Android была одна замечательная функция , которая понравилась пользователям:
Совет от профессионалов кулинарии поколения Y: мобильное приложение @BettyCrocker не затемняется и не блокируется, когда вы следуете рецепту. — @AvaBeilke
80% людей готовят с помощью устройства на кухне, но затемнение экрана и блокировка — это проблема. Что сделала @BettyCrocker ? Обновила свое приложение, чтобы оно НЕ затемнялось, когда пользователи находятся в рецепте. — @Katie Tweedy
Внедрение потрясающей функции в Интернет с помощью API Wake Lock
При готовке с помощью устройства нет ничего более раздражающего, чем необходимость прикасаться к экрану грязными руками или даже носом, когда экран выключается. Betty Crocker задалась вопросом, как им перенести убийственную функцию своих приложений iOS/Android в веб-приложение. Именно тогда они узнали о Project Fugu и API Wake Lock .
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);
Реализация
С новым веб-приложением пользователи смогут легко перемещаться по рецепту, выполнять шаги и даже выходить без блокировки экрана. Чтобы достичь этой цели, команда сначала создала быстрый прототип интерфейса в качестве доказательства концепции и для сбора информации по UX.
После того, как прототип оказался полезным, они разработали компонент Vue.js , который можно было бы использовать совместно со всеми их брендами ( BettyCrocker , Pillsbury и Tablespoon ). Несмотря на то, что только у Betty Crocker были приложения для iOS и Android, у трех сайтов была общая кодовая база, поэтому они смогли реализовать компонент один раз и развернуть его везде, как показано на снимках экрана ниже.
При разработке компонента на основе модернизированного фреймворка нового сайта особое внимание уделялось слою ViewModel шаблона MVVM . Команда также программировала с учетом совместимости, чтобы обеспечить функциональность на устаревших и новых фреймворках сайта.
Чтобы отслеживать просматриваемость и удобство использования, Бетти Крокер интегрировала отслеживание аналитики для основных событий в жизненном цикле wake lock. Команда использовала управление функциями для развертывания компонента wake lock на одном сайте для первоначального производственного развертывания, а затем развернула функцию на остальных сайтах после мониторинга использования и состояния страницы. Они продолжают отслеживать аналитические данные на основе использования этого компонента.
В качестве защиты от сбоев для пользователей команда создала принудительный тайм-аут для отключения блокировки пробуждения после одного часа бездействия. Окончательная реализация, на которой они остановились, в краткосрочной перспективе представляла собой переключатель на всех страницах рецептов на их сайтах. В долгосрочной перспективе они представляют себе обновленный вид страницы рецептов.
Контейнер для блокировки следа
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, у которых браузер совместим с API Wake Lock, 3,5% сразу включили эту функцию, что сделало ее одним из пяти лучших действий.
- Продолжительность сеанса у пользователей, включивших функцию блокировки сна, была в 3,1 раза больше, чем у пользователей, которые этого не сделали.
- Показатель отказов у пользователей, включивших функцию блокировки пробуждения, был на 50% ниже, чем у тех, кто не использовал функцию блокировки пробуждения.
- Показатели намерения совершить покупку были примерно на 300% выше среди пользователей Wake Lock по сравнению со всеми остальными пользователями.
3.1 ×
Более длительная продолжительность сеанса
50 %
Более низкий показатель отказов
300 %
Более высокие показатели намерения покупки
Выводы
Бетти Крокер добилась фантастических результатов, используя API Wake Lock. Вы можете протестировать эту функцию самостоятельно, выполнив поиск своего любимого рецепта на любом из их сайтов ( BettyCrocker , Pillsbury или Tablespoon ) и включив переключатель «Предотвратить затемнение экрана во время готовки ».
Варианты использования wake locks не ограничиваются сайтами с рецептами. Другими примерами являются приложения для посадочных талонов или билетов, которым необходимо держать экран включенным до тех пор, пока не будет отсканирован штрих-код, приложения в стиле киоска, которые держат экран включенным постоянно, или веб-приложения для презентаций, которые не дают экрану перейти в спящий режим во время презентации.
Мы собрали все, что вам нужно знать о Wake Lock API, в подробной статье на этом самом сайте. Приятного чтения и приятной готовки!
Благодарности
Фотография человека, замешивающего тесто, предоставлена Джулианом Хохгесангом на Unsplash .