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